1. Please create the following JavaScript file named "bold-custom.js" and include it in the "sc-include.liquid" file. You can refer to the screenshot below for guidance.
<!-- Using Jquery --> <script> $('.bold_option.bold_option_radio .bold_option_value_element input, .bold_option.bold_option_swatch .bold_option_value_element input ').each(function(){ $(this).on('change', function(){ var boldValue = $(this).val().toLowerCase(); $('.thumbnail-slider .thumbnail img').each(function() { var ImgValue = $(this).attr('alt').toLowerCase(); if(boldValue == ImgValue) { $(this).parent().click(); } }); }) }) </script> <!-- OR Using Javascript --> function applyScript(event) { var thumbnailImages = document.querySelectorAll('.thumbnail-slider .thumbnail-list img'); //Check the class and update accordingly var boldValue = event.target.value.toLowerCase(); thumbnailImages.forEach(function(image) { var imgValue = image.getAttribute('alt').toLowerCase(); console.log("imgValue",imgValue , "boldValue", boldValue) if (boldValue === imgValue) { image.parentElement.click(); } }); } function observeDOM() { var observer = new MutationObserver(function(mutationsList) { for (var mutation of mutationsList) { if (mutation.type === 'childList' && mutation.target.classList.contains('bold_options_loaded')) { var radioInputs = document.querySelectorAll('.bold_option.bold_option_radio .bold_option_value_element input'); var swatchInputs = document.querySelectorAll('.bold_option.bold_option_swatch .bold_option_value_element input'); radioInputs.forEach(function(input) { input.addEventListener('change', applyScript); }); swatchInputs.forEach(function(input) { input.addEventListener('change', applyScript); }); observer.disconnect(); break; } } }); observer.observe(document.body, { childList: true, subtree: true }); } document.addEventListener('DOMContentLoaded', function() { observeDOM(); });
Note: The thumbnail class need to be added properly base on particular theme
.thumbnail-slider .thumbnail-list img
2. sc-includes.liquid SCREENSHOT
{{ 'bold-custom.js' | asset_url | script_tag }}
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article