Prestashop 1.7商品页组合列表新增展示额外数据实现咨询

第一步：注入组合全局数据到前端 #

首先修改主题下的themes/warehouse/templates/catalog/product.tpl文件，在变体模块渲染前添加代码，把所有组合的完整数据输出为前端可调用的JS变量：

{block name='product_custom_comb_data'}
<script>
  // 提前注入所有组合的全量数据
  window.allProductCombinations = {$product.combinations|json_encode};
</script>
{/block}

如果主题本身已经预置了组合全局变量，可以直接复用，跳过这一步

第二步：修改product-variants.tpl循环结构 #

把你给出的foreach循环替换为以下代码，预留额外数据的显示容器，同时给每个属性项加标识属性方便后续匹配数据：

{foreach from=$group.attributes key=id_attribute item=group_attribute}
  <li class="input-container float-left" data-attr-id="{$id_attribute}" data-attr-group="{$id_attribute_group}">
    <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"
            name="group[{$id_attribute_group}]"
            value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
    <span class="radio-label">{$group_attribute.name}</span>
    <!-- 新增组合额外信息展示区域 -->
    <div class="comb-extra small text-muted mt-1 pl-2">
      <p class="mb-0 comb-ref">参考号：-</p>
      <p class="mb-0 comb-stock">库存：-</p>
      <p class="mb-0 comb-location">库存位置：-</p>
    </div>
  </li>
{/foreach}

第三步：添加JS逻辑匹配渲染数据 #

在product-variants.tpl文件末尾添加以下JS代码，遍历组合数据匹配对应属性项，把需要展示的字段直接渲染到预留容器：

document.addEventListener('DOMContentLoaded', function() {
  const combinations = window.allProductCombinations;
  if (!combinations || combinations.length === 0) return;

  combinations.forEach(comb => {
    // 提取当前组合对应的所有属性ID
    const combinationAttrIds = Object.values(comb.attributes).map(item => item.id);
    combinationAttrIds.forEach(attrId => {
      const targetEl = document.querySelector(`[data-attr-id="${attrId}"] .comb-extra`);
      if (!targetEl) return;
      // 填充数据
      targetEl.querySelector('.comb-ref').textContent = `参考号：${comb.reference || '-'}`;
      targetEl.querySelector('.comb-stock').textContent = `库存：${comb.quantity || 0}`;
      targetEl.querySelector('.comb-location').textContent = `库存位置：${comb.stock_location || '-'}`;
    })
  })
})

第四步：可选样式调整 #

可以在主题自定义CSS中添加以下代码优化排版：

.comb-extra {
  font-size: 12px;
  line-height: 1.3;
  color: #666;
}

如果你的商品是多属性组的组合，需要根据实际业务调整JS逻辑，按属性组合匹配唯一的组合数据，避免不同组合信息重复显示

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