Architecture

Components

Components are sets of reusable HTML files that contains smaller snippets and can be used to render a smaller part of a section and can be updated after an action or event has been completed.

They are located inside the components folder and subfolders and they the HTML files that supports Handlebars.js syntaxes and additional helpers that are provided by the Taojaa theme engine.

Location

.
└── theme
    ├── assets
    ├── components
    |   ├── cart-item.handlebars
    |   ├── loader.handlebars
    |   ├── payment-buttons.handlebars
    ├── ...
    ├── layouts
    ...

Structure

Components 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.

<!-- Total Cart Price Component -->
<bdi>
    <span class="taojaa-Price-currencySymbol">{{currency}}</span>{{total_amount}}
</bdi>
<!-- Loader Component -->
<link rel="stylesheet" href="{{asset_url}}/css/loader.css" type="text/css"/>

<div class="loading__spinner hidden">
    <div class="loader-02"></div>
</div>

Usage

Taojaa theme engine provides a helper function the enables you render components within your section HTML files.

Components can be placed directly inside the components folder or in a subfolder inside the components folder and can be rendered using {{{ component "<component-name>" }}} helper function within your section file as shown below.

<div class="bg-dark" cart-item="{{item.id}}">
    {{#form "remove-item" item=item}}

    <button type="submit" class="qodef-e-remove remove remove_from_cart_button"
        aria-label="Remove this item">
        <span class="qodef-icon-elegant-icons icon_close button_text"></span>
        {{{component 'loader'}}} <!-- Rendering a loader component -->
    </button>

    {{/form}}
    ...
</div>

You can also pass down custom data down into your components by specifying the name and the value when referencing the component.

<tr class="order-total">
    <th>Total</th>
    <td data-title="Total">
        <strong>
            <span class="taojaa-Price-amount amount cart-total-amount">
                {{{component 
                    "cart-total-amount" 
                    currency="$" 
                    total_amount=1000.00
                }}} <!-- Rendering a cart total amount component -->
            </span>
        </strong>
    </td>
</tr>
Re-rendering/Updating Components after an action.

Components can be updated/re-rendered after an event has been triggered without re-loading the entire website. This can be achieved by specifying the list of affected components you want to update when making an action call using your javascript functions.

When making an action call/request to any the storefront action handler specify the list of components you want to update using the components key in your payload and passing a stringified array of affected components as value.

 const payload = {
    product_id,
    quantity,
    components: JSON.stringify(['cart-items', 'cart-total-amount'])
};

// Make a request to an add to cart action handler
fetch('/add-to-cart', { 
    method: "POST",
    headers: {
        Accept: "application/json",
    }, 
    body: JSON.stringify(payload)
}).then(response => response.json())
    .then(response => {
        // perform logic using action response
    }).catch((error) => {
        // handle error from action 
    });
<- Sections
Assets ->
ON THIS PAGE
Overview