Shopify：所選商品缺貨

Question

當我商品頁面顯示商品分類（顏色爲& size）時，我需要添加缺貨產品。

我發現這段代碼，做這一點，但它僅着眼於默認的產品變型時，首先查看該產品的網頁和信息是靜態的：

{% 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