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

[markmirasol]

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/m-p/955005#M39301

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/td-p/402595

{% 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

[markmirasol]

[markmirasol]

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.)> 1. 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

[markmirasol]

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.

[JochenWezel]

I expect this request is caused by the missing feature of defining complex criteria for collections like “(tag 1 OR tag 2) AND items-on-stock > 0”.

Maybe this is worthy a feature request to Shopify like described in following post: https://community.shopify.com/c/Shopify-Discussions/Collection-Logic/m-p/1297223/highlight/true#M256526

[ESC]

I had a similar problem. The solution I came up with is a little hacky but worked perfectly for my use case. I leveraged the built in “Filters” in te navigation admin panel and appended an URL parm to the end of the links on my header.liquid file that leaded to any collection (this can be repeated in any liquid file that has links to collections):

Step 1:

Activate the Availability filter in the navigation panel

Online Store > Navigation > Collection and search filters

Step 2:

On your header.liquid file look for the menu tags that have an href that look something like this:

(This is for Theme Dawn 2.0)

  {{ childlink.title | escape }}

and if you have nested menus:

  {{ grandchildlink.title | escape }}

Step 3:

Check if the link is type “collection_link” and Add ?filter.v.available=1 param the href value of the links like this:

{%- if childlink.type == 'collection_link' -%}?filter.v.availability=1{%- endif -%}

Result:

  {{ childlink.title | escape }}

  {{ grandchildlink.title | escape }}

Hope this helps!