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 %}