Custom Work / image change on swatch or radio button click - for free themes like Dwan, Crave, Taste, Studio, Spotlight..

Modified on Fri, 23 Feb, 2024 at 4:50 AM

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 }}