如何解决在BigCommerce中显示子类别的子类别
在尝试使之成为可能之前,我经历了所有可能的技巧,可以显示有关Bigcommerce超市主题的子类别的子类别。
Bigcommerce支持及其社区已经使我对如何实现这一目标有了想法,并在此处发布。
在列表格式中,我要完成的工作是:
- 父母类别
- 子类别
- 子类别
- 子类别
这是我正在测试的页面: 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。