Objects and Attributes

Objects and attributes form the foundation of Mustache templating in Quickbutik. Understanding how to access and manipulate object properties is essential for building dynamic, data-driven themes using only supported Quickbutik properties.

What are Objects?

Objects in Mustache are data structures that contain information about your store, products, users, and other entities. Each object has attributes (properties) that hold specific values.

<!-- Accessing shop object attributes -->
<h1>{{shop.name}}</h1>
<p>{{shop.contact_text}}</p>

<!-- Accessing product object attributes -->
<h2>{{product.title}}</h2>
<p>Price: {{product.price}}</p>

<!-- Accessing nested attributes -->
<p>{{shop.address}}</p>
<p>{{shop.city}}, {{shop.zipcode}}</p>

<!-- Accessing array items -->
{{#product.images}}
    <img src="{{#img}}{{image}}_400x400{{/img}}" alt="{{alttext}}">
{{/product.images}}

Available Object Types

Quickbutik provides several types of objects you can work with:

Global Objects

Available on all pages throughout your theme:

Object	Description	Availability
`shop`	Store information and settings	All pages
`user`	Current user/customer data	All pages
`basket`	Shopping cart contents	All pages
`linklist`	Menu and navigation data	All pages
`settings`	Theme customization options	All pages
`seo`	SEO meta information	All pages

Page-Specific Objects

Available only on specific page types:

Object	Description	Available On
`product`	Individual product data	Product pages
`category`	Category and product listings	Category pages
`order`	Order confirmation details	Order/Thank you pages
`blog`	Blog post and article data	Blog pages
`page`	Static page content	Static pages

Object Property Access

Dot Notation for Nested Properties

Use dot notation to access nested properties:

<!-- Simple properties -->
{{shop.name}}
{{product.title}}
{{user.login_url}}

<!-- Nested properties -->
{{order.customer.email}}
{{order.customer.firstname}}
{{order.customer.ship_address}}

<!-- Settings properties -->
{{settings.home_elements}}

Array Index Access

Access specific array items by their index position:

<!-- Access first item (index 0) -->
{{product.images.0.image}}
{{linklist.main.0.name}}

<!-- Access second item (index 1) -->
{{product.images.1.image}}
{{shop.cconverter_currencies.1.currency}}

<!-- Access nested array items -->
{{linklist.main.0.children.0.name}}

Working with Different Property Types

Understanding the different types of data that object properties can contain:

String Properties

<!-- Simple text values -->
<h1>{{product.title}}</h1>
<p>{{product.description}}</p>
<span class="sku">{{product.sku}}</span>
<p>{{shop.contact_text}}</p>

Number Properties

<!-- Numeric values -->
<p>Price: {{product.price}}</p>
<p>Items: {{basket.items_count}}</p>
<p>Order ID: {{order.id}}</p>
<p>Quantity: {{qty}}</p>

Boolean Properties

<!-- Boolean properties for conditions -->
{{#product.soldOut}}
    <span class="sold-out-badge">{{#lang}}Sold Out{{/lang}}</span>
{{/product.soldOut}}

{{#product.has_before_price}}
    <span class="sale-badge">{{#lang}}Sale{{/lang}}</span>
{{/product.has_before_price}}

{{#user.logged_in}}
    <p>{{#lang}}Welcome back{{/lang}}</p>
{{/user.logged_in}}

{{#basket.isEmpty}}
    <p>{{#lang}}Your cart is empty{{/lang}}</p>
{{/basket.isEmpty}}

Array Properties

<!-- Arrays of objects -->
{{#product.images}}
    <img src="{{#img}}{{image}}_400x400{{/img}}" alt="{{alttext}}">
{{/product.images}}

<!-- Navigation arrays -->
{{#linklist.main}}
    <a href="{{url}}" class="nav-link">{{name}}</a>
{{/linklist.main}}

<!-- Order items array -->
{{#order.items}}
    <div class="order-item">
        <h4>{{title}}</h4>
        <p>{{#lang}}Quantity{{/lang}}: {{qty}}</p>
    </div>
{{/order.items}}

Object Properties (Nested Objects)

<!-- Customer address object -->
<div class="address">
    <p>{{order.customer.ship_address}}</p>
    <p>{{order.customer.ship_city}}, {{order.customer.ship_zipcode}}</p>
    <p>{{order.customer.ship_country}}</p>
</div>

<!-- Settings home elements -->
{{#settings.home_elements}}
    {{#element}}
        <h2>{{title}}</h2>
        {{#image1_link}}
            <img src="{{#img}}{{image1_link}}_600x400{{/img}}" alt="{{title}}">
        {{/image1_link}}
    {{/element}}
{{/settings.home_elements}}

Common Object Usage Patterns

Store Information Display

<header class="site-header">
    <h1>{{shop.name}}</h1>
    <a href="{{shop.url}}">{{#lang}}Visit Store{{/lang}}</a>
</header>

<div class="contact-info">
    {{#shop.address}}
        <p>{{shop.address}}</p>
        <p>{{shop.zipcode}} {{shop.city}}</p>
    {{/shop.address}}
    
    {{#shop.phone}}
        <p>{{#lang}}Phone{{/lang}}: {{shop.phone}}</p>
    {{/shop.phone}}
    
    {{#shop.contact_text}}
        <div class="contact-content">
            {{&shop.contact_text}}
        </div>
    {{/shop.contact_text}}
</div>

Product Data Management

<div class="product-details">
    <h1>{{product.title}}</h1>
    
    <div class="product-price">
        {{#product.has_before_price}}
            <span class="original-price">{{product.before_price}}</span>
        {{/product.has_before_price}}
        <span class="current-price">{{product.price}} {{product.currency}}</span>
    </div>
    
    <div class="product-meta">
        <p>{{#lang}}SKU{{/lang}}: {{product.sku}}</p>
        {{#product.gtin}}
            <p>{{#lang}}EAN{{/lang}}: {{product.gtin}}</p>
        {{/product.gtin}}
        
        <div class="stock-status">
            {{#product.soldOut}}
                <span class="out-of-stock">
                    {{#shop.soldout_text}}
                        {{shop.soldout_text}}
                    {{/shop.soldout_text}}
                    {{^shop.soldout_text}}
                        {{#lang}}Out of Stock{{/lang}}
                    {{/shop.soldout_text}}
                </span>
            {{/product.soldOut}}
            {{^product.soldOut}}
                <span class="in-stock">{{#lang}}Available{{/lang}}</span>
            {{/product.soldOut}}
        </div>
    </div>
    
    {{#product.description}}
        <div class="product-description">
            {{&product.description}}
        </div>
    {{/product.description}}
</div>

User Account Information

<!-- User authentication status -->
{{#shop.login_active}}
    {{#user.logged_in}}
        <div class="user-info">
            <p>{{#lang}}Welcome back{{/lang}}</p>
            
            <nav class="user-nav">
                <a href="{{user.login_url}}">{{#lang}}My Account{{/lang}}</a>
            </nav>
        </div>
    {{/user.logged_in}}

    {{^user.logged_in}}
        <div class="auth-links">
            <a href="{{user.login_url}}">{{#lang}}Login{{/lang}}</a>
        </div>
    {{/user.logged_in}}
{{/shop.login_active}}

Working with Context and Parent Access

When iterating through arrays or working within sections, you may need to access parent object properties:

<!-- Access parent product while iterating variants -->
{{#product.options}}
    <div class="product-option">
        <h4>{{option_title}}</h4>
        {{#option_values}}
            <div class="variant">
                <span>{{name}}</span>
                <!-- Access parent product title using ../ -->
                <p>{{#lang}}For{{/lang}}: {{../../title}}</p>
            </div>
        {{/option_values}}
    </div>
{{/product.options}}

<!-- Access global shop info within product loops -->
{{#related_products}}
    <div class="product-card">
        <h3>{{rp.title}}</h3>
        <p>{{rp.price}}</p>
        <!-- Access global shop currency -->
        <p>{{#lang}}Currency{{/lang}}: {{../shop.name}}</p>
    </div>
{{/related_products}}

Object Property Debugging

When working with objects, you might need to debug what properties are available:

<!-- Check if property exists -->
{{#product.description}}
    <div class="description">{{&product.description}}</div>
{{/product.description}}

{{^product.description}}
    <div class="no-description">{{#lang}}No description available{{/lang}}</div>
{{/product.description}}

<!-- Check for images -->
{{#product.images}}
    <div class="has-images">{{#lang}}Images available{{/lang}}</div>
{{/product.images}}

{{^product.images}}
    <div class="no-images">{{#lang}}No images available{{/lang}}</div>
{{/product.images}}

Best Practices

Check Property Existence

Always check if a property exists before using it to avoid template errors

Understand Object Hierarchy

Learn the structure of objects to access nested properties efficiently

Handle Missing Data Gracefully

Provide fallbacks for optional properties that might not always be present

Common Property Access Mistakes

Property Access Errors: These common mistakes can break your templates:

Wrong property names: {{product.name}} instead of {{product.title}}
Missing context: Forgetting ../ when accessing parent properties
Array confusion: Using {{product.images}} instead of iterating with {{#product.images}}
Case sensitivity: {{Product.title}} instead of {{product.title}}

Advanced Object Patterns

Conditional Property Display

<!-- Show additional info only if it exists -->
<div class="product-specifications">
    {{#product.supplier_name}}<p><strong>{{#lang}}Supplier{{/lang}}:</strong> {{product.supplier_name}}</p>{{/product.supplier_name}}
    {{#product.supplier_sku}}<p><strong>{{#lang}}Supplier SKU{{/lang}}:</strong> {{product.supplier_sku}}</p>{{/product.supplier_sku}}
    {{#product.gtin}}<p><strong>{{#lang}}EAN{{/lang}}:</strong> {{product.gtin}}</p>{{/product.gtin}}
</div>

Object Property Chaining

<!-- Chain through multiple levels -->
{{settings.home_elements.element.title}}
{{order.customer.ship_address}}
{{product.options.option_values.name}}

<!-- Safe chaining with existence checks -->
{{#settings.home_elements}}
    {{#element}}
        {{#title}}
            <h2>{{title}}</h2>
        {{/title}}
        
        {{#page.content}}
            <div class="content">
                {{&page.content}}
            </div>
        {{/page.content}}
    {{/element}}
{{/settings.home_elements}}

Supported Object Properties Reference

Shop Object Properties

<!-- Basic store info -->
{{shop.name}}
{{shop.url}}
{{shop.address}}
{{shop.zipcode}}
{{shop.city}}
{{shop.phone}}
{{shop.contact_text}}
{{shop.soldout_text}}

<!-- Feature flags -->
{{#shop.cconverter_active}}...{{/shop.cconverter_active}}
{{#shop.app.languages}}...{{/shop.app.languages}}
{{#shop.taxtoggle_active}}...{{/shop.taxtoggle_active}}
{{#shop.login_active}}...{{/shop.login_active}}

<!-- Currency converter -->
{{#shop.cconverter_currencies}}
    {{currency}}
    {{#current}}...{{/current}}
{{/shop.cconverter_currencies}}

<!-- Languages -->
{{#shop.languages}}
    {{id}}
    {{url}}
    {{#asset_flags}}{{id}}{{/asset_flags}}
{{/shop.languages}}

<!-- Tax toggle -->
{{#shop.exclude_tax}}...{{/shop.exclude_tax}}
{{shop.incl_tax_url}}
{{shop.excl_tax_url}}

Product Object Properties

<!-- Basic product info -->
{{product.title}}
{{product.id}}
{{product.sku}}
{{product.gtin}}
{{product.price}}
{{product.price_raw}}
{{product.before_price}}
{{product.currency}}
{{product.description}}

<!-- Images -->
{{product.firstimage}}
{{product.secondimage}}
{{#product.images}}
    {{image}}
    {{image_id}}
    {{alttext}}
{{/product.images}}

<!-- Supplier info -->
{{product.supplier_name}}
{{product.supplier_sku}}

<!-- Status -->
{{#product.soldOut}}...{{/product.soldOut}}
{{#product.has_before_price}}...{{/product.has_before_price}}

<!-- Variants -->
{{#product.hasOptions}}...{{/product.hasOptions}}
{{#product.options}}
    {{option_title}}
    {{#option_values}}
        {{id}}
        {{name}}
    {{/option_values}}
{{/product.options}}

<!-- Custom data fields -->
{{product.datafield_1}}
{{product.datafield_2}}
<!-- etc. -->

Next Steps

Conditionals

Learn how to use conditional logic with object properties

Wrappers and Functions

Discover helper functions to manipulate object data

Global Objects

Explore all available global objects in detail

Page Objects

Learn about page-specific objects and their properties

Getting Started

Template Language

Global Objects

Page Objects

What are Objects?

Available Object Types

Global Objects

Page-Specific Objects

Object Property Access

Dot Notation for Nested Properties

Array Index Access

Working with Different Property Types

String Properties

Number Properties

Boolean Properties

Array Properties

Object Properties (Nested Objects)

Common Object Usage Patterns

Store Information Display

Product Data Management

User Account Information

Working with Context and Parent Access

Object Property Debugging

Best Practices

Check Property Existence

Understand Object Hierarchy

Handle Missing Data Gracefully

Common Property Access Mistakes

Advanced Object Patterns

Conditional Property Display

Object Property Chaining

Supported Object Properties Reference

Shop Object Properties

Product Object Properties

Next Steps

Conditionals

Wrappers and Functions

Global Objects

Page Objects

​What are Objects?

​Available Object Types

​Global Objects

​Page-Specific Objects

​Object Property Access

​Dot Notation for Nested Properties

​Array Index Access

​Working with Different Property Types

​String Properties

​Number Properties

​Boolean Properties

​Array Properties

​Object Properties (Nested Objects)

​Common Object Usage Patterns

​Store Information Display

​Product Data Management

​User Account Information

​Working with Context and Parent Access

​Object Property Debugging

​Best Practices

Check Property Existence

Understand Object Hierarchy

Handle Missing Data Gracefully

​Common Property Access Mistakes

​Advanced Object Patterns

​Conditional Property Display

​Object Property Chaining

​Supported Object Properties Reference

​Shop Object Properties

​Product Object Properties

​Next Steps

Conditionals

Wrappers and Functions

Global Objects

Page Objects

What are Objects?

Available Object Types

Global Objects

Page-Specific Objects

Object Property Access

Dot Notation for Nested Properties

Array Index Access

Working with Different Property Types

String Properties

Number Properties

Boolean Properties

Array Properties

Object Properties (Nested Objects)

Common Object Usage Patterns

Store Information Display

Product Data Management

User Account Information

Working with Context and Parent Access

Object Property Debugging

Best Practices

Common Property Access Mistakes

Advanced Object Patterns

Conditional Property Display

Object Property Chaining

Supported Object Properties Reference

Shop Object Properties

Product Object Properties

Next Steps