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

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的页面，并用它来创建产品卡，如：

注入标识的类别页面（不是您指定的主页）

在资产/ JS的例子/theme/category.js，这增加以下内容：

constructor(context) { 
    super(); 

    console.log(context.productIds); 
} 

而且在模板/页/ category.html，添加：

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

对于主页，你将需要马ke更改为资产/ js/theme/home.js而不是类别，或者使用API​​和单独的服务器（而不是utils API，但记录在bigcommerce.developer.com上的API）调用某个类别并提供ID /产品信息。