Out of stock products breaking JS

[hughconway]

Hi everyone.

I have some Liquid/JS on my site to show a list of products that appear in a bundle and change the list of a different variant is selected. It is working fine unless a product is out of stock due to one or more of the bundled products being out of stock.

You can see a working example here: https://www.sconch.com/products/test-bundle 

And a broken example here: https://www.sconch.com/products/west-yorkshire-spinners-colourlab-dk-chiming-bells-blanket-yarn-pack 

The JS to make this work is:

<script>
  if (document.querySelector('select.form-options.no-js-required')){
    const bundles = document.querySelectorAll('div#bundles_child_products>span');
    document.querySelector('select.form-options.no-js-required').addEventListener('change', function(){
      [].forEach.call(bundles, bundle=>{
        if (bundle.id.includes(this.options[this.selectedIndex].value)){
          bundle.removeAttribute('style');
        } else {
          bundle.style.display = 'none';
        }
      });
    });
    document.querySelector('select.form-options.no-js-required').dispatchEvent(new Event('change',{bubbles:true}));
  }
</script>

 Can anyone tell me why this code stops working if the product is out of stock?

[namphan]

Hi @hughconway,

This will need many debugging steps, can I send you a collaborator invite? it will help me check things more clearly

[hughconway]

Hello,

Thanks for offering to help. Where do you want me to send a collaborator request to?

Thanks,

Hugh

[namphan]

Hi @hughconway,

Please send me the collaborator code in private message, I will send you the invitation and check it

[hughconway]

Thanks. I can't see any way to send a PM on here.

[namphan]

Hi @hughconway,

You can send it at Messages icon or send it via email at my signature, I will check it

[namphan · Accepted solution]

Hi @hughconway,

Please go to product-options.liquid file and add code here: