Shoper商品列表变体展示异常求助：点击无预览且变体重复

问题诊断 #

1. 所有商品显示相同变体：代码未绑定当前商品的选项集合，直接使用全局$option变量，导致所有商品复用同一组变体数据；且未确保代码处于单个商品的循环上下文内。
2. 点击变体无法切换主图：未给变体元素绑定点击事件，也未关联当前商品的主图元素，缺少图片替换的触发逻辑。
3. 前5个变体显示逻辑错误：index gt 5会显示前6个变体（Smarty循环索引从0开始），不符合仅显示前5个的需求。

修复方案 #

1. 修正模板代码（tableofproducts.tpl） #

确保代码处于单个商品的循环内部，遍历当前商品的选项，调整变体数量控制逻辑，并添加主图关联标识：

{* 这段代码必须放在{foreach from=$products item=product}...{/foreach}循环内部 *}
<div class="product-item">
  {* 商品主图，添加class用于后续定位 *}
  <img class="product-main-image" src="{$product.main_image|escape}" alt="{$product.name|escape}">

  {* 遍历当前商品的选项集合，绑定商品上下文 *}
  {foreach from=$product.options item=option}
  <div class="option_{$option.type|escape}{if 1 == $option.stock} option_truestock{/if}{if 1 == $option.required} option_required{/if}">
    <div class="variant-images">
      {foreach from=$option.values item=value name=variant_loop}
        {* 修正判断：索引>=5时停止循环，仅显示前5个变体（索引0-4） *}
        {if $smarty.foreach.variant_loop.index >= 5}
          {break}
        {/if}
        {* 添加data-image存储变体大图路径，用于主图切换 *}
        <a class="option-image" title="{$value.name|escape}" 
           data-value="{$value.id|escape}" 
           data-image="{$value.image_path|escape}"
           style="background-color:{$value.color|escape};">
          <img src="{$value.image_path|escape}" width="7" height="7" alt="{$value.name|escape}"/>
        </a>
      {/foreach}
      {* 变体数量超过5时，显示跳转商品页的按钮 *}
      {if $option.values|count > 5}
        <a href="{$product.url|escape}" class="view-more-variants">查看更多</a>
      {/if}
    </div>
    <select id="option_{$option.id|escape}" name="option_{$option.id|escape}" style="display:none;">
      <option value="" title="">{translate key='choose'}</option>
      {foreach from=$option.values item=value}
        <option value="{$value.id|escape}" title="{$value.color|escape}" 
                {if 1 == $option.stock}{productOptionValueStocksUnavailable product=$product->getIdentifier() optionValue=$value.id}data-unavailable{/productOptionValueStocksUnavailable}{/if}>
          {$value.name|escape}
        </option>
      {/foreach}
    </select>
  </div>
  {/foreach}
</div>

2. 添加JavaScript主图切换逻辑 #

在模板底部或全局JS文件中添加以下代码，实现点击变体切换当前商品主图：

document.addEventListener('DOMContentLoaded', function() {
  // 给所有变体图片绑定点击事件
  document.querySelectorAll('.option-image').forEach(function(btn) {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      // 获取当前变体的大图路径
      const variantImage = this.getAttribute('data-image');
      // 定位当前商品容器内的主图元素
      const mainImage = this.closest('.product-item').querySelector('.product-main-image');
      // 替换主图src
      if (mainImage && variantImage) {
        mainImage.setAttribute('src', variantImage);
      }
    });
  });
});

关键修复点说明 #

• 变体上下文绑定：通过$product.options遍历当前商品的选项，确保每个商品加载专属变体数据，解决所有商品显示相同变体的问题。
• 前5个变体控制：将index gt 5改为index >=5，利用Smarty循环索引从0开始的特性，精准控制仅显示前5个变体。
• 主图切换逻辑：通过closest('.product-item')定位当前商品容器，避免全局元素冲突；使用data-image存储变体大图路径，点击时直接替换主图的src属性。

内容的提问来源于stack exchange，提问作者k0rdian