Pick-An-Option not working with Bold Options

Highlighted
New Member
3 0 0

We were having issues with customers not choosing there product options and then we would have to pay for returns and exchanges. To combat this I found this tutorial, Tutorial Link , which shows you how to add a script to disable the add to cart button until options are chosen. The problem is on some of our products we require the customer to check a checkbox that says we will add an oversized shipping charge. On products with this checkbox when a customer hooses their options the add-to-cart button remains disabled. For now I just added an if statement to the pick-an-option script that checks if this checkbox is on the page and doesn't run the script if it is. I need to edit the script so that it will work properly on products with this extra checkbox.

Here is a product without the checkbox: Without Checkbox (Works as should) 

 

and here is a product with the checkbox: With Checkbox 

 

Here is my current code for the "pick an option" script:

{% comment %}
  See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}

{% unless product.selected_variant %}
  {% if product.variants.size > 1 %}
    <script>
      
      if ($(".bold_option_product_title")[0]){
    
      } else {
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() {      
        {% for option in product.options %}
          $('.single-option-selector:eq({{ forloop.index0 }})')
            .filter(function() { 
              return $(this).find('option').size() > 1  
            })
            .prepend('<option value="">Choose ' + {{ product.options[forloop.index0] | json }} + '</option>')
            .val('')
            .trigger('change');
        {% endfor %}
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    } 
      }
    </script>  
  {% endif %}
{% endunless %}

Thank you!

0 Likes