Collection Filters - only show if in stock?

Technical Q&A
1

Hi there :slightly_smiling_face:

I’m referring to Shopify’s new Filter options (https://shopify.dev/api/liquid/objects/filter)

I’ve got this working great, using a ‘Size’ variant option to display as filters in a collection.

PD17_0-1652963238678.png
PD17_0-1652963238678.png604×498 42.6 KB

However, I need to display only options that are available; IE: with an inventory level higher than 0

I’ve been looking through the docs and I can’t see any ‘availability’ options for the Filter object (like filter.available or something).

Has anyone achieved this, or can shed any light?

THANKS!

2

Hi @PD17 ,

I tried and this is not possible, you can just add Availability filter to it.

Refer https://shopify.dev/themes/navigation-search/filtering/storefront-filtering

Hope it helps!

3

So this isn’t a “perfect” solution but it does work.

in the collection page loop, just after the filters load. I added this script:

Which does reload the page, but it checks to see if the availability filter is selected. And if it isn’t it simulates the user actually clicking on it.

Then when the user goes to select a size from the size filter, it’s already filtering out, out of stock products. So you only get ones that are instock.

While this works, it is a bit slow. So I’m trying to improve it where it will happen almost immediately after the user lands on the page.

4

Hi, where exactly should this code be entered? It might be perfect for me.
Thank you.

5

Hi! I’ve added this code on our theme, in “facets.js” file overwritting that file and adjust with CSS for hide this filter.

6

Hi, thanks for your reply. Unfortunately my theme doesn’t have the facets.js file :frowning: