Hide product on predictive search results (Impulse Theme)

Highlighted
Shopify Partner
5 0 0

Hi, I'm trying to hide products based on their tags for the predictive (autocomplete) search results. I have no problem hiding them on the search page, but they are still loading on predictive results. 

 

Here's what I've done to the search.liquid file:

 {% unless item.tags contains 'placeholder-image' %}
search code here
{% endunless %}

This successfully hides all the placeholder image results from the search page, however, there is a predictive search template where I can't hide those products from. The predictive search template is below:

<script id="PredictiveTemplate" type="text/template">
  <div class="predictive-result__layout">
    {% raw %}
      {{#if products}}
        <div data-type-products>
          <div class="grid grid--uniform">
            {{#products}} 
              <div class="grid__item grid-product small--one-half medium-up--one-quarter" data-aos="row-of-4">
                <div class="grid-product__content">
                  {{#if custom_label }}
                    <div class="grid-product__tag grid-product__tag--custom">
                      {{custom_label}}
                    </div>
                  {{/if}}
                  {{#if on_sale }}
                    <div class="grid-product__tag grid-product__tag--sale">
                    
                      {% endraw %}{{ 'products.general.sale' | t }}{% raw %}
                      
                    </div>

                  {{/if}}

                  <a href="{{url}}" class="grid-product__link">
                    <div class="grid-product__image-mask">
                      <div
                        class="grid__image-ratio grid__image-ratio--object grid__image-ratio--{% endraw %}{{ settings.predictive_image_size }}{% raw %}">
                        <div class="predictive__image-wrap">
                          {{#if image }}
                            <img class="image-fit lazyload"
                                data-src="{{image}}"
                                data-widths="[180, 360, 540, 720]"
                                data-sizes="auto">
                          {{/if}}
                        </div>
                      </div>
                    </div>
                    <div class="grid-product__meta">
                      <div class="grid-product__title grid-product__title--{% endraw %}{{ settings.type_product_style }}{% raw %}">
                        {{title}}
                      </div>
                      {% endraw %}{%- if settings.predictive_search_show_vendor -%}{% raw %}
                        <div class="grid-product__vendor">{{vendor}}</div>
                      {% endraw %}{%- endif -%}{% raw %}
                      {% endraw %}{%- if settings.predictive_search_show_price -%}{% raw %}
                        <div class="grid-product__price">
                          {{#if on_sale }}
                            <span class="grid-product__price--original">{{{compare_price_max}}}</span>
                          {{/if}}
                          {{{price}}}
                        </div>
                      {% endraw %}{%- endif -%}{% raw %}
                    </div>
                  </a>
                </div>
              </div>
            {{/products}}
          </div>
        </div>
      {{/if}}

      {{#if pages}}
        <div data-type-pages>
          <p class="h6 predictive__label">{% endraw %}{{ 'general.search.pages' | t }}{% raw %}</p>
          {{#pages}}
            <div>
              <a href="{{url}}">
                {{title}}
              </a>
            </div>
          {{/pages}}
        </div>
      {{/if}}

      {{#if articles}}
        <div data-type-articles>
          <p class="h6 predictive__label">{% endraw %}{{ 'general.search.articles' | t }}{% raw %}</p>
          <div class="grid grid--uniform">
            {{#articles}}
              <div class="grid__item grid-product small--one-half medium-up--one-quarter" data-aos="row-of-4">
                <a href="{{url}}" class="grid-product__link grid-product__link--inline">

                  <div class="grid-product__image-mask">
                    <div
                      class="grid__image-ratio grid__image-ratio--object grid__image-ratio--{% endraw %}{{ settings.predictive_image_size }}{% raw %}">
                      <div class="predictive__image-wrap">
                        {{#if image }}
                          <img class="image-fit lazyload"
                              data-src="{{image}}"
                              data-widths="[180, 360, 540, 720]"
                              data-sizes="auto">
                        {{/if}}
                      </div>
                    </div>
                  </div>

                  <div class="grid-product__meta">
                    {{title}}
                  </div>
                </a>
              </div>
            {{/articles}}
          </div>
        </div>
      {{/if}}
    {% endraw %}
  </div>
</script>

Any help would be much appreciated! Thank you

0 Likes
Highlighted
Shopify Partner
2 0 2

Hi, Sophia. 

I was facing the same issue. Given that the Predictive Search results are being pulled from the (https://shopify.dev/docs/themes/ajax-api/reference/predictive-search) makes it a bit more complex if you are trying to exclude products via JS. My workaround based on the API instructions where it states that:

Limitations
Individual products can't be excluded from predictive search results. If a product has been hidden from SEO by using the metafield object, then it won't appear in predictive search results.

You can add this simple metafield to the products you don't want the predictive search to display by doing the following entries in the metafield object for those products:

"namespace" : "seo" "key" : "hidden" "value" : 1 "value_type" : "integer"

Once you add these, products won't show in your predictive search. 

Good luck! 

0 Likes