Architecture

Sections

Sections are partial HTML and JSON files used to render a group or a particular portion of the template on the storefront like headers-groups, special-offers, feature-products and more.

They are located inside the sections folder and subfolders and they the HTML sections files supports Handlebars.js syntaxes and additional helpers that are provided by the Taojaa theme engine. The JSON section groups follows the same standard with the Templates JSON file

Location

.
└── theme
    ├── layout
    ├── sections
    |   ├── featured-collections.handlebars
    |   ├── header-group.json
    |   ├── main-header.handlebars
    ...

Structure

Section HTML files should always contain a standard HTML elements with Handlebars.js syntaxes or any custom helper function that are provided by the Taojaa theme engine.

<!-- Start Featured Collection Section -->
<div class="product-section">
  <div class="container">
      <div class="row h-100">

        {{#iterate featured_collections}} <!-- Custom helper function to iterate over a list -->
        <div class="col-12 col-md-4 col-lg-3 mb-5 mb-md-0 h-100 order-2 order-lg-1">
            <a class="product-item" href="/collection/{{current.slug}}">
                <img src="{{current.image}}" class="img-fluid product-thumbnail">
                <h3 class="product-title">{{current.name}}</h3>
            </a>
        </div>
        {{/iterate }}

          <!-- Start Column 1 -->
          <div class="col-12 col-md-5 mb-5 mb-md-0 offset-lg-1 order-1 order-lg-1">
            {{#widgets section.widgets}} <!-- Custom helper function to iterate over section widgets -->
            {{#ifCond widget.type '==' 'featured_collections_title'}}
                <{{widget.tag}}>{{widget.settings.text}}</{{widget.tag}}>
            {{/ifCond}}
            {{#ifCond widget.type '==' 'featured_collections_description'}}
                <{{widget.tag}}>{{widget.settings.text}}</{{widget.tag}}>
            {{/ifCond}}
          {{/widgets}}
          </div>
          <!-- End Column 1 -->

      </div>
  </div>
</div>
<!-- End Featured Collection Section -->

Usage

The section file name/path without the extension must be specified as the value for the "type" key within your section block.

If you create a new section file called featured-collection.handlebars or in a subfolder shop/featured-collection.handlebars when creating a section which uses this file the value of you "type" key must be either featured-collection or shop/featured-collection respectively.

{
    ...
    "sections": {
        "featured-collections" : {
            "type": "featured-collection", // The name of the html section file to be rendered
            ...
        }
    },
    ...
}

HTML sections can also be rendered partially inside another section using the {{{ render "<section-path>" }}} helper function provided by the Taojaa theme engine.

<!-- Rendering Featured Collection Section Inside Promotion Section -->
<div class="promotions-section">
  <div class="container">
      <div class="row h-100">
        
        <div class="col-md-6">
            Latest Featured Collections 
        </div>

        <div class="col-md-6">
            {{{ render "featured-collection" }}}
        </div>

      </div>
  </div>
</div>
<!-- End Promotion Section -->
<- Templates
Components ->
ON THIS PAGE
Overview