Page variables

Cart

Variable

Description

cart

Cart instance

returnUrl

Url to return after checkout

Example:

{% for cartModel in cart %}
    <tr class="removable product-cart container-index-{{ cartModel.id }}"
        data-price="{{ cartModel.positionPrice }}">
        <td width="90">
            <div class="product-img">
                {% if(cartModel.positionImage) %}
                    {{ html.img(cartModel.positionImage.imageUrl) | raw }}
                {% endif %}
            </div>
        </td>
        <td class="product-details-col">
            <div class="product-details">
                <div class="product-name">{{ cartModel.product.title }}</div>
                <div class="product-price">
                    {{ currency }}
                    <span class="product-price-initial"></span>
                </div>
                {% if(cartModel.isMultiVariant) %}
                    <div class="combo-text-{{ cartModel.id }}">{{ cartModel.combination.text }}</div>
                {% endif %}
            </div>
        </td>
        <td>
            <div class="form-group mb0">
                <input type="text" data-id="{{ cartModel.id }}"
                       class="small product-quantity numbers-only"
                       value="{{ cartModel.quantity }}"/>
            </div>
        </td>
        <td class="product-price-col">
            <div class="product-price">
                {{ currency }}
                <span class="product-price-final"></span>
            </div>
        </td>
        <td>
            <button type="button pull-right" data-id="{{ cartModel.id }}"
                    class="btn-rounded _action-remove">
                <i class="fa fa-close"></i>
            </button>
        </td>
    </tr>
{% endfor %}

Collection page

Variable

Descriptin

collection

current collection (Collections instance)

Example:

{{ set(this, 'title', collection.title) }}

        <div class="page-head">
            <div class="dropdown-block">
                <span class="_heading">{{ collection.title }}</span>
            </div>
        </div>

Product page

Variable

Description

product

current product (Products instance)

shippingZone

ShippingZones instance

Examples:

<div class="col-sm-5 v-cell top _left">
    <div class="product-slider fotorama" id="fotorama" data-nav="thumbs" data-auto="false">
        {% for image in product.images %}
            <a href="{{ image.imageUrl }}"><img src="{{ image.imageUrl }}" class="img-responsive" height="80"></a>
        {% endfor %}
    </div>
</div>
{% if product.variants %}
<div class="product-features-jquery">

    {% for variant in product.allVariants %}
        {% if product.options|length > 0 %}
            <div class="v-table pill">
                <div class="v-row">
                    <div class="v-cell pill-name middle">{{ variant.variant }}</div>
                    <div class="v-cell pill-content middle">
                        <div class="select simple">
                            {% if variant.selectorType == "dropdown" %}
                                <select data-variant="{{ loop.index0 }}"
                                        class="product-{{ variant.variant|replace({' ': ''})|lower }}-select product-select"
                                        title="">
                                    {#{% for option in variant.variantOptions %}
                                        <option value="{{ option.option }}">{{ option.option }}</option>
                                    {% endfor %}#}
                                </select>
                            {% else %}
                                <div class="product-colors product-{{ variant.variant|replace({' ': ''})|lower }}-round">
                                    {% for option in variant.variantOptions %}
                                        <button type="button" data-variant="{{ loop.parent.loop.index0 }}"
                                                data-option="{{ option.option }}"
                                                class="btn-rounded product-color"
                                                style="{% if option.thumbnail.image %}background-image: url('{{ option.thumbnail.imageUrl }}');{% else %}background-color: {{ option.thumbnail.color }}{% endif %}"></button>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}

</div>
{% endif %}
{% if shippingZone %}
    Shipping to {{ app.session["regionName"] }}, {{ app.session["countryName"] }} by {{ shippingZone.description }} - {{ currency }}{{ shippingZone.rate }}
{% else %}
    This product does not ship to {{ app.session["regionName"] }}, {{ app.session["countryName"] }}
{% endif %}
{% if product.textareaModels %}
<div class="product-bottom-block">
    <div class="tabs">
        <ul class="tabs-control" role="tablist">
            {% for textarea in product.textareaModels %}
                <li {% if loop.index == 1 %} class="active" {% endif %}>
                    <a href="#tab-{{ loop.index }}" data-toggle="tab">{{ textarea.name|raw }}</a>
                </li>
            {% endfor %}
        </ul>
        <div class="tab-content">
            {% for textarea in product.textareaModels %}
                <div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %} in active {% endif %}" id="tab-{{ loop.index }}">
                    <div class="typography">{{ textarea.text | raw }}</div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

Thank you page (after order is completed)

Use this to add data to your tracking pixel on the thank you page

Variable

Description

order

Gives you access to the order information

Order ID:
{{ order.display_number }}

Total price:
{{ order.total }}

Product titles:
{% for product in order.orderProducts %} {{ product.title }} {% endfor %}