Shopify link-product-options-in-menus Brooklyn Theme

gistfile1.txt

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus
  
// Modified by Jonathan Moore (Style Hatch) https://github.com/jonathanmoore
/* 
	Updated to work with sectioned themes
    	- Added required methods from the deprecated options_selection.js
        - Triggers an initial variant change
        - Hides sold out variants with only one option
*/

/* 
	Modify by VSKRSL https://github.com/voskresla
    	- Changed for Brooklyn Theme. Support radio button 
        - Not tested for 3 Options 
        - Not tested for 1 Option 
	
	
*/
window.addEventListener('DOMContentLoaded', function() {
  
 

  var Shopify = Shopify || {};
    
  // Required functionality from depricated options_selection.js
  Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t) return !0;
    return !1
  }, Shopify.uniq = function(e) {
      for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
      return t
  }

  Shopify.optionsMap = {};

  Shopify.updateOptionsInSelector = function(selectorIndex) {
    
    
    switch (selectorIndex) {
      case 0:
        var key = 'root';
        var selector = jQuery('.single-option-radio:eq(0)');
        break;
      case 1:
        var key = jQuery('input[data-index="option1"]:checked').val();
        console.log(key);
        var selector = jQuery('.single-option-selector__radio:eq(1)');
        break;
      // case 2:
      //   var key = jQuery('.single-option-selector__radio:eq(0)').val();  
      //   key += ' / ' + jQuery('.single-option-selector__radio:eq(1)').val();
      //   var selector = jQuery('.single-option-selector__radio:eq(2)');
    }
    
    
    //selector.empty();    
    var availableOptions = Shopify.optionsMap[key];
    var initialValue = availableOptions[0];
    // for (var i=0; i<availableOptions.length; i++) {
    //    var option = availableOptions[i];
    //    var optionNumber = selectorIndex +1;
    //    //var newOption = jQuery('<input>').val(option).html(option);
    //    selector.append('<input type="radio" value="'+option+'" data-index="option'+optionNumber+'" name="'+optionName+'" class="single-option-selector__radio" id="ProductSelect-option-'+optionName+'-'+option+'">');
    //    selector.append('<label for="ProductSelect-option-'+optionName+'-'+option+'">'+option+'</label>');
    //  }

    var optionNumber = selectorIndex +1;
    jQuery('input[data-index=option'+optionNumber+']').each(function() {
      
      if (jQuery.inArray($(this).val(), availableOptions) !== -1) {
        $(this).removeClass('disableSizeButton').removeAttr('disabled','disabled').find(':radio').removeAttr('checked');
        jQuery('label[for="'+this.id+'"]').removeClass('disableSizeButton');
      }
      else {
        $(this).addClass('disableSizeButton').attr('disabled','disabled');
        jQuery('label[for="'+this.id+'"]').addClass('disableSizeButton');
      }
    });
    if (jQuery.inArray(initialValue, availableOptions) !== -1) {
      jQuery('input[value="'+initialValue+'"]').attr('checked','checked');
    }
    selector.trigger('change');
    
  };

  Shopify.linkOptionSelectors = function(product) {
    
    // Building our mapping object.
    for (var i=0; i<product.variants.length; i++) {
      var variant = product.variants[i];
      if (variant.available) {
        // Gathering values for the 1st drop-down.
        Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
        Shopify.optionsMap['root'].push(variant.option1);
        Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
        // Gathering values for the 2nd drop-down.
        if (product.options.length > 1) {
          var key = variant.option1;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option2);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
        // Gathering values for the 3rd drop-down.
        if (product.options.length === 3) {
          var key = variant.option1 + ' / ' + variant.option2;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option3);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
      }
    }
    // Update options right away.
    Shopify.updateOptionsInSelector(0);
    if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
    //if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    // When there is an update in the first dropdown.
    jQuery("input[data-index='option1']").each(function() {
      $(this).click(function() {
          console.log('click fire')
          Shopify.updateOptionsInSelector(1);
          //  if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
          return true;
      });
    })
     
    // When there is an update in the second dropdown.
    // jQuery(".single-option-selector__radio:eq(1)").change(function() {
    //    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    //    return true;
    //  });  
  }; 

  {% if product.available and product.options.size > 1 %}
    var $addToCartForm = $('form[class="product-single__form"]'); // change from original fork because there is selector + hash in PREVIEW MODE
    console.log('addToCartForm: '+$addToCartForm[0]);
    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() {      
        Shopify.linkOptionSelectors({{ product | json }});
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    }
  {% endif %}
    
  var selector = jQuery('.single-option-selector__radio:eq(0)');
  selector.trigger('change'); 

  {% if product.options.size == 1 %}
    {% for variant in product.variants %}
      {% unless variant.available %}
      console.log('fire one');
        jQuery('.single-option-selector__radio option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
      {% endunless %}
    {% endfor %}
    jQuery('.single-option-selector__radio').trigger('change');
  {% endif %}
});
</script>

@voskresla Привет, не можешь пожалуйста чуть помочь с темой бруклин и этим кодом? Код написан для drop-down типа, а если тип кнопки "button"?

Thanks very much for this. It worked perfectly for Brooklyn version 17.0.1