时间戳

首页 > 解决方案 > 在 BigCommerce 中显示子类别的子类别

handlebars.js - 在 BigCommerce 中显示子类别的子类别

问题描述

我已经通过了所有可能的技巧来尝试使其成为可能，我可以在我的 Bigcommerce 超市主题上显示子类别的子类别。

Bigcommerce 支持和他们的社区已经能够给我一个关于如何实现这一点的想法，并在这里发布。

在列表格式中，我想要完成的是：

  1. 父类别
    • 子类别
      • 子类别

这是我正在测试的页面： https ://www.flexibleassembly.com/programmable-tools-test/

我目前已设置为：

<!-- each parent-->
{{#each categories}}
<h2 class="sidebarBlock-heading" href="{{url}}">{{name}}</span></a></h2>
<div class="main-categories-group">
<div class="categories-container">

{{#each children}}
<!--begin include subcat-->
<div class="small-12 large-4 columns">
<div class="small-12 columns">
<div class="columns small-12"><a href="{{name}}"> <h3 class="button">{{name}}</h3> </a></div>
<div class="columns small-12"><a title="{{name}}" href="{{url}}" data-instantload> <img class="itemBorder lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'category_card_size'}}" alt=" {{name}}" width=" 180px" height="180px" /> </a></div>
{{#if description.length}}
<hr />
<div class="seriesCardInfos columns small-12">
<div class="description" style="display: flex;">
{{{description}}}
</div>
</div>
<div class="columns small-12">
<div><a href="{{url}}"><button class="button button--primary">Shop Now!</button></a></div>
</div>
{{/if}}
</div>
</div>
<!--end include subcat-->
{{/each}}
</div>
</div>
{{/each}}
<!--end each parent-->

BigCommerce 和我们主题的开发者 papathemes 建议我们将其称为“每个类别”和“儿童”

通过这样做，虽然代码可以工作 - 但它正在拉动第一层类别；当我应该显示子类别及其子类别时。

通过从“类别”更改为“category.subcategories”，我可以显示子类别，但代码不会拉他们的子类别。

<!-- each parent-->
{{#each category.subcategories}}
<h2 class="sidebarBlock-heading" href="{{url}}">{{name}}</span></a></h2>
<div class="main-categories-group">
<div class="categories-container">

{{#each children}}
<!--begin include subcat-->
<div class="small-12 large-4 columns">
<div class="small-12 columns">
<div class="columns small-12"><a href="{{name}}"> <h3 class="button">{{name}}</h3> </a></div>
<div class="columns small-12"><a title="{{name}}" href="{{url}}" data-instantload> <img class="itemBorder lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'category_card_size'}}" alt=" {{name}}" width=" 180px" height="180px" /> </a></div>
{{#if description.length}}
<hr />
<div class="seriesCardInfos columns small-12">
<div class="description" style="display: flex;">
{{{description}}}
</div>
</div>
<div class="columns small-12">
<div><a href="{{url}}"><button class="button button--primary">Shop Now!</button></a></div>
</div>
{{/if}}
</div>
</div>
<!--end include subcat-->
{{/each}}
</div>
</div>
{{/each}}
<!--end each parent-->

第一个示例确认我的代码确实有效，问题是没有简单的方法来获取子类别的子类别。

我看了下面的文章，看看它是否能给我一个前进的方向。虽然它确实有一种方法，但我正在寻找现在是否有一种有效的方法来做到这一点；那是7年前的事了。 Prestashop 子类别中的子类别菜单

可以用车把做到这一点吗？

标签： handlebars.jscategoriesbigcommerce

解决方案

如果我理解正确，创建一个将调用自身直到它到达树的末尾的组件文件应该做你想做的事。

例如：components/list/category.html

 <li>
    {{name}}
    {{#if children}}
        <ul>
            {{#each children}}
                {{> components/list/category}}
            {{/each}}
        </ul>
    {{/if}}
</li>

然后在您的页面模板中：

<li>
  {{#each categories}}
    {{> components/list/category}}
  {{/each}}
</li>

推荐阅读