Simple JavaScript doesn't work on Product Page

Tourist
17 0 0

Hi,

 

We need a unique product description based on variants. For this we are trying the below javascript code which is added to the top of the product liquid page (with script tags). It simply hides/shows text based on what value is selected in the variant selector. The code works fine standalone but doesnt when put on the product page, even the exact same sample HTML code with the sample selector doesnt work anymore.

 

I would have said it's the script not being properly loaded, but on default (loading the page) the script does hide the text which is reserved for the second option in the selector, so it does load the script. The issue seems to be around the switching, where when selecting option 2 in the dropdown, the text for option 1 doesnt disappear and text for option 2 is shown, even though this works fine standalone.

 

 

HTML ON PRODUCT PAGE

<select class="single-option-selector" data-option="option1" id="ProductSelect-product-template-option-0"> <option value="Pyramid Bags">Pyramid Bags</option> <option value="Loose Tea">Loose Tea</option> </select> <br><br> <div id="PyramidBags" class="group" >blabla</div> <div id="LooseTea" class="group"> no no! </div>
JAVASCRIPT CODE

$(document).ready(function () { $("#LooseTea").hide(); $('#PyramidBags').show(); $('#ProductSelect-product-template-option-0').change(function () { if($("#ProductSelect-product-template-option-0").val()=="Loose Tea") { $("#LooseTea").show(); $("#PyramidBags").hide(); } else { $("#PyramidBags").show(); $("#LooseTea").hide(); } }) });
IN THE HEADER (THEME LIQUID):

<script
  src="https://code.jquery.com/jquery-3.4.1.js"  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="  crossorigin="anonymous">
</script>

 

Could anyone help in resolving this problem?

 

Thank you very much!

 

Best,

David

0 Likes