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脚本，但我只是对此我很陌生。

我找到了一个示例网站，它正是我正在寻找的： http://www.missesdressy.com/dresses/designers/blush-by-alexia/9388_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

请参阅this tutorial（第5部分。插入selectCallback）。它说下面的代码放在product.liquid中。本教程的demo site显示了如果变体不存在，此代码如何将价格字段更改为“已售完”或“不可用”。

<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将为false，因此请将其从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

Shopify：当所选变体缺货时显示消息

1 个答案: