Bigcommerce根據sku顯示不同的圖像

我試圖爲每個輸出頁面顯示不同的尺寸圖表，男裝女裝上衣底部。我試圖創建單獨的模板，但BC工作的產品詳細信息頁面的方式無法真正根據GLOBALS進行更改。Bigcommerce根據sku顯示不同的圖像

有沒有辦法使用JAVA來讀取sku的前5位數字以顯示某個圖像或鏈接以在Lightbox中打開圖像？

2016-07-15 Neal Munroe

您不應該創建單獨的產品頁面模板來執行此操作。您只需根據當前SKU隱藏/顯示它們即可。

你需要的代碼是這樣的：

<!-- Current Bigcommerce Theme Code at Panels/ProductAddToCart.html --> 
<div class="DetailRow ProductSKU" style="display: %%GLOBAL_HideSKU%%"> 
    <div class="Label">%%LNG_SKU%%:</div> 
    <div class="Value"> 
     <span class="VariationProductSKU"> 
     %%GLOBAL_SKU%% 
     </span> 
    </div> 
</div> 

<!-- Place this code where you want the size chart to appear --> 
<div id="SizeChart"></div> 
<script type="text/javascript"> 
var sizeChartImages = { 
    'SKU-1' : 'http://placehold.it/400x200/000?text=Size+Chart+1', 
    'SKU-2' : 'http://placehold.it/400x200/000?text=Size+Chart+2', 
    'SKU-3' : 'http://placehold.it/400x200/000?text=Size+Chart+3', 
    'SKU-4' : 'http://placehold.it/400x200/000?text=Size+Chart+4', 
    'SKU-5' : 'http://placehold.it/400x200/000?text=Size+Chart+5' 
} 

var currentSKU = $('.ProductSKU .VariationProductSKU').text(); 
$.each(sizeChartImages, function(sku, url) { 
    if(currentSKU.includes(sku)) { 
    $('#SizeChart').append('<img src="' + url + '"/>') 
    } 
}); 
</script>

你可以在這裏嘗試一下：https://jsfiddle.net/rshwwxyc/

來源

2016-07-16 16:47:05 enjoyjeremy

謝謝你這麼多傑里米！我現在試圖自學JS，我試圖弄清楚我是否可以使用startswith（）來讀取前5位數字以顯示合適的尺寸圖。這雖然有很多幫助！ –

你不應該需要一個不同的函數來讀取前5位數，因爲我已經使用了javascript函數「includes（）」來測試一個字符串是否包含另一個字符串。只需打開我提供的jsfiddle鏈接，以使用您的實際SKU而不是我使用的示例來測試代碼。 [鏈接]（http://www.w3schools.com/jsref/jsref_includes.asp） – enjoyjeremy

如果你確實需要測試前5位數字，startswith（）應該可以正常工作。只需將第五行從底部更改爲'if（sku.startsWith（currentSKU）{' – enjoyjeremy

Bigcommerce根據sku顯示不同的圖像

回答

相關問題