在BigCommerce中显示子类别的子类别

编程问答 2022-08-11

问题描述

在尝试使之成为可能之前，我经历了所有可能的技巧，可以显示有关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 subcategories menu inside a subcategory

是否可以通过车把做到这一点？

解决方法

创建一个组件文件，该文件将自行调用，直到到达树的末尾为止，如果我理解正确的话，它应该执行您想要的操作。

例如：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>
bigcommercecategorieshandlebars.js