How can I automatically hide out of stock product variants?

[Nina8385]

Hey there,

we have a lot of variant products in our store. We would like to hide them after they sold out. 

Currently it is only possible to hide them, if the costumer selects the filter "auf Lager" (in stock). 

Is there a way to ensure that the filter in stock is always selected? 

 

Would be really nice, if anyone can help us with that.

Kind regards

Nina

[magenest]

Hi @Nina8385,
Can you share with us your store URL and password (if any) so our team can check on that? We would love to provide you with a solution for your issues.

[Nina8385]

Hey @magenest, thank you so much for your respond! Of course, it is www.forschur.com 

[khalid_gh]

Hi @Nina8385 

The app has the feature to hide out of stock variants when applying the filters without having a seperate filter for avaliability.

[Nina8385]

Hey @khalid_gh,

thank you for your response. I just did that and removed the filter. Unfortunately the out of stock products are still visible.  

[Nancy_Drake]

Hi @Nina8385 

I think the AI Search & Product Filter  is able to show only available items in the filters. The "hide unavailable items when filter is selected" feature ensures that only available filter options are displayed. This eliminates the need for users to manually select the 'In stock' filter, streamlining the process and enhancing the UI/UX experience by simplifying user interactions.

You could try it on an published theme without impacting other themes in your store. I hope it could help.

[aljassim]

Hey,

I found a workaround that worked perfectly for me, and I hope it does the same for you.

Basically, I'm updating the filter parameter to always include the availability filter (note: I'm using Dawn Theme ).

1. Go to facets.js.
2. Look for the function updateURLHash(searchParams).
3. Replace it with the following:

static updateURLHash(searchParams) {

if(searchParams.includes('&filter.v.availability=1') == false ){

history.pushState({ searchParams }, '', `${window.location.pathname}${searchParams && '?'.concat(searchParams) .concat('&filter.v.availability=1') }`);

}else{

history.pushState({ searchParams }, '', `${window.location.pathname}${searchParams && '?'.concat(searchParams) }`);

}

}

• Also, look for the function renderPage(searchParams, event, updateURLHash = true).
• Add the following code at the beginning:

if(searchParams.includes('&filter.v.availability=1') == false ){

searchParams = searchParams.concat('&filter.v.availability=1');

}

[Shadab_dev]

Great logic pal. It does work. For people coming from now on this issue updateURLHash is changed to updateURL and this renderPage(searchParams, event, updateURLHash = true) changed to  async applyFilters(searchParams, evt, updateUrl = true).

Again, thanks pal.