2017-05-08 4 views
1

저는 Bigcommerce와 Handlebars를 처음 사용했습니다. 나는 현재 디자인에 따라 웹 사이트를 구축 중이며 Merchant Stencil 테마를 사용 중입니다. 순간 Bigcommerce 스텐실 테마 개체에 액세스하는 방법

Here is a picture of the homepage structure I need

, 나는 home.html을 템플릿 파일에 3 개 섹션을 하드 코딩,하지만 난 그것의 ID를 기반으로 각 제품에 대한 동적 정보 (URL, 이름, 설명)을 가지고 싶어.

매장에서는 3 가지 제품 만 판매합니다. 지금은 3 가지 제품이 모두 추천 상품으로 지정된 제품 섹션이 있습니다. 이것은 잘 작동합니다. 두 번째 부분은 Product Object 또는 Product Card object (문서 링크가 추가됨)에 액세스하려고하며이를 수행하는 방법을 모르겠습니다. 그들은 코드 예제를 가지고 있지 않으며 실제로 주위를 찾을 수 없습니다. 이러한 개체를 어떻게 사용할 수 있는지에 대한 도움은 매우 감사하겠습니다.

나는 빅 커머스 지원에 대해서도 물었고, 그들은 나를 여기로 보냈다. 지원 사람들은 플랫폼 개발에 대한 단서가 없으므로 나를 보냈습니다.

건배!

다음은 내 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}}

하여 데이터를 얻을 수 있습니다