skip to Main Content

How can I hide a product when it is unavailable? I am really close to figuring this out but my current problem is the pagination. Its saying there are 28 results.. when there should be 24 (4 products are sold out).

Here’s what I have in my collection template..

{% assign number = section.settings.products_per_page %}

{% paginate collection.products by number %}

{% for product in collection.products %}
    {% if product.available %}
      {% include 'product-listing' %}
    {% endif %}
{% endfor %}

{% include 'pagination' %}

{% endpaginate %}

2

Answers


  1. Sadly you can’t modify the pagination in any way. If for example you have a full page with sold out products no products will be shown.

    The only way to modify this is to create a separate “smart collection” that will take products with bigger inventory stock than 0 and loop that one instead of the current one.

    Login or Signup to reply.
  2. Solution 1. Use your own pagination.

    You can use your own pagination. It is really easy. If you have this structure:

    <ul>
      {% for product in collection.products %}
        <li {% if forloop.index > 8 %}style="display: none;"{% endif %}>product</li>
      {% endfor %}
    </ul>
    <a class="showmore">show more</a>
    

    … you can use this jQuery:

    $(".showmore").click(function() {
      for (i = 0; i < 8; i++) { 
        if($(this).prev().find('li:hidden').length==0) $(this).remove();
        $(this).prev().find('li:hidden').first().css('display','block');
      }
    });
    

    Note that in a large store you might want to put the ‘src’ attribute of images in a ‘data-src’ attribute and replace them on toggle/show. This prevents all images being loaded at once in the overview.


    Solution 2. Not hiding, but marking.

    You could also show SOLD OUT next to your product, instead of hiding it. This is the easiest solution by far.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search