Displaying product description based on variant selected. Code working in console but not on page.

Highlighted
New Member
1 0 0

Hello! I am trying to make my page display a different product description based on the variant that is selected. I am using an app called "Tabs by Station" which neatly displays different product descriptions in different tabs on the product page. I am trying to connect these tabs to my product variants so that the tabs update according to the product variant that is selected, but can't seem to make it work. I have a bit of code that is working in the console but not on the page for some reason.

So far I have tried:

<script>

$('#SingleOptionSelector-0').change(function () { var childIndex = 0; var selectedVal = $(this).val(); $.each($('#SingleOptionSelector-0 option'), function (i, o) { if ($(o).val() === selectedVal) { childIndex = i; } }); var selectedLink = '#st-link-' + $(this).val().toLowerCase().replace(/ /g, "-") + '_0-' + childIndex; var selectedTab = '#st-' + $(this).val().toLowerCase().replace(/ /g, "-") + '_0-' + childIndex; $('.station-tabs-content').removeClass('is-active'); $('.station-tabs-link').removeClass('is-active'); $(selectedLink).addClass('is-active'); $(selectedTab).addClass('is-active'); childIndex = 0; });

</script>

This code works in the console, but not when I paste the code in the product-template.liquid file. Can anyone help me with this?  

Thanks

 

Best regards,

Jim

0 Likes