How do I tweak this in Shopify to hide variants that aren't available?

Question

Let's say we have shirt products.

Variant is style/size.

Men: L

Men: XXL

Men: XL

Women: Small

Women: XL

Women: L

Right now in default Shopify no matter what you select on style you'll still be able to choose any of those sizes even if it's not available for that style. How do you force this check to happen based on your style selection?

I believe the theme is using a modified version of this technique: http://wiki.shopify.com/Tutorial_on_editing_existing_theme_to_use_products_with_multiple_options#4._Instantiate_Shopify.OptionSelectors_javascript

How do I modify this to hide the options, not just show sold out if it doesn't match?

Real code on theme:

app.js

  selectCallback = function(variant, selector) {
    var $product = $('#product-' + selector.product.id);
    var $notify_form = $('#notify-form-' + selector.product.id);

    if (variant) {
      var $thumbs = $('.flex-control-thumbs img', $product);
      var optionValue = variant.options[$('form.product_form', $product).data('option-index')];
      $.each($thumbs, function(index, value) {
        if($(value).attr('alt') == optionValue && !$(value).hasClass('flex-active')) {
          $(value).click();
          return false;
        }
      });
    }

    if (variant && variant.available == true) {
      if(variant.price < variant.compare_at_price){
        $('.was_price', $product).html(Shopify.formatMoney(variant.compare_at_price, $('form.product_form', $product).data('money-format')))        
      } else {
        $('.was_price', $product).text('')
      } 
      $('.sold_out', $product).text('');
      $('.current_price', $product).html(Shopify.formatMoney(variant.price, $('form.product_form', $product).data('money-format')));
      $('#add-to-cart', $product).removeClass('disabled').removeAttr('disabled').val('Add to Cart');
      $notify_form.hide();
    } else {
      var message = variant ? "{{ settings.sold_out_text }}" : "Out of Stock";    
      $('.was_price', $product).text('')
      $('.current_price', $product).text('')
      $('.sold_out', $product).text(message);
      $('#add-to-cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message); 
      $notify_form.fadeIn();
    }
  };          
});

product-form.liquid:

{% assign option_to_match = settings.option_to_match %}
{% assign option_index = 0 %}
{% for option in product.options %}
  {% if option == option_to_match %}
    {% assign option_index = forloop.index0 %}
  {% endif %}
{% endfor %}

{% if product.available %}
  <form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}" name='id' class='hi'>
          {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and product.variants.size > 1 %}
      <div class="select">
        <label>{{ product.options[0] }}:</label>
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    {% endif %}

    {% if settings.display_product_quantity %}
       <label for="quantity">Quantity:</label>
       <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
    {% endif %}
    <div class="purchase clearfix {% if settings.display_product_quantity %}inline_purchase{% endif %}">
      {% if settings.cart_return == 'back' %}
        <input type="hidden" name="return_to" value="back" />
      {% endif %}
      <input type="submit" name="add" value="Add to Cart" id="add-to-cart" class="action_button" />
    </div>  
  </form>

  {% if product.variants.size > 1 or product.options.size > 1 %}
    <script type="text/javascript">
      // <![CDATA[  
        $(function() {    
          $product = $('#product-' + {{ product.id }});
          if($('.single-option-selector', $product).length == 0) {
            new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });

            {% if product.available %}
              {% assign found_one_in_stock = false %}
              {% for variant in product.variants %}
                {% if variant.available and found_one_in_stock == false %}
                  {% assign found_one_in_stock = true %}
                  {% for option in product.options %}
                    $('.single-option-selector:eq(' + {{ forloop.index0 }} + ')', $product).val({{ variant.options[forloop.index0] | json }}).trigger('change');
                  {% endfor %}
                {% endif %}
              {% endfor %}
            {% endif %}
          }
        });
      // ]]>
    </script>
  {% endif %}
{% endif %}

Steph Sharp Steph Sharp · Accepted Answer · 2013-09-18T04:32:07

See this article on the Shopify wiki: How do I remove sold out variants from my options drop-downs

So, beneath this line in your product-form.liquid file:

new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });

Add this code:

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option:contains({{ variant.title | json }})').remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}

But that only works for 1 option, and you have 2 (style, size). As it says in the article, use the Linked Options solution:

In theme.liquid, before the closing body tag, paste this code: https://gist.github.com/1083007
Add the below code after the call to the Shopify.OptionSelectors constructor. (I added both this snippet below and the one above to handle products with 1 or more options.)

{% if product.options.size > 1 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}

How do I tweak this in Shopify to hide variants that aren't available?

1 Answers