Displaying the subcategory of a subcategory in BigCommerce

Question

I have been through every possible trick that I can come up with in trying to make it possible, that I can display subcategories of a subcategory on my Bigcommerce supermarket theme.

Bigcommerce support and their community has been able to give me an idea on how to accomplish this, and to post here.

In list format, what I am trying to accomplish is this:

1. Parent Category
   • Subcategory
     • subcategory

Here is the page I am testing on: https://www.flexibleassembly.com/programmable-tools-test/

I have currently set to this:

<!-- 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 and our theme's developer, papathemes have suggested that we call it as "each category" and "children"

By doing this, while the code works - but it's pulling the first tier of categories; when I should be displaying the subcategories and their subcategories.

By changing from "categories" to "category.subcategories", I can display the subcategories, but the code will not pull their 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-->

The first example confirms that my code indeed works, the problem is that there is no easy way to get the subcategories of a subcategory.

I looked at the following article to see if it can give me a direction to go. While it does have a method, I'm looking to see if there is an efficient way to do this now; it was from 7 years ago. Prestashop subcategories menu inside a subcategory

Is it possible to do this with handlebars?

Answer 1

Create a component file which will call itself until it gets to the end of the tree should do what you want if I understand correctly.

For example: components/list/category.html

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

Then in your page template:

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