Question

我正在尝试为每个页面显示不同尺寸的图表。我试图创建单独的模板，但BC的工作方式productdetails页面无法真正根据GLOBALS进行更改。

有没有办法使用JAVA读取sku的前5位数字来显示某个图像或链接以在灯箱中打开图像？

Answer 1

您不需要创建单独的产品页面模板来执行此操作。您需要做的就是根据当前的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/

Bigcommerce显示基于sku的不同图像

1 个答案: