Question

如何使用模具主题在主页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和单独的服务器（不是utils API，而是bigcommerce.developer中记录的API）。 com）拨打类别并提供ID /产品信息。

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

1 个答案: