Template Global Variables & Components

Instantcart uses a series of variables that call data into your template files. The following tables contain variables Instantcart supports for each template. Some variables are global and can be used accross your site in any template file, and some are private and can only be used for a specific template.

To view our PDF Template crib sheet, please visit http://www.instantcart.com/docs/Instantcart-Template-Crib-Sheet-0815.pdf

The following table contains variables you can use in any .html template file.

An array of store information that can be used to display the store address, phone number, as well as access social and regional settings.

The breadcrumb array allows you to access the historic navigation path for a category or product. For example:-

Home » Category One » Sub Category » Product Code

Usage:

<div class="navigation">
  <h1>{{ category.name }}</h1>
    <p><a href="/">Home</a> >> {% for cat in breadcrumb %}<a href="{{ cat.url }}">{{ cat.name }}</a> {% if cat.last == false %} >> {% endif %} {% endfor %}</p>
</div>

Usage:

{% if user.is_logged_on %}
  Welcome back {{ user.firstname }}
  <a href="/account.php" title="My Account">My Account</a>
{% else %}
  <a href="/login" title="Sign In">Sign In</a>
{% endif %}

Useage:

<a href="/basket"> Basket {{ basket.total|raw }} ({{basket.count}})</a>

The setting array contains references to data set in the Intstantcart control panel. This can be anything from color settings to the logo used on your website. Each reference can be accessed as listed from the table below.

As an example, you would use the following syntax to display your store logo.

<div class="headerLogo">
    {% if setting.image_logo %}
    <a href=""><img src="pics/{{ setting.image_logo }}" border="0" alt="{{ store_name }}" /></a>
    {% else %}
    <h3><a href="/">{{ store_name }}</a></h3>
    {% endif %}
</div>

The categories array contains references to the categories for your site.

As an example, you would use the following syntax to display your store logo.

<ul>
  {% for category in categories %}
  <li><a href="{{ category.url }}">{{ category.name }}<br><img src="{{ category.image }}" title="{{ category.name }}"></a></li> 
  {% endfor %} 
</ul>

Page tabs allow you to use the functionality of the page tabs section (under the control panel) within your website. The page_tabs reference is a recursive array containing the following references within each sub array of page_tabs.

To access these varables using Twig, you would use the following syntax

{% for tab in page_tabs %}
{% if tab.tabs_new_window %}
{% set new_window = "target=\"_blank\"" %}
{% endif %}
{% if current_uri in tab.tabs_url or current_path in tab.tabs_url %}
{% set tabs_class = "class=\"on\"" %}
{% endif %}
<li {{ tabs_class }}><a href="{{ tab.tabs_url }}" {{ new_window }}>{{ tab.tabs_name }}</a></li>
{% endfor %}

You can also use sub page tabs too. This is a new feature we have added so you can create tabs within tabs.

Here's and example:-

                <div class="navigation">
                    <ul class="nav">
                        {% set count = 0 %}
                        {% set length = page_tabs|length %}
                        {% for tab in page_tabs %}
                        {% set count = count + 1 %}
                        {% if tab.new_window %}
                        {% set new_window = "target=\"_blank\"" %}
                        {% endif %}
                        <li class="{% if length == count %}last{% elseif count == 1 %}first{% endif %}{% if current_uri == tab.url %} active{% else %}{% for tab in tab.sub_tabs %}{% if current_uri in tab.url %} active{% endif %}{% endfor %}{% endif %}"><a class="tab_{{ tab.id }}" {% if tab.url != '#' %}href="{{ tab.url }}"{% endif %}{{ new_window }}> {{ tab.name }} <b class="caret {% if count == 1 %}on{% else %}off{% endif %}">&nbsp;</b></a> 
                         <ul>
                                {% set sub_count = 0 %}
                                {% set sub_length = tab.sub_tabs|length %}
                                {% for tab in tab.sub_tabs %}
                                {% set sub_count = sub_count + 1 %}
                                <li {% if current_uri in tab.url %}class="active"{% endif %}><a href="{{ tab.url }}" {{ new_window }}> {{ tab.name }} &nbsp;&nbsp;{% if sub_count < sub_length %}&bull;{% endif %} </a></li>
                                {% endfor %}
                        </ul>
                        </li> 
                        {% endfor %}
                    </ul>
                </div>

Banners allows you to access banners added via the control panel. You can access left, top, and right banners using the same format as below.  When using this array on a category page, banners will only show if a user has chosen to associate the banner with a particular category:-

To access these varables using Twig, you would use the following syntax

<div class="banners">
    {% for banner in banners.right %}
    <a href="{{ banner.link }}" title="{{ banner.title }}"><img src="pics/adverts/{{ banner.file }}" border="0" alt="{{ banner.title }}" /></a>
    <br /><br />
    {% endfor %}
</div>

The news reference allow you to display top news story summaries on your site. The news reference is a recursive array containing the following references within each sub array of news.

To access these varables using Twig, you would use the following syntax

{% for item in news %}
<h2>{{ item.title }}</h2>
<p>Posted on {{ item.date }}</p>
{% endfor %}

You can of course manipulate this data in any way you like, for example you could create a scrolling news ticker in ajax or Jquery based on the news array.

The recent_products, special_offers, recent_products & best_sellers references allow you to display products that have recently been viewed by a user. These references are recursive arrays containing the following references within each sub array contained within.

Usage syntax example using a snippet (snippet/right.snippet.html):

<h3>What's New?</h3><p>Find out whats new at our store</p>
<div id="latestProducts"><ul>
        {% for product in latest_products %}
        {% include "snippets/latestProducts.snippet.html" %}
        {% endfor %}  
    </ul>
</div>
{% if recent_products %}
<h3>What I've just Seen</h3><p>Catch up on items you have previously seen</p>
<div id="recentBox"><ul>
        {% for product in recent_products %}
        {% include "snippet/latestProducts.snippet.html" %}
        {% endfor %}  
    </ul>
</div>
{% endif %}
{{ banners_right }}

To display these products, we use a snippet that we have named latestProducts.snippet.html, however this snippet can be used to display any product reference, such as recent_products, special_offers & best_sellers or any reference that uses the supported terms listed in the above table.

Useage syntax example for (snippets/latestProducts.snippet.html)

<li>
    <a href="{{ product.link }}"><img src="{{ product.image_thumb|raw }}"  width="100" height="100" border="0" alt="{{ product.name }}" /></a><br />
    <p><a href="{{ product.link }}">{{ product.name }}</a></p>
    <span class="price">{{ product.price_inc_tax|raw }}</span>
</li>

The reviews reference allow you to display top product reviews summaries on your site. The reviews reference is a recursive array containing the following references within each sub array of news.

To access these varables using Twig, you would use the following syntax

{% for review in reviews %}
<h2>Review for {{ review.name }}</h2>
<p>User rating of {{ review.rating }} out of 5</p>
{% endfor %}

Image paths can be accessed directly by using the references in the table below.

To access these varables using Twig, you would use the following syntax. Please note, this example is based on an additional reference used in productdetail.template.html which is a local reference to this file.

<img src="{{ image_path.product.thumb }}{{ product.image.one_thumb }}" title="My Image" />

Messages accesses the error message system, so you can print any pending messages to your template. The messages reference is a recursive array containing the following references within each sub array of messages.

To access these varables using Twig, you would use the following syntax.

{% for message in messages %}
{# Type is error or success #}
<div id="message_banner_{{ message.type }}"><p>{{ message.body }}</p></div>
{% endfor %}