问题
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 %}
回答1:
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 %}
来源:https://stackoverflow.com/questions/18848520/how-do-i-tweak-this-in-shopify-to-hide-variants-that-arent-available