Collection Filters - only show if in stock?

[PD17]

Hi there 🙂

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.

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!

[LitExtension]

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!

[amosdigital]

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:

<script>
window.onload = function() {
var checkbox = document.getElementById('filter.v.availability-1-desktop-filter');
if (checkbox && !checkbox.checked) {
checkbox.click(); // Simulate a click to not only check the box but also trigger any attached event handlers
}
};
</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. 

[RetailManagemen]

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