BigCommerce产品页展示产品所属全部分类的Stencil代码实现方法

实现原理 #

产品页默认的product.categories上下文仅返回产品直接绑定的分类节点，不会包含完整的父级分类链路，因此需要通过递归查找父分类的方式拼接完整层级路径。

代码实现 #

将以下代码插入到产品模板文件（路径为/templates/pages/product.html，如果使用自定义产品模板则修改对应文件）中你需要展示分类的位置：

<!-- 产品完整分类层级模块 -->
<div class="product-assigned-categories">
  <h4>所属分类</h4>
  {{#*inline "fetchFullCategoryPath"}}
    {{#if this.parent_id}}
      {{#with (getCategory this.parent_id)}}
        {{> fetchFullCategoryPath this}}
        <span class="category-separator"> / </span>
        <a href="{{url}}" class="category-link">{{name}}</a>
      {{/with}}
    {{else}}
      <a href="{{url}}" class="category-link">{{name}}</a>
    {{/if}}
  {{/inline}}
  {{#each product.categories}}
    <div class="category-path-item">
      {{> fetchFullCategoryPath this}}
    </div>
  {{/each}}
  <!-- 路径去重逻辑 -->
  <script>
    (function removeDuplicatePaths() {
      const existedPaths = new Set();
      document.querySelectorAll('.category-path-item').forEach(item => {
        const pathContent = item.textContent.trim();
        if (existedPaths.has(pathContent)) {
          item.remove();
          return;
        }
        existedPaths.add(pathContent);
      })
    })()
  </script>
</div>

配置说明 #

• 可根据需求修改<span class="category-separator"> / </span>中的分隔符，也可添加自定义CSS调整分类展示样式
• 代码内置去重逻辑，避免产品同时绑定子分类和父级分类时，同一条路径重复渲染
• 部署前可先通过stencil start启动本地预览服务验证效果，确认无误后执行stencil push上线即可

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