Wrappers and Functions

Wrappers and functions in Quickbutik’s Mustache implementation provide essential tools for transforming and manipulating data. These helper functions extend Mustache’s capabilities for specific use cases like image optimization, translations, and asset linking.

Prerequisites: This guide covers the available wrapper functions. Make sure you understand basic Mustache syntax and object access patterns first.

Key Concept: Wrappers use the {{#function}}content{{/function}} syntax to process and transform data

Available Wrappers

According to the Quickbutik platform, only the following wrappers are supported:

Wrapper	Purpose	Usage
`{{#img}}`	Image manipulation and optimization	`{{#img}}{{product.firstimage}}_400x400{{/img}}`
`{{#lang}}`	Text translation via Control Panel	`{{#lang}}My text here{{/lang}}`
`{{#assets}}`	Link to correct path for specific file	`{{#assets}}css/style.css{{/assets}}`
`{{#breadcrumbs}}`	Output breadcrumbs/category structure	`{{#breadcrumbs}} {{url}} {{title}} {{^last}} {{/last}} {{/breadcrumbs}}`
`{{#asset_flags}}`	Return flag icon for language	`{{#asset_flags}}{{id}}{{/asset_flags}}`

Image Wrapper (`{{#img}}`)

The image wrapper is essential for handling product images and media optimization:

<!-- Resize image to specific dimensions -->
<img src="{{#img}}{{product.firstimage}}_400x400{{/img}}" alt="{{product.title}}">

<!-- Different sizes for different uses -->
<img src="{{#img}}{{product.firstimage}}_150x150{{/img}}" alt="{{product.title}}" class="thumbnail">
<img src="{{#img}}{{product.firstimage}}_800x600{{/img}}" alt="{{product.title}}" class="main-image">

{{#product.images}}
    <div class="image-item">
        <!-- Thumbnail -->
        <img src="{{#img}}{{image}}_100x100{{/img}}" 
             alt="{{alttext}}"
             class="thumbnail"
             onclick="showLarge('{{#img}}{{image}}_800x800{{/img}}')">
        
        <!-- Hidden large image URL for lightbox -->
        <data value="{{#img}}{{image}}_1200x1200{{/img}}"></data>
    </div>
{{/product.images}}

<!-- Different sizes for different screen sizes -->
<picture>
    <source media="(max-width: 480px)" 
            srcset="{{#img}}{{product.firstimage}}_300x300{{/img}}">
    <source media="(max-width: 768px)" 
            srcset="{{#img}}{{product.firstimage}}_500x500{{/img}}">
    <source media="(max-width: 1024px)" 
            srcset="{{#img}}{{product.firstimage}}_700x700{{/img}}">
    <img src="{{#img}}{{product.firstimage}}_400x400{{/img}}" 
         alt="{{product.title}}">
</picture>

Image Size Options

Size Format	Description	Use Case
`_100x100`	Square thumbnail	Product grid thumbnails
`_300x200`	Landscape card	Product cards, lists
`_400x400`	Medium square	Product detail thumbnails
`_800x600`	Large landscape	Product detail main image
`_1200x800`	Extra large	Lightbox, zoom functionality

Settings Home Elements Images

{{#settings.home_elements}}
    {{#element}}
        {{#image1_link}}
            <div class="element-image">
                <img src="{{#img}}{{image1_link}}_800x400{{/img}}" alt="{{title}}">
            </div>
        {{/image1_link}}
        
        {{#use_image2}}
            {{#image2_link}}
                <div class="element-secondary-image">
                    <img src="{{#img}}{{image2_link}}_400x300{{/img}}" alt="{{title}}">
                </div>
            {{/image2_link}}
        {{/use_image2}}
    {{/element}}
{{/settings.home_elements}}

Language Wrapper (`{{#lang}}`)

Handle multi-language content and translations via the Control Panel:

<!-- Simple text translation -->
<h1>{{#lang}}Welcome to our store{{/lang}}</h1>
<button>{{#lang}}Add to Cart{{/lang}}</button>
<p>{{#lang}}Free shipping on orders over $50{{/lang}}</p>

<!-- Translate dynamic content with context -->
<div class="product-status">
    {{#product.soldOut}}
        <span class="out-of-stock">{{#lang}}Out of Stock{{/lang}}</span>
    {{/product.soldOut}}
    
    {{^product.soldOut}}
        <span class="in-stock">{{#lang}}In Stock{{/lang}}</span>
    {{/product.soldOut}}
</div>

<div class="basket-info">
    {{#basket.isEmpty}}
        <p>{{#lang}}Your cart is empty{{/lang}}</p>
    {{/basket.isEmpty}}
    
    {{^basket.isEmpty}}
        <p>{{basket.items_count}} {{#lang}}items in cart{{/lang}}</p>
    {{/basket.isEmpty}}
</div>

<!-- Translate form elements -->
<form class="contact-form">
    <label for="name">{{#lang}}Name{{/lang}} *</label>
    <input type="text" id="name" placeholder="{{#lang}}Enter your name{{/lang}}">
    
    <label for="email">{{#lang}}Email{{/lang}} *</label>
    <input type="email" id="email" placeholder="{{#lang}}Enter your email{{/lang}}">
    
    <label for="message">{{#lang}}Message{{/lang}}</label>
    <textarea id="message" placeholder="{{#lang}}Write your message here{{/lang}}"></textarea>
    
    <button type="submit">{{#lang}}Send Message{{/lang}}</button>
</form>

<!-- Translate navigation elements -->
<nav class="main-navigation">
    {{#linklist.main}}
        <a href="{{url}}" class="nav-link {{#current}}active{{/current}}">
            {{#lang}}{{name}}{{/lang}}
        </a>
    {{/linklist.main}}
</nav>

<!-- Translate common UI elements -->
<div class="user-actions">
    {{#shop.login_active}}
        {{#user.logged_in}}
            <a href="{{user.login_url}}">{{#lang}}My Account{{/lang}}</a>
        {{/user.logged_in}}
        
        {{^user.logged_in}}
            <a href="{{user.login_url}}">{{#lang}}Log In{{/lang}}</a>
        {{/user.logged_in}}
    {{/shop.login_active}}
</div>

Assets Wrapper (`{{#assets}}`)

Link to correct paths for theme files like CSS, JavaScript, and other assets:

<!-- Link to theme CSS files -->
<link rel="stylesheet" href="{{#assets}}css/style.css{{/assets}}">
<link rel="stylesheet" href="{{#assets}}css/responsive.css{{/assets}}">

<!-- Link to theme JavaScript files -->
<script src="{{#assets}}js/main.js{{/assets}}"></script>
<script src="{{#assets}}js/cart.js{{/assets}}"></script>

<!-- Link to theme images -->
<img src="{{#assets}}images/logo.png{{/assets}}" alt="{{shop.name}}">
<img src="{{#assets}}images/placeholder.jpg{{/assets}}" alt="{{#lang}}No image available{{/lang}}">

<!-- Link to theme fonts -->
<link rel="preload" href="{{#assets}}fonts/custom-font.woff2{{/assets}}" as="font" type="font/woff2" crossorigin>

<!-- Link to theme icons -->
<link rel="icon" href="{{#assets}}images/favicon.ico{{/assets}}">
<link rel="apple-touch-icon" href="{{#assets}}images/apple-touch-icon.png{{/assets}}">

<!-- Link to other theme resources -->
<link rel="manifest" href="{{#assets}}manifest.json{{/assets}}">

Breadcrumbs Wrapper (`{{#breadcrumbs}}`)

Output breadcrumbs/category structure regardless of the current page:

<!-- Simple breadcrumb navigation -->
<nav class="breadcrumbs">
    {{#breadcrumbs}}
        <a href="{{url}}">{{title}}</a>
        {{^last}} > {{/last}}
    {{/breadcrumbs}}
</nav>

<!-- Enhanced breadcrumb navigation with styling -->
<nav class="breadcrumb-navigation" aria-label="{{#lang}}Breadcrumb{{/lang}}">
    <ol class="breadcrumb-list">
        {{#breadcrumbs}}
        <li class="breadcrumb-item {{#last}}current{{/last}}">
            {{#last}}
                <span aria-current="page">{{title}}</span>
            {{/last}}
            {{^last}}
                <a href="{{url}}">{{title}}</a>
            {{/last}}
        </li>
        {{/breadcrumbs}}
    </ol>
</nav>

<!-- Breadcrumbs with separators and icons -->
<nav class="breadcrumbs-with-icons">
    {{#breadcrumbs}}
        <span class="breadcrumb-item">
            {{^last}}
                <a href="{{url}}" class="breadcrumb-link">
                    <span>{{title}}</span>
                </a>
                <i class="breadcrumb-separator">›</i>
            {{/last}}
            {{#last}}
                <span class="breadcrumb-current">{{title}}</span>
            {{/last}}
        </span>
    {{/breadcrumbs}}
</nav>

Within the {{#breadcrumbs}} loop:

Property	Type	Description
`url`	String	Link URL for the breadcrumb item
`title`	String	Display text for the breadcrumb item
`last`	Boolean	True if this is the last (current) breadcrumb item

Asset Flags Wrapper (`{{#asset_flags}}`)

Return flag icons for languages (used within the languages loop):

{{#shop.app.languages}}
<div class="language-selector">
    <h4>{{#lang}}Choose Language{{/lang}}</h4>
    {{#shop.languages}}
    <a href="{{url}}" class="language-option">
        <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" 
             alt="{{id}}" 
             class="flag">
        {{id}}
    </a>
    {{/shop.languages}}
</div>
{{/shop.app.languages}}

{{#shop.app.languages}}
<div class="lang-switcher">
    {{#shop.languages}}
    <a href="{{url}}" class="lang-link" title="{{id}}">
        <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" alt="{{id}}">
    </a>
    {{/shop.languages}}
</div>
{{/shop.app.languages}}

{{#shop.app.languages}}
<div class="language-dropdown">
    <button class="language-toggle">
        {{#shop.languages}}
            {{#current}}
                <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" alt="{{id}}">
                {{id}}
            {{/current}}
        {{/shop.languages}}
    </button>
    
    <div class="language-options">
        {{#shop.languages}}
        <a href="{{url}}" class="language-option">
            <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" alt="{{id}}">
            {{id}}
        </a>
        {{/shop.languages}}
    </div>
</div>
{{/shop.app.languages}}

Combining Wrappers

Complete Examples with Multiple Wrappers

<div class="product-card">
    <!-- Product image with optimization -->
    <div class="product-image">
        {{#product.firstimage}}
            <img src="{{#img}}{{product.firstimage}}_300x300{{/img}}" alt="{{product.title}}">
        {{/product.firstimage}}
        {{^product.firstimage}}
            <img src="{{#assets}}images/no-image.png{{/assets}}" alt="{{#lang}}No image available{{/lang}}">
        {{/product.firstimage}}
    </div>
    
    <!-- Product information with translations -->
    <div class="product-info">
        <h3>{{product.title}}</h3>
        <p class="price">{{product.price}}</p>
        
        {{#product.soldOut}}
            <span class="status out-of-stock">{{#lang}}Out of Stock{{/lang}}</span>
        {{/product.soldOut}}
        
        {{^product.soldOut}}
            <button class="add-to-cart">{{#lang}}Add to Cart{{/lang}}</button>
        {{/product.soldOut}}
    </div>
</div>

<!DOCTYPE html>
<html>
<head>
    <title>{{seo.title}}</title>
    <meta name="description" content="{{seo.description}}">
    
    <!-- Theme assets -->
    <link rel="stylesheet" href="{{#assets}}css/style.css{{/assets}}">
    <link rel="icon" href="{{#assets}}images/favicon.ico{{/assets}}">
</head>
<body>
    <header class="site-header">
        <!-- Logo -->
        <div class="logo">
            <a href="{{shop.url}}">
                <img src="{{#assets}}images/logo.png{{/assets}}" alt="{{shop.name}}">
            </a>
        </div>
        
        <!-- Language selector -->
        {{#shop.app.languages}}
        <div class="language-selector">
            {{#shop.languages}}
            <a href="{{url}}">
                <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" alt="{{id}}">
            </a>
            {{/shop.languages}}
        </div>
        {{/shop.app.languages}}
        
        <!-- User account -->
        {{#shop.login_active}}
        <div class="account-links">
            {{#user.logged_in}}
                <a href="{{user.login_url}}">{{#lang}}My Account{{/lang}}</a>
            {{/user.logged_in}}
            {{^user.logged_in}}
                <a href="{{user.login_url}}">{{#lang}}Log In{{/lang}}</a>
            {{/user.logged_in}}
        </div>
        {{/shop.login_active}}
    </header>
    
    <!-- Breadcrumbs -->
    <nav class="breadcrumbs">
        {{#breadcrumbs}}
            <a href="{{url}}">{{title}}</a>
            {{^last}} > {{/last}}
        {{/breadcrumbs}}
    </nav>
    
    <main class="main-content">
        <!-- Page content here -->
    </main>
    
    <footer class="site-footer">
        <p>&copy; {{shop.name}}. {{#lang}}All rights reserved{{/lang}}.</p>
    </footer>
    
    <!-- Theme JavaScript -->
    <script src="{{#assets}}js/main.js{{/assets}}"></script>
</body>
</html>

Best Practices

Image Optimization

Always use the {{#img}} wrapper with appropriate dimensions for optimal performance

Translation Consistency

Wrap all user-facing text with {{#lang}} for proper multi-language support

Asset Management

Use {{#assets}} for all theme files to ensure correct paths across environments

Breadcrumb Navigation

Implement breadcrumbs for better user navigation and SEO benefits

Common Patterns

Error Handling and Fallbacks

<!-- Product image with fallback -->
{{#product.firstimage}}
    <img src="{{#img}}{{product.firstimage}}_400x400{{/img}}" alt="{{product.title}}">
{{/product.firstimage}}
{{^product.firstimage}}
    <img src="{{#assets}}images/placeholder.jpg{{/assets}}" alt="{{#lang}}No image available{{/lang}}">
{{/product.firstimage}}

<!-- Content with translation fallback -->
{{#shop.contact_text}}
    <div class="contact-content">
        {{&shop.contact_text}}
    </div>
{{/shop.contact_text}}
{{^shop.contact_text}}
    <div class="contact-content">
        <p>{{#lang}}Contact information not available{{/lang}}</p>
    </div>
{{/shop.contact_text}}

Next Steps

Global Objects

Learn how to use wrappers with global object data

Product Pages

Apply wrappers in product page templates

Template Structure

Understand how wrappers fit into overall theme architecture

Best Practices

Follow coding standards and optimization guidelines

Getting Started

Template Language

Global Objects

Page Objects

Available Wrappers

Image Wrapper (`{{#img}}`)

Image Size Options

Settings Home Elements Images

Language Wrapper (`{{#lang}}`)

Navigation and UI Translation

Assets Wrapper (`{{#assets}}`)

Asset Flags Wrapper (`{{#asset_flags}}`)

Combining Wrappers

Complete Examples with Multiple Wrappers

Best Practices

Image Optimization

Translation Consistency

Asset Management

Breadcrumb Navigation

Common Patterns

Error Handling and Fallbacks

Next Steps

Global Objects

Product Pages

Template Structure

Best Practices

​Available Wrappers

​Image Wrapper ({{#img}})

​Image Size Options

​Settings Home Elements Images

​Language Wrapper ({{#lang}})

​Navigation and UI Translation

​Assets Wrapper ({{#assets}})

​Breadcrumbs Wrapper ({{#breadcrumbs}})

​Breadcrumb Properties

​Asset Flags Wrapper ({{#asset_flags}})

​Combining Wrappers

​Complete Examples with Multiple Wrappers

​Best Practices

Image Optimization

Translation Consistency

Asset Management

Breadcrumb Navigation

​Common Patterns

​Error Handling and Fallbacks

​Next Steps

Global Objects

Product Pages

Template Structure

Best Practices

Available Wrappers

Image Wrapper (`{{#img}}`)

Image Size Options

Settings Home Elements Images

Language Wrapper (`{{#lang}}`)

Navigation and UI Translation

Assets Wrapper (`{{#assets}}`)

Breadcrumbs Wrapper (`{{#breadcrumbs}}`)

Breadcrumb Properties

Asset Flags Wrapper (`{{#asset_flags}}`)

Combining Wrappers

Complete Examples with Multiple Wrappers

Best Practices

Common Patterns

Error Handling and Fallbacks

Next Steps