在主页模板主题上显示特定类别的产品

Question

如何使用stencil主题在首页bigcommerce上显示特定类别的有限产品？我想展示一些类别。你可以在下面的代码中看到：

<main class="page-content">
    <h2 class="page-heading">T-Shirts On Sale</h2>
    <span class="viewall"><a href="/t-shirts-on-sale">View More</a></span>
    <ul class="productGrid productGrid--maxCol3" data-product-type="t-shirts-on-sale">
        {{#each products}}
        <li class="product">
            {{>components/products/card theme_settings=../theme_settings}}
        </li>
        {{/each}}
    </ul>
    <h2 class="page-heading">Hoodies On Sale</h2>
    <span class="viewall"><a href="/hoodies-on-sale">View More</a></span>
    <ul class="productGrid productGrid--maxCol3" data-product-type="hoodies-on-sale">
        {{#each products}}
        <li class="product">
            {{>components/products/card theme_settings=../theme_settings}}
        </li>
        {{/each}}
    </ul>
    <h2 class="page-heading">Polos Shirts On Sale</h2>
    <span class="viewall"><a href="/polos-shirts-on-sale">View More</a></span>
    <ul class="productGrid productGrid--maxCol3" data-product-type="polos-shirts-on-sale">
        {{#each products}}
        <li class="product">
            {{>components/products/card theme_settings=../theme_settings}}
        </li>
        {{/each}}
    </ul>
</main>

Answer 1

无法使用现有的车把助手从特定类别中获取产品。您可以将上下文注入带有产品 ID 的页面，并使用它来创建产品卡片，例如：

将 ID 注入类别页面（不是您指定的主页）的示例

在assets/js/theme/category.js中，添加以下内容：

constructor(context) {
    super();

    console.log(context.productIds);
}

并在 templates/pages/category.html 中添加：

{{inject "productIds" (pluck category.products 'id')}}

对于主页，您需要更改 assets/js/theme/home.js 而不是类别或使用 API 和单独的服务器（不是实用程序 API，但API 记录在 bigcommerce.developer.com) 调用类别并提供 IDs/product 信息。

在主页模板主题上显示特定类别的产品

Display products of specific category on homepage stencil theme

themes

bigcommerce