Remove price from select dropdown

Modified on Fri, 23 Feb at 5:06 AM

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. sc-includes.liquid SCREENSHOT

{{ 'bold-custom.js' | asset_url | script_tag }}

bold-custom.js

 function applyScript() {
  // Get all dropdowns with the specified class
  var dropdowns = document.querySelectorAll('.bold_option_element select');
  // Loop through each dropdown
  dropdowns.forEach(function(dropdown) {
  // Loop through each option
    dropdown.querySelectorAll('option').forEach(function(option) {
        // Remove the price information from the option text
      option.textContent = option.textContent.replace(/\s*\(\+\s*\$\s*\d+\.\d+\s*\)/, '');
    });
  });
}


function observeDOM() {
  var observer = new MutationObserver(function(mutationsList) {
    for (var mutation of mutationsList) {
      if (mutation.type === 'childList' && mutation.target.classList.contains('bold_options_loaded')) {
        applyScript();
        observer.disconnect();
        break;
      }
    }
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

document.addEventListener('DOMContentLoaded', function() {
  observeDOM();
});