Filter only available products while using pagination + show total available products in collection

Solved
Highlighted
Tourist
6 2 0

I have a collection with 98 products.  I have my theme set to show 7 rows and 4 items per row on each page so pagination is by 28's.

I want to only show available products on each page and paginate the pages evenly.    I also want to show the total available products at the top of the page.

Right now:

page1 (1-28) shows 18 products.

page2 (29-56) shows 16 products.

page3 (57-84) shows 10 products.

page4 (85-98) shows 3 products.

I tried to follow the recommendation in a similar thread: 

https://community.shopify.com/c/Technical-Q-A/Filter-only-available-products-while-using-pagination/...

by setting {% paginate collection.products | where: "available", true by paginate_by %} instead of {% paginate collection.products by paginate_by %}

but instead of paginating the available products evenly by 28's it paginated all products by 20's and ignored "by paginate_by" completely.

To get the total available products I also tried the recommendation in this thread:

https://community.shopify.com/c/Shopify-Discussion/Count-available-products-in-a-collection-Shopify/...

{% assign availableItems = 0 %}
{% for product in collection.products %}
{% assign itemavail = product %}
  {% if itemavail.available %}
    {% assign availableItems = availableItems | plus: 1 %}
  {% endif %}
{% endfor %}

{{ availableItems }} //Output

but I got 32 as output, expected total = 18 + 16 + 10 + 3 = 47

and I noticed that if I remove the {% if itemavail.available %} condition I get 50

so I cannot get the total available product count in my collection.

I pasted screenshots of each page below.  My collection page is at https://craftshack.com/collections/repeal-day-expo-2020

 

 

 

0 Likes
Highlighted
Tourist
6 2 0

markmirasol_1-1605863760921.png

markmirasol_2-1605863816428.png

markmirasol_3-1605863852461.png

markmirasol_4-1605863886275.png

 

 

0 Likes
Highlighted
Tourist
6 2 0

This is an accepted solution.

Last advise I received from Front End Dev support is:

Hi Mark,

Ashley from Plus Support FED here, hope you're having a nice week!

I understand you're trying to create a collection template where only available products are displayed. This is working to an extent, but the products aren't paginating correctly -- there are gaps in the grid where the unavailable product would be.

This is expected. The collection object contains what it contains, regardless of what the theme chooses to display on the front end. Because Liquid pagination happens server-side, it will always be based on the actual size of the collection, not on a sorted subset created for front end display.

There are a couple of ways you could work around this to have the collection pages look correctly paginated even with availability logic applied:

  1. You could add a condition to the collections in the admin that restricts the collection to products whose inventory is greater than 0. (I see you've done this for some collections already.)
  2. You could have the collection template output as JSON instead of a marked up HTML grid, then use javascript to qualify each product's availability before creating the paginated grid that way.

Please let me know if you have any questions!

Best, 

Ashley V. || Shopify Plus Support FED

0 Likes
Highlighted
Tourist
6 2 0

This is an accepted solution.

So in short you can't fix it on the theme. To proceed we had to recreate the collection and filter it based on tag + inventory > 0.

0 Likes