Pick-An-Option not working with Bold Options

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 %}
      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') {
      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>')
        {% endfor %}
      observer.observe($addToCartForm[0], config);
  {% endif %}
{% endunless %}

Thank you!