Link product options (avoid showing unavailable combinations of options) in quick view
// Put this code in the bottom
var Shopify = Shopify || {};
Shopify.optionsMapQV = Shopify.optionsMapQV || {};
// 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.updateOptionsInSelectorQV = function(selectorIndex,qvpId,productId) {
switch (selectorIndex) {
case 0:
var key = 'root';
var selector = jQuery('#'+qvpId+' .single-option-selector:eq(0)');
break;
case 1:
var key = jQuery('#'+qvpId+' .single-option-selector:eq(0)').val();
var selector = jQuery('#'+qvpId+' .single-option-selector:eq(1)');
break;
case 2:
var key = jQuery('#'+qvpId+' .single-option-selector:eq(0)').val();
key += ' / ' + jQuery('#'+qvpId+' .single-option-selector:eq(1)').val();
var selector = jQuery('#'+qvpId+' .single-option-selector:eq(2)');
}
var initialValue = selector.val();
selector.empty();
var availableOptions = Shopify.optionsMapQV[productId][key];
for (var i=0; i<availableOptions.length; i++) {
var option = availableOptions[i];
var newOption = jQuery('<option></option>').val(option).html(option);
selector.append(newOption);
}
jQuery('#'+qvpId+' .swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
$(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
}
else {
$(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
}
});
if (jQuery.inArray(initialValue, availableOptions) !== -1) {
selector.val(initialValue);
}
selector.trigger('change');
};
Shopify.linkOptionSelectorsQV = function(qvpId, 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.optionsMapQV[product.id]['root'] = Shopify.optionsMapQV[product.id]['root'] || [];
Shopify.optionsMapQV[product.id]['root'].push(variant.option1);
Shopify.optionsMapQV[product.id]['root'] = Shopify.uniq(Shopify.optionsMapQV[product.id]['root']);
// Gathering values for the 2nd drop-down.
if (product.options.length > 1) {
var key = variant.option1;
Shopify.optionsMapQV[product.id][key] = Shopify.optionsMapQV[product.id][key] || [];
Shopify.optionsMapQV[product.id][key].push(variant.option2);
Shopify.optionsMapQV[product.id][key] = Shopify.uniq(Shopify.optionsMapQV[product.id][key]);
}
// Gathering values for the 3rd drop-down.
if (product.options.length === 3) {
var key = variant.option1 + ' / ' + variant.option2;
Shopify.optionsMapQV[product.id][key] = Shopify.optionsMapQV[product.id][key] || [];
Shopify.optionsMapQV[product.id][key].push(variant.option3);
Shopify.optionsMapQV[product.id][key] = Shopify.uniq(Shopify.optionsMapQV[product.id][key]);
}
}
}
// Update options right away.
Shopify.updateOptionsInSelectorQV(0,qvpId,product.id);
if (product.options.length > 1) Shopify.updateOptionsInSelectorQV(1,qvpId,product.id);
if (product.options.length === 3) Shopify.updateOptionsInSelectorQV(2,qvpId,product.id);
// When there is an update in the first dropdown.
jQuery("#"+qvpId+" .single-option-selector:eq(0)").change(function() {
Shopify.updateOptionsInSelectorQV(1,qvpId,product.id);
if (product.options.length === 3) Shopify.updateOptionsInSelectorQV(2,qvpId,product.id);
return true;
});
// When there is an update in the second dropdown.
jQuery("#"+qvpId+" .single-option-selector:eq(1)").change(function() {
if (product.options.length === 3) Shopify.updateOptionsInSelectorQV(2,qvpId,product.id);
return true;
});
};
<!--Put this code in the bottom before close "<script>" tag-->
$(document).ready(function() {
Shopify.optionsMapQV[{{ qvp.id }}] = {};
{% if qvp.available and qvp.options.size > 1 %}
Shopify.linkOptionSelectorsQV("{{scope}}",{{ qvp | json }});
{% endif %}
var selector = jQuery('#{{scope}} .single-option-selector:eq(0)');
selector.trigger('change');
{% if qvp.options.size == 1 %}
{% for variant in qvp.variants %}
{% unless variant.available %}
jQuery('#{{scope}} .single-option-selector option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
{% endunless %}
{% endfor %}
jQuery('#{{scope}} .single-option-selector').trigger('change');
{% endif %}
});