Link product options (avoid showing unavailable combinations of options) in quick view

product-quick-view.liquid

<!--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 %}
});      

scripts.js

// 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;
  });  
};