How To Avoid Showing Sold Out Products On Search Page?

marco4
Tourist
12 0 1

Hello, I'm trying to modify my search.liquid in order to don't show up on the results any sold out product, can someone help me?Thanks in advance!!
​​​​​​this link that shows one example of my problem https://absolutecult.com/search?q=bone+daddy

I paste the search.liquid code, 

 

<!-- /templates/search.liquid --> 
{% paginate search.results by 12 %} 
<div class="container">
  <div class="main-search-container">
    <div class="row">
      <div class="col-sm-12">
        <div class="search-form">
          {% if search.performed %}
          {% if search.results_count == 0 %}
          <h3 class="text-center" {% if settings.language_enable %}data-translate="general.search.no_results_html|terms:{{search.terms}}"{% endif %}>{{ 'general.search.no_results_html' | t: terms: search.terms }}</h3>
          {% else %}
          <h3 class="text-center" {% if settings.language_enable %}data-translate="general.search.results_for_html|terms:{{search.terms}}"{% endif %}>{{ 'general.search.results_for_html' | t: terms: search.terms }}</h3>
          {% endif %}
          {% else %}
          <h3 class="text-center" {% if settings.language_enable %}data-translate="general.search.title"{% endif %}>{{ 'general.search.title' | t }}</h3>
          {% endif %} 
          {% include 'search-bar' %}
        </div>
      </div>
      {% if search.performed %} 
      <div class="col-sm-12"> 
        <div class="row">
          <div class="category-products">
            <div id="products" class="products-grid grid-product-masonry">
              {% if search.results.size > 0 %}  
              {% for product in search.results %}
              <div class="item product col-sm-3">  
                {% include 'product-grid-item' %} 
              </div>  
              {% endfor %} 
              {% endif %}
            </div>
          </div>
        </div> 
        {% if paginate.pages > 1 %} 
        <div class="pagenav-wrap">
          <div class="pagination-search">
            {{ paginate | default_pagination | replace: '&laquo; Previous', '<i class="fa fa-angle-left"></i>' | replace: 'Next &raquo;', '<i class="fa fa-angle-right"></i>' }}
          </div>
        </div>
        {% endif %} 
      </div>
      {% endif %} 
    </div>
  </div>
</div> 
{% endpaginate %} 

 

 

 

 

Carson_Shold
Shopify Partner
44 0 15

Hey Marco, the important part of that code you posted is this:

{% for product in search.results %}
  <div class="item product col-sm-3">  
    {% include 'product-grid-item' %} 
  </div>  
{% endfor %} 

That's saying, "loop through all the products in the search and output them". What we want to do is add a condition saying "if it's sold out, don't show it". That's nice and easy with two extra lines. Replace the above code with this:

{% for product in search.results %}
  {% if product.available %}
  <div class="item product col-sm-3">  
    {% include 'product-grid-item' %} 
  </div>
  {% endif %}
{% endfor %} 

Let me know if you run into any issues. Cheers.

0 Likes
Jason
Shopify Expert
10041 119 1876

I do have to add on to the comment above that this approach can cause some issues. Let's run over a scenario:

  • The search pagination on your cart page shows 50 products per page
  • You have 100 items in the store, and with the word "foo" in the title
  • 50 of those products are sold out.

Now if a customer runs a search for "foo" it's possible that the first page of results will show nothing. This is because:

  1. The first page of search results has 50 items
  2. It happened that the first 50 items were sold out.

Obviously this is an unlikely scenerio but you will see variations of that in reality. Some pages will have or less results shown. The code Carson offered up however is by far the simplest method so don't be shy using it. Just be aware of the possible end results. 

For future readers of this post also be aware that some themes will show a count for the total number of results shown. Hiding the solid out product with Liquid won't adjust that number. If there is 10 results returned and you hide 9, the count will still show 10. That's an issue that can be resolved as well but the code is a bit more than a few lines.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Admin_Chleidert
New Member
3 0 0

Hi @Jason

I am currently facing exact this problem. I filter the search results based on its variant.inventory_quantity. Can you provide a solution or just an idea how I could fix this problem.

Thanks in advance

0 Likes
Team_IT_Fast_Pr
New Member
5 0 0

@Jason I filtered our collection product page by out of stock within pagination limit is 12 row. like your explanation when the product of 12 total has one stock out hiding from the page. 11 product still exist normally but I have one empty column in this page, it's annoying. I was custom some code for 3 days but not find the solutions.  I want to make a full page when still there is some product is available on the next page. thank you
pagination2.PNG

0 Likes
Gigi0ne
Tourist
8 0 4

@Team_IT_Fast_Pr

hi, have you any solution for your( and my) problem?

0 Likes
solectionlv
Tourist
10 0 1

I messed up my search.liquid page by pasting  {% if product.available %} after {% comment %} If we have a product {% endcomment %} (replacing the line.
I think the line read something along the lines of {% if search.results= product}.  Please advise.

I was attempting to make sold out items not show in search.

 

 {% if search.performed %}
        {% assign terms = search.terms | escape %}
        {% if search.results_count == 0 %}
        <div id="keyword margin-bottom-10">
          {{ 'general.search.no_results_html' | t: terms: terms }}
        </div>
        {% else %}
        <div id="keyword margin-bottom-10">
          {{ 'general.search.results_html' | t: terms: terms }}
        </div>
        <!--START PRODUCT GRID-->
        <div class="products-grid">
          <div class="products products-grid-wrapper">
            <div class="row">
              {% for item in search.results %}
              {% comment %} If we have a product {% endcomment %}
                {% if product.available %}          
              {% assign product = item %}
              <div class="col-md-4 col-sm-4 col-xs-12">
                {% include 'product-grid' %}
              </div>
              {% endif %}
              {% else %}
              <p>{{ 'general.search.no_products' | t }}</p>
              {% endfor %}
0 Likes
solectionlv
Tourist
10 0 1

Figured it out with the code below.
Any idea  what I need to insert in this code to make sold out items not show in search?

 

 {% if search.performed %}
        {% assign terms = search.terms | escape %}
        {% if search.results_count == 0 %}
        <div id="keyword margin-bottom-10">
          {{ 'general.search.no_results_html' | t: terms: terms }}
        </div>
        {% else %}
        <div id="keyword margin-bottom-10">
          {{ 'general.search.results_html' | t: terms: terms }}
        </div>
        <!--START PRODUCT GRID-->
        <div class="products-grid">
          <div class="products products-grid-wrapper">
            <div class="row">
              {% for item in search.results %}
              {% comment %} If we have a product {% endcomment %}
              {% if item.object_type == 'product' %}
              {% assign product = item %}
              <div class="col-md-4 col-sm-4 col-xs-12">
                {% include 'product-grid' %}
              </div>
              {% endif %}
              {% else %}
              <p>{{ 'general.search.no_products' | t }}</p>
              {% endfor %}
0 Likes