Bigcommerce 根据sku展示不同的图片

Question

我正在尝试为男装女装上衣下装的每个页面显示不同尺寸的图表。我尝试创建单独的模板，但 BC 的工作方式无法根据 GLOBALS 更改产品详细信息页面。

有没有办法使用 JAVA 读取 sku 的前 5 位数字来显示特定图像或 link 在灯箱中打开图像？

Answer 1

您不需要创建单独的产品页面模板来执行此操作。您需要做的就是根据当前 SKU hide/show 它们。

您需要的代码是这样的：

<!-- 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/

Bigcommerce 根据sku展示不同的图片

Bigcommerce Display different images based on sku

java

image

bigcommerce