Shopify:当选定的变体缺货时显示消息

Question

当产品变体(颜色和大小)在我的产品页面上被选中时，我需要添加一条缺货消息。

我已经找到了这段代码，但是它只在第一次查看产品的页面时查看默认的产品变体，并且消息是静态的：

{% assign variant = product.variants.first %}
{% if variant.inventory_quantity <= 0 and variant.available and variant.inventory_management != '' %}
<p style="color:#ff0000" class="notice">This item is currently out of stock. I will take up to 3 weeks to ship.</p> 
{% endif %}

我需要做的是让消息按照选择的变体来执行。

我知道可能涉及到一些java脚本，但我对此相当陌生。

我找到了一个有我想要的例子网站：1?track=39549527.r.1

当客户选择他们的大小和颜色变体时，它会显示一条消息，如果该商品已经准备好发运或需要一个特殊的订单，同时也显示了可用的/特殊的订单/在变体的下拉选择器上已售罄的措辞。

不过，我可能只是对这条消息的出现感到满意。

这就是我在主题中从product_form.liquid中找到的javascript，它控制了变体选择器。目前还不确定如何修改它。

<script type="text/javascript">
  // <![CDATA[  
    $(function() {    
      $product = $('#product-' + {{ product.id }});
      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>

这是我的app.js.liquid，也许也是脚本的一部分？

    }

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('')
  } 
  $('.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(message);
  $('#add-to-cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message); 
  $notify_form.fadeIn();
}  };     

Answer 1

参见本教程 (第5节，插入selectCallback)。它说要将下面的代码放在product.liquid中。本教程的演示站点展示了如果变体不存在，此代码如何将价格字段更改为“销售一空”或“不可用”。

<script type="text/javascript">

  // <![CDATA[  
var selectCallback = function(variant, selector) {
  if (variant && variant.available == true) {
    // selected a valid variant
    jQuery('.purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
    jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));  // update price field
  } else {
    // variant doesn't exist
    jQuery('.purchase').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button
    var message = variant ? "Sold Out" : "Unavailable";    
    jQuery('.price-field').text(message); // update price-field message
  }
};

// initialize multi selector for product
jQuery(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
  jQuery('.selector-wrapper').addClass('clearfix');
  {% if product.options.size == 1 %}
  jQuery('.selector-wrapper').prepend("<label for='product-select-option-0'>{{ product.options.first }}</label>");
  {% endif %}
});
// ]]>
</script>

编辑：

我不知道如何使用它来显示我想要的基于不同数量的消息。

我在你的问题中用if语句修改了上面的代码(见下文)。这应该非常接近你想要的。请注意，如果产品销售一空，variant.available将是错误的，所以不要使用if语句。

var selectCallback = function(variant, selector) {
  if (variant && variant.inventory_management != '' && variant.inventory_quantity <= 0) 
  {
    jQuery('.price-field').html('<p style="color:#ff0000" class="notice">This item is currently out of stock. I will take up to 3 weeks to ship.</p>');  // update price field
  }
};

此外，我认为这不允许客户订购变体，如果它是缺货。我想让客户订购变体，即使它是缺货时，我设置这个选项。

如果您希望允许客户购买产品，即使该产品缺货，只需删除禁用“购买”按钮的行：

jQuery('.purchase').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button