隐藏Shopify中无法使用的变体?

时间:2014-10-25 07:04:25

标签: javascript jquery json shopify

现在,在默认的Shopify中,无论您选择什么样式,您仍然可以选择任何尺寸,即使它不适用于该款式。我按照这里的说明进行操作:http://wiki.shopify.com/Linked_Options

除非第二个选项列表中包含重复的项目,否则它的效果很好。知道为什么吗?这是我product-form.liquid上的内容。您可以在我的网站上看到它:http://gravitypicks.myshopify.com/collections/picks/products/axis

{% if product.available %}
  <form action="/cart/add" method="post" class="clearfix product_form shappify_add_to_cart_form" enctype="multipart/form-data" data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" id="product-form-{{ product.id }}">

{% if settings.display_inventory_left %}
  <div class="items_left">
    {% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
      <p><em>{{ product.variants.first.inventory_quantity }} {{ settings.inventory_left_text | escape }}</em></p>
    {% endif %}
  </div>
{% endif %}

{% if product.options.size > 1 %}
  <div class="select">
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
        <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
      {% endfor %}
    </select>
  </div>
{% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
  <div class="select">
    <label>{{ product.options[0] }}:</label>
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
        <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
      {% endfor %}
    </select>
  </div>
{% else %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% endif %}

  <!-- Bold Apps: Product Options -->
  {% include 'shappify-options' %}
  {% if settings.display_product_quantity %}
  <div class="left">
    <label for="quantity">Quantity:</label>
    <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
  </div>
{% 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="{{ settings.add_to_cart_text | escape }}"     class="action_button add_to_cart" />
</div>  
</form>

  {% if product.variants.size > 1 or product.options.size > 1 %}
    <script type="text/javascript">
  // <![CDATA[  
    $(function() {    
      $product = $('#product-' + {{ product.id }});
      new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback{% if product-form == 'product' %}, enableHistoryState: true{% endif %} }); 
      {% if product.available and product.options.size > 1 %}
        Shopify.linkOptionSelectors({{ product | json }});
      {% endif %}
    });
  // ]]>
    </script>
  {% endif %}
 {% endif %}

这是页面上的JS:

    <script>
// (c) Copyright 2014 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options

var Shopify = Shopify || {};

Shopify.optionsMap = {};

Shopify.updateOptionsInSelector = function(selectorIndex) {
switch (selectorIndex) {
case 0:
var key = 'root';
var selector = jQuery('.single-option-selector:eq(0)');
break;
case 1:
var key = jQuery('.single-option-selector:eq(0)').val();
var selector = jQuery('.single-option-selector:eq(1)');
break;
case 2:
var key = jQuery('.single-option-selector:eq(0)').val();
key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
var selector = jQuery('.single-option-selector:eq(2)');
}
var initialValue = selector.val();
selector.empty();
var availableOptions = Shopify.optionsMap[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('.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.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(".single-option-selector:eq(0)").change(function() {
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:eq(1)").change(function() {
if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
};

</script>

1 个答案:

答案 0 :(得分:0)

这里的链接帮助极大。我不得不做一些调整以适应我的用途,但对我来说这是99%。

http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options