Debut: Hide unavailable items not working properly

[Bas79]

Hi all,

I have just started to work with Shopify for my store, and are therefore new to this community.

I hope I came to the right place to find a solution for my problem.

I was wondering (and hoping) someone could help me with the following issue:

I've implemented some code to hide unavailable variants rather then showing them "sold out". 

The code that I have used can be found here: Hide sold-out variants (shopify.dev) and i followed instructions to the letter.

Normally it should instantly hide all product variants with a stocklevel of zero. But in this case, when someone enters a productpage and clicks the box to show the available sizes, all sizes are shown, including the sizes that are not in stock. Only when they select a size that is not in stock, the script starts running. They get the message that the selected item is "sold out" and when they click the size box again, only then just available sizes are displayed.


I think i have read all available topics and when i enter "hide unavailable variants" in google, it actually says: "don't bother, you've tried this 4356 times before...." 

Does anyone have a solution to this issue?

Thanks in advance for any help!

[diego_ezfy]

Hello,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

Kind regards,
Diego

[Bas79]

Hi Diego,

Thanks for your quick reply. please find requested info below:

store URL:

Kinderkleding Partytime – Partytime webshop (myshopify.com)

I have this issue with every single product, but here's an example:

Spijkershort light blue 45C-34087 – Partytime webshop (myshopify.com)

password: yealya

Thanks for trying to help!

[diego_ezfy]

@Bas79 

The issue was that the dropdown was showing sold out variants, correct? If so, this will fix it.

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
document.addEventListener("DOMContentLoaded", function() {


    function _isProductPage() {
        return /product/.test(window.location.href);
    }

function triggerChanges(){
if (!_isProductPage){
return;
}
var $selects = document.querySelectorAll(`.single-option-selector`);

for (var each of $selects){



each.value = each.querySelector(`[selected]`).value


var event = new Event('change');
each.dispatchEvent(event);
}


}

try{
setTimeout(triggerChanges, 100)
} catch(err){}

});
</script>

Please let me know whether it works.

Kind regards,
Diego

[Bas79]

Hi Diego,

Thank you for your quick reply and (possible) solution.

Shopify Helpdesk picked also up on this problem and they have modified something in my theme's code, making it to work.

So i did not need to test your code. 

But thanks again for trying to help, this community works great!

Best regards, Bas