在 BigCommerce 中顯示子類別的子類別

Question

我已經嘗試了所有可能的技巧來嘗試使其成為可能，即我可以在我的 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 建議我們將其稱為“每個類別”和“兒童”

通過這樣做，雖然代碼可以工作 - 但它正在拉第一層類別； 當我應該顯示子類別及其子類別時。

通過從“categories”更改為“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 子類別菜單

可以用車把做到這一點嗎？

Answer 1

如果我理解正確，創建一個組件文件，該文件將調用自身直到到達樹的末尾應該執行您想要的操作。

例如：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>