Hide out of stock sizes from "Search & Discovery" filtering

Shopify Apps
1

Hi Everbody!

I need help with hiding out-of-stock sizes (size variant) from the filtering in the “Search & Discovery” Shopify APP.

I’m now using 6 filters: Availability, Product type, Brand, Price, Size and color.

If I enable “In stock” products from the “availability” filter, then “Size” automatically shows out-of-stock sizes in grey. I would like out-of-stock sizes straightly not to appear on the size filter.

¿Any clue?

Thanks in advance! ^^

ELIMINAR DE FILTRO TALLAS.jpg
ELIMINAR DE FILTRO TALLAS.jpg1563×735 58 KB

2

Did you ever figure this out? I am trying to do the same. Its seems to go against common sense logic to include products that are out of stock.

3

I did! For version 7 of DAWN working stable. ¿Still need help with it?

4

@Iceman3

Hey,

I would appreciate if you share your solution here, as I am also looking to hide the Out of Stock options all around for the filters - There is no need for this option to be available

Thank you

5

Hi @Makeitperfect ! Sorry for late reply. I did it.

Modify this code on MAIN-PRODUCT.liquid:

MODIFICATIONS MADE TO MAIN-PRODUCT.LIQ TO REMOVE NON-STOCK "SIZE" VARIANTS FROM THE SELECTOR

VARIANT RADIOS (REPLACED ENTIRELY BY THE FOLLOWING CODE)

VARIANT CLASS (REPLACED IN ITS ENTIRETY BY THE FOLLOWING CODE) 

ADDED AFTER THE CODE //"TYPE": VARIANT_PICKER// THE FOLLOWING CODE:
{
"type": "checkbox",
"id": "hide_unavailable_variants",
"default": false,
"label": "Hide Unavailable Variants"
}

Hope it helps! If it does, please accept as a solution.

Regards!

6

Hi,

Thank you for your reply!

I’ve generated a javascript code with chatgpt that is tackling the issue for me right now. So far it works great :]

Wont have the time to test your code for now unless this js stops doing its work :D. however if someone does use it please let us know guys and mark it as a solution. Also just updated to v14 and went through tone of code switching and honestly no code for me for the next few weeks lol.

7

Hi Makeitperfect,

I’m also struggling with this issue, would you be kind enough to share your javascript solution for this by any chance?

thank you :slightly_smiling_face:

8

Hi there,

Here is the code my friend

//

document.addEventListener(‘DOMContentLoaded’, function() {
const hideOutofStock = () => {
document.querySelectorAll(‘.mobile-facets__list .mobile-facets__item .facet-checkbox__text’)
.forEach(el => {
if (el.textContent.includes(‘Out of stock’)) {
el.closest(‘.mobile-facets__item’).style.display = ‘none’;
}
});
};

const setupObserver = () => {
const targetNode = document.querySelector(‘.mobile-facets__wrapper’); // Ensure this targets the correct element
if (targetNode) {
new MutationObserver(() => hideOutofStock())
.observe(targetNode, { childList: true, subtree: true });
}
};

hideOutofStock();
setupObserver();
});

You may need to tweak the classes/selectors but just give it a go.

This for me hides the out of stock products from the filters and pretty much anywhere else I think.

I havent seen them show since.

Hope it helps

9

Thank you. This gives me a great starting point.

10

//

// Get all elements with the class ‘facet-checkbox__text’
var facetTextElements = document.querySelectorAll(‘.facet-checkbox__text’);

// Loop through each element
facetTextElements.forEach(function(element) {
// Check if the element’s text content contains ‘Out of stock’
if (element.textContent.trim().includes(‘Out of stock’)) {
// Hide the parent element of the element with the class ‘mobile-facets__label’
element.closest(‘.mobile-facets__label’).style.display = ‘none’;
}
});

//

document.addEventListener(‘DOMContentLoaded’, function() {
const hideOutofStock = () => {
document.querySelectorAll(‘.mobile-facets__list .mobile-facets__item .facet-checkbox__text’)
.forEach(el => {
if (el.textContent.includes(‘Out of stock’)) {
el.closest(‘.mobile-facets__item’).style.display = ‘none’;
}
});
};

const setupObserver = () => {
const targetNode = document.querySelector(‘.mobile-facets__wrapper’); // Ensure this targets the correct element
if (targetNode) {
new MutationObserver(() => hideOutofStock())
.observe(targetNode, { childList: true, subtree: true });
}
};

hideOutofStock();
setupObserver();
});

There was more to the code, I missed the 1st part. So try to work with this one instead.

Cheers