如何爲shopify主題創建「更智能」的色板

我正在通過本教程向我的shopify網站添加色板，我認爲它們非常棒，但我希望讓它們變得更「智能」。如何爲shopify主題創建「更智能」的色板

http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products#Demo

如果我有4個變種帽子 - SM /紅，MD /紅，SM /藍，MD /藍 - 4個按鈕顯示在產品頁面。 2在上面，1表示「sm」，1表示「md」在這兩個按鈕的下方有2個顏色按鈕，1個是紅色的，1個是藍色的。

可以說我擁有除sm /紅以外的所有東西。客戶點擊按鈕「sm」，然後看到它下面有兩個顏色選項。不幸的是，他們點擊紅色，並發現它通過「添加到購物車」按鈕更改爲「售罄」售罄。

如果用戶點擊「sm」按鈕，紅色色塊變灰或變爲X，以便用戶立即收到有關可用性的反饋，我可以選擇PREFER。

要做到這一點有多難？

來源

2013-10-07 livinzlife

這並不難。如果您已經按照您在問題中提到的Shopify tutorial實施了顏色色板，那麼您只需在selectCallback函數中添加一些額外的代碼即可。

添加到product.liquid：

... 

var selectCallback = function(variant, selector) { 

    ... 

    var selectedSize = jQuery('.size.options li.selected span').text(); 

    if (selectedSize.length > 0) { 
    var variants = selector.product.variants; 
    var variantTitles = []; 
    var i; 

    for (i = 0; i < variants.length; i++) { 
     variantTitles.push(variants[i].title); 
    } 

    jQuery('.color.options li').each(function() { 
     var variantTitle = selectedSize + "/" + jQuery('div', this).text(); 

     // if variantTitle is a valid variant & not sold out, remove unavailable class 
     var variantIndex = jQuery.inArray(variantTitle, variantTitles); 
     if (variantIndex != -1 && variants[variantIndex].available == true) { 
     jQuery('span', this).removeClass('unavailable'); 
     } 
     // if not a valid variant or sold out, add unavailable class 
     else { 
     jQuery('span', this).addClass('unavailable'); 
     } 
    }); 
    } 
}; 

...

添加到swatches.liquid（在<style>標籤內）：

.unavailable { opacity: 0.2; }

然後，如果你有2種尺寸（SM，MD ）和2種顏色（紅色，藍色）和「SM /紅色」已售罄，您會得到：

Small/Red sold out

我也把這段代碼放在gist。

來源

2013-10-13 05:36:30

如何爲shopify主題創建「更智能」的色板

回答

相關問題