Devlooper Tools

Affluent Helpers & Syntaxes

Taojaa theme engine supports all Handlebars.js syntaxes and below you'll find examples of all the additional helpers added to the Taojaa theme engine.

This documentation will focus only on Taojaa theme engine additioanal helpers, to see available helpers and syntaxes provided by Handlebars, kindly visit Handlebars.js official documentation.

The example data below will be used throughout all the explanations on this page

{
    "product": {
        "id": 20,
        "vendor_id": 1,
        "name": "Black Maxi Dress New",
        "slug": "black-maxi-dress-new",
        "brand": "",
        "price": "1657.49",
        "discount": 10,
        "quantity": 12,
        "collections": [
            {
                "name": "Fall SS24",
                "slug": "fall-ss24"
            },
            {
                "name": "Jumpsuits",
                "slug": "jumpsuits"
            }
        ],
        "availability": 1,
        "actual_price": "1841.66",
        "image": {
            "id": 20,
            "main": "...image/upload/v1716486557/dev/storage/images/pexels-ahmadsalamat-17801152.jpg",
            "cart": null,
            "video": "",
            "gallery": [
                "...image/upload/v1716486557/dev/storage/images/pexels-ahmadsalamat-17801152.jpg"
            ],
        },
        "seo": {
            "id": 20,
            "meta_title": "",
            "meta_description": "",
            "meta_keywords": ""
        },
        "inventory": {
            "id": 20,
            "sku": "",
            "barcode": "",
            "description": "<p>Black Maxi Dress</p>",
            "specifications": null,
            "care_information": ""
        },
        "variations": [
            {
                "type": {
                    "id": 2,
                    "name": "Sizes",
                    "vendor_id": null,
                    "is_default": null
                },
                "values": [
                    {
                        "id": 102,
                        "name": "Size 10",
                        "variation_id": 2,
                        "index": 0
                    },
                    {
                        "id": 101,
                        "name": "Size 8",
                        "variation_id": 2,
                        "index": 1
                    },
                    {
                        "id": 103,
                        "name": "Size 12",
                        "variation_id": 2,
                        "index": 2
                    }
                ],
                "index": 0
            }
        ],
        "variation_options": [
            {
                "id": 38,
                "price": 2000,
                "quantity": 10,
                "sku": "",
                "in_stock": true,
                "images": [],
                "name": "Size12"
            },
            {
                "id": 37,
                "price": 2000,
                "quantity": 9,
                "sku": "",
                "in_stock": true,
                "images": [],
                "name": "Size10"
            },
            {
                "id": 36,
                "price": 2000,
                "quantity": 10,
                "sku": "",
                "in_stock": true,
                "images": [],
                "name": "Size8"
            }
        ],
        "default_or_selected_variant": {
            "id": 38,
            "variant": "Size 12",
            "price": 2000,
            "quantity": 10,
            "sku": "",
            "in_stock": true,
            "images": null
        },
        "default_or_selected_options": [
            "Size 12"
        ],
        "default_or_selected_variant_id": 38,
        "has_variations": true,
        "tags": []
    }
}

Expressions & Data Rendering

To display contents on the storefront theme, you can use the Handlebars.js simple expressions. or any additioanal expression helper provided by the Taojaa theme engine.

<h1>{{ product.title }}</h1>
{{{ product.description }}}         // this would render a html string
<span>{{ product.price }}</span>
Addition Expression

The addition expression enables you add numbers and output the result in your storefront theme

{{add 2 7}} <!-- this will display 9 -->
{{add product.price 1000}} <!-- will add 1000 to the product price -->
Subtraction Expression

The subtraction expression enables you prform a subtractio between 2 numbers and output the result in your storefront theme

{{subtract 7 2}} <!-- this will display 5 -->
{{subtract product.price 1000}} <!-- will subtract 1000 from the product price -->
Money Expression

The money expression enables you display a price value with the customers active storefront currency

{{money product.price}} <!-- this will display $1657.49 -->
Product Price Expression

The product price expression is a spaecial expressions for displaying and formating product prices on the storefront. It usually takes the product object as parameter

{{product_price product}} <!-- this will display $1657.49 -->
JSON Expression

The JSON expression enables you convert an object to a JSON string.

<script id="variation-options" type="application/json">
    {{json product.variation_options}}
</script>

Operations & Conditional Helpers

You can also perform operations within your theme's HTML files using any of the Handlebars.js conditional expressions and the additional helpers provided by the Taojaa theme engine.

if Condition
{{#ifCond product.in_stock '==' true}}
    <!-- content goes here -->
{{/ifCond}}
if-else Condition
{{#ifCond product.in_stock '==' true}}
    <!-- content goes here -->
{{else}}
    <!-- content goes here -->
{{/ifCond}}
unless Helper

Unlike the IfCond the unless helper only execute when the express or parameter returns false

{{#unless product.available_on_pre_order}}
    <!-- displays content -->
{{/unless}}
includes Helper

The includes helper checks if an array includes a specific item, it takes 2 parameters which is the array to search in and the value of the item you're trying to check.

{{#includes product.sizes 'Small'}}
    <!-- displays content -->
{{/includes}}
inCart Helper

The inCart helper is a custom helper added by Taojaa to help check if an item of exact type already exist in cart and will be helpful when displaying action buttons, It takes the product object as parameter.

{{#inCart product}}
    <!-- displays content -->
{{/inCart}}

Loops & Iterators

You can perform loops and iterations while rendering contents on your storefront view using any of the Handlebars.js iterators and the additional iteration helpers provided by the Taojaa theme engine.

iterate Helper

With the iterate helper, you can loop through a list of items/object within your theme's HTML files and display contents based on your list.

At every iteration the iterate helper will provide an instance of the current item called current

{{#iterate product.variation_options}}
    <div class="variation-item">
        <h1>{{product.name}}</h1>
        <p>Price: {{current.price}}</p>
        <span>Available Quantity: {{current.quantity}}</span>
    </div>
{{/iterate}}

You can also specify a custom name for your iteration item during iteration using the as key just as shown below

{{#iterate product.variation_options as="variant"}}
    <div class="variation-item">
        <h1>{{product.name}}</h1>
        <p>Price: {{variant.price}}</p>
        <span>Available Quantity: {{variant.quantity}}</span>
    </div>
{{/iterate}}
variations Helper

This helper helps iterate over a product variations and provides all the variation information within your loop context, it takes a single parameter which is the product object.

{{#variations product}}
    <div class="variation-item">
        {{#ifCond type.name '==' 'Sizes'}}
            <span>Available Sizes: </span>
            <!-- list available sizes -->
        {{/ifCond}}
    </div>
{{/variations}}

The variations helper also provides a nexted helper within its context called variantOptions to help iterate over the current variant values.

{{#variations product}}
    <div class="variation-item">
        {{#ifCond type.name '==' 'Sizes'}}
            <span>Available Sizes: </span>
            <!-- list available sizes using nexted helper -->
            <ul>
                {{#variantOptions this}}
                    <li> 
                        <label> 
                            <input type="checkbox" value="{{id}}" /> <span>{{ name }}</span>
                        <label/>
                    </li>
                {{/variantOptions}}
            </ul>
        {{/ifCond}}
    </div>
{{/variations}}
widgets Helper

Unlike other iterators the widgets helper is mainly used to iterate over widgets that are provided in your template sections and makes sure they are accessible while using the theme editor to update your widget settings.

The widgets helper takes one required parameter which is the widgets object in your section context, and each widget can be accessed during the interation using widget variable or any name provided using the as key

{{#widgets section.widgets}}
    <!-- content goes here -->
{{/widgets}}

<!-- or -->

{{#widgets section.widgets as="mywidgetvariable"}}
    <!-- content goes here -->
{{/widgets}}

Forms

Taojaa theme engine provides a set of form helpers to help create action forms inside your storefront theme, with the form helper you can create an action form to submit specific requests on the storefront.

Available form action types `product`,`remove-item`,`newsletter`,`search`,`apply-coupon`,`remove-coupon`,`contact`,`review`,`wishlist`,`login`,`logout`,`forgot-password`,`reset-password`

 <!-- Form helper -->
{{#form [type:string] [props:string (optional)]}}
    <!-- content goes here -->
{{/form}}
Product Form

Product form type is used to build an add-to-cart action form for specific product on the storefront, which enables storefront users add items to cart on your store.

 <!-- This form will add an item to cart -->
{{#form "product" product=product 'id="add-to-cart" class="form"' }}
    <input type="number" name="quantity" id="quantity" value="1" />

    <input type="number" name="variant_id" id="variant_id" 
        value="{{product.default_or_selected_variant_id}}" />

    <button type="submit">
        Add to Cart
    </button>
{{/form}}
Remove Item Form

Remove item form type is used to build a remove from cart action form for an item that has been added to cart on the storefront, which enables users remove items from cart on your store.

 <!-- this will create a remove item from cart form -->
{{#form "remove-item" item=cart.items[0]}}
    <button type="submit">
        Remove Item
    </button>
{{/form}}
Product Review Form

This form type is used to build a review product action form for a product, which enables visitors submit reviews for your products or items on your storefront.

 <!-- this will create a review product form -->
{{#form 'review' product=product}}
    <input type="text" id="fullname" name="fullname" placeholder="Your Name *" />
    <input type="email" id="email" name="email" placeholder="Your Email *" />
    <input type="number" id="rate" name="rate" max="5" />
    <textarea id="message" name="message" placeholder="Your Review *"
        cols="45" rows="8"></textarea>
    <button type="submit">
        Save Review
    </button>
{{/form}}
Newsletter Form

Newsletter form type helps create a subscribe to newsletter action form on your storefront

<!-- This will create a subscribe to newsletter form -->
{{#form "newsletter"}}
    <input type="email" name="email" id="email" placeholder="Your e-mail" />

    <button type="submit">
        Subscribe
    </button>
{{/form}}
Search Form

Search form type helps create a search action form on your storefront

<!-- This will create a search form -->
{{#form "search"}}
    <input type="text" name="keywords" id="keywords" placeholder="Search" />
    <button type="submit">
        Search
    </button>
{{/form}}
Apply Coupon Form

Apply coupone form type will create an apply coupon action form on your storefront for customers to apply coupon/discounts to their cart.

<!-- This will create an coupon/discount form -->
{{#form "apply-coupon"}}
    <input type="text" name="coupon" id="coupon" placeholder="Coupon code" />

    <button type="submit" name="apply_coupon">
        Apply Coupon
    </button>
{{/form}}
Remove Coupon Form

Remove coupon form type will create a remove coupon action form on your storefront for customers to remove any applied coupon/discount from their cart.

<!-- This will create a remove coupon form -->
{{#form "remove-coupon"}}
    <button type="submit" name="remove_coupon">
        Remove coupon
    </button>
{{/form}}
Login Form

This form type would create a login action form for authentication on your store.

<!-- This will create a login form -->
{{#form "login"}}
    <input type="email" name="email" id="email" placeholder="Email Address" />
    <input type="password" name="password" id="password" placeholder="Enter Password" />
    <button type="submit" name="login">
        Login
    </button>
{{/form}}
Registration Form

This form type would create a registration action form for customers to create an account on your store.

<!-- This will create a regsiter account form -->
{{#form "register"}}
    <input type="text" name="name" id="name" placeholder="Enter Fullname" />
    <input type="email" name="email" id="email" placeholder="Email Address" />
    <input type="password" name="password" id="password" placeholder="Enter Password" />
    <input type="password" name="confirm_password" id="confirm-password" placeholder="Confirm Password" />
    <button type="submit" name="register">
        Create Account
    </button>
{{/form}}
Forgot Password Form

This form type would create a forgot password action form for customers to request as password reset on your store.

<!-- This will create a forgot password form -->
{{#form "forgot-password"}}
    <input type="email" name="email" id="email" placeholder="Email Address" />
    <button type="submit">
        Confirm Account
    </button>
{{/form}}
Reset Password Form

This form type would create a reset password action form for customers to set a new password after a successful password reset request has been confirmed.

<!-- This will create a reset password form -->
{{#form "reset-password"}}
    <input type="password" name="password" id="password" placeholder="Enter Password" />
    <input type="password" name="confirm_password" id="confirm-password" placeholder="Confirm Password" />
    <button type="submit">
        Reset Password
    </button>
{{/form}}
Contact Form

This form type is used to build a contact action form for your store, which enables customers submit enquiries directly from the storefront.

All contact form submission wil be sent to the store email provided by the store owner on their store information settings.

 <!-- this will create a contact form -->
{{#form 'contact'}}
    <input type="text" id="name" name="name" placeholder="Your Name *" />
    <input type="email" id="email" name="email" placeholder="Your Email *" />
    <input type="text" id="subject" name="subject" placeholder="Enter Subject" />
    <textarea id="message" name="message" placeholder="Your Message *"
        cols="45" rows="8"></textarea>
    <button type="submit">
        Save Message
    </button>
{{/form}}
<- Affluent
ON THIS PAGE

Affluent helpers & syntaxes

Expressions & Data Rendering

Addition Expression

Subtraction Expression

Money Expression

Product Price Expression

JSON Expression

Operations & Conditional Helpers

If Condition

If-Else Condition

Unless Helper

Includes Helper

InCart Helper

Loops & Iterators

Iterate Helper

Variations Helper

Widgets Helper

Forms

Product Form

Remove Item Form

Product Review Form

Newsletter Form

Search Form

Apply Coupon Form

Remove Coupon Form

Login Form

Registeration Form

Forgot Password Form

Reset Password Form

Contact Form