Bigcommerce Stencil - 如何在每个类别中找到顶级类别

Question

我是 Stencil 的新手，我正在尝试在非顶级类别页面上获取顶级类别。我正在寻找遍历类别，但只打印顶级下方列出的项目。如果我在顶级页面上，这就是我正在使用的内容，但如果我在子类别页面上，则不会。

{{#each categories}}
            {{#if name '===' ../category.name}}
              <li class="parent {{#if children}}has-children tier-dropdown{{/if}}">
                <a href="{{url}}">{{name}}</a>
                {{#if children}}
                  <ul class="children">
                    <li class="parent-all"><a href="{{url}}">{{lang 'common.navigation_all'}} {{name}}</a></li>
                    {{#each children}}
                      <li>
                        <a href="{{url}}">{{name}}</a>
                        {{#if children}}
                          <ul class="children2">
                            <li class="parent-all"><a href="{{url}}">{{lang 'common.navigation_all'}} {{name}}</a></li>
                            {{#each children}}
                                <li {{#if children}}class="tier-dropdown"{{/if}}>
                                    <a {{#if children}}class="tier-toggle"{{/if}} href="{{url}}">{{name}}</a>
                                    {{#if children}}
                                        <ul class="tier-panel">
                                            <li class="parent-all"><a href="{{url}}">{{lang 'common.navigation_all'}} {{name}}</a></li>
                                            {{#each children}}
                                                <li {{#if children}}class="tier-dropdown"{{/if}}>
                                                    <a {{#if children}}class="tier-toggle"{{/if}} href="{{url}}">{{name}}</a>
                                                    {{#if children}}
                                                        <ul class="tier-panel">
                                                            <li class="parent-all"><a href="{{url}}">{{lang 'common.navigation_all'}} {{name}}</a></li>
                                                            {{#each children}}
                                                                {{> components/common/site-navigation-submenus}}
                                                            {{/each}}
                                                        </ul>
                                                    {{/if}}
                                                </li>
                                            {{/each}}
                                        </ul>
                                    {{/if}}
                                </li>
                            {{/each}}
                          </ul>
                        {{/if}}
                      </li>
                    {{/each}}
                  </ul>
                {{/if}}
              </li>
             {{/if}}
        {{/each}}

重点是第 2 行，因为 if 语句需要始终指向顶级类别，即使在子类别页面上也是如此。

我虽然想使用面包屑，但无法想出在每个循环的类别中使用它的方法。

Answer 1

没有一个纯粹的 Stencil/Handlebars.js 解决方案。您需要能够对 BigCommerce 没有帮助的父类别进行递归向上搜索。最好的解决方案是在页面加载期间重新设置样式或将项目添加到列表中。

您可以使用页面网址，具体取决于您的网址结构，也可以使用您提到的面包屑。

TL;DR 你需要 javascript。