2017-05-08 5 views
1

私はBigcommerceとHandlebarsの新機能です。私は現在、デザインに基づいてウェブサイトを構築しており、Merchant Stencilテーマを使用しています。Bigcommerce Stencilのテーマオブジェクトにアクセスする方法

Here is a picture of the homepage structure I need

瞬間のために、私はhome.htmlテンプレートファイルで3つのセクションをハードコードが、私はそれのIDに基づいて、製品ごとに動的製品情報(URL、名前、説明を)持って帰りたいと思います。

ストアは一瞬だけで、製品の3種類を販売している、私は特色として設定されているすべての3つの製品と機能を備えた製品のセクションがあります。これはうまくいきます。 2番目の部分は、Product ObjectまたはProduct Card object(ドキュメントのリンクが追加されています)にアクセスしたいのですが、どうすればいいかわかりません。彼らはコード例を持っていないし、本当に私の周りに自分の道を見つけることができません。どのように私はこれらのオブジェクトを使用することができます上の任意の助けが大いに感謝される。

私もBigcommerceのサポートを求めている、と彼らはここに送ってくれました。サポートしている人たちは、自分のプラットフォームでの開発についての手がかりがないので、ここで私を送ってくれました。

乾杯!ここで

は私のhome.htmlファイル内のコードです。

{{#if products.featured}} 
<section class="products-featured section"> 
    <h4 class="section-title">{{lang 'home.featured_products'}}</h4> 
    <div class="wrapper"> 
     {{#each products.featured}} 
      {{> components/products/product-grid-item 
       quick_shop=../theme_settings.quick_shop 
      }} 
     {{/each}}    
    </div> 
</section> 
{{/if}} 
<section id="gg-one" class="glue-section"> 
    <div class="container"> 
     <div class="text-col"> 
      <h2 class="section-title">Grizzly One</h2> 
      <p class="caption-content">North America's first liquid polyurethane glue - a high-tech adhesive widely used by European woodworks and craftsmen for decades.</p> 
      <ul class="glue-feats"> 
       <li>Ideal for proffessional, commercial, and industrial woodworking needs.</li> 
       <li>Even bonds to oily and exotic woods!</li> 
      </ul> 
      <div class="buttons"> 

      </div> 
     </div> 
     <div class="img-col"> 

     </div>    
    </div> 
</section> 
<section id="gg-structan" class="glue-section"> 
    <div class="container"> 
     <div class="img-col"> 

     </div> 
     <div class="text-col"> 
      <h2 class="section-title">Grizzly Structan</h2> 
      <p class="caption-content">This heavy-bodied, cartridge-loaded 
      polyurethane adhesive is stronger than liquid polyurethane 
      glues.</p> 
      <ul class="glue-feats"> 
       <li>Perfect for wood, stone, tile, metal, and glass - dries to a tough elastic texture.</li> 
       <li>Industrial strength - ideal for professional and commercial applications.</li> 
      </ul> 
      <div class="buttons"> 

      </div> 
     </div> 
    </div> 
</section> 
<section id="gg-xpress" class="glue-section"> 
    <div class="container"> 
     <div class="text-col"> 
      <h2 class="section-title">Grizzly Xpress</h2> 
      <p class="caption-content">All the srength and body of a semi-gel adhesive<br> with a quick setting and curing time.</p> 
      <ul class="glue-feats"> 
       <li>The first and only semi-gel adhesive available in North America!</li> 
       <li>Quick, professional-strength bond for wood, stone, tile, metal and glass.</li>        
      </ul> 
      <div class="buttons"> 

      </div> 
     </div> 
     <div class="img-col"> 
      <div class="inner"> 
       <img src="https://cdn3.bigcommerce.com/s-jgnuwblrjb/product_images/uploaded_images/grizzly-xpress-home.png"> 
      </div> 
     </div> 
    </div> 
</section> 

答えて

1

フィーチャーセクションの下にあるダイナミックセクションのコンポーネントを作成します。次に、あなたのコンポーネントの内部

{{#each products.featured}} 
    {{> components/products/your-new-component }} 
{{/each}} 

を行うには、製品のオブジェクトを取得し、あなたは単に{{product.id}}または{{}} product.title

してデータを取得することができます
関連する問題