ホームページステンシルテーマで特定のカテゴリーの商品を表示

Question

ホームページでの特定のカテゴリの限定商品をステンシルテーマで表示するには？私はいくつかのカテゴリーを好きにしたい。 Uは以下の私のコードで見ることができます：

<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

既存のハンドルヘルパーと特定のカテゴリから製品を取得する方法はありません。資産/ JSのでは（あなたが指定されているようではないホームページ）

カテゴリページにIDを注入する例を

：あなたは、製品IDとページにコンテキストを注入し、のような製品のカードを作成することを使用することができます/theme/category.jsが、これは次の行を追加します。

constructor(context) { 
    super(); 

    console.log(context.productIds); 
} 

とテンプレート/ページ/ category.htmlで、追加：ホームページ

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

を、あなたはミリアンペアにする必要がありますカテゴリの代わりにassets/js/theme/home.jsに変更するか、APIと別のサーバー（utils APIではなく、bigcommerce.developer.comで文書化されているAPI）を使用してカテゴリを呼び出し、ID /製品情報。