What are Template Snippets

Snippets are small chuncks of re-usable code that you can use to display loops of data or naviation elements within your website. All our snippets reside in the snippets folder found within the template folder. You can create as many snippets as you like. Any snippet you use / include within a template has access to all the global and local references available to that particular template.

Heres an example of a snippet called latestProducts.snippet.html used to display some new products

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

And heres an example or a snippet called right.snippet.html for displaying a right naviation column which uses even more re-usable snippets within.

<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 "snippets/latestProducts.snippet.html" %}
        {% endfor %}  
    </ul>
</div>
{% endif %} 
{{ banners_right }}

To use a snippet file within a template file, simply use an include statement. This can be done to display recently viewed products by looping through an array reference for example:

{% for product in recent_products %}
{% include "snippets/latestProducts.snippet.html" %}
{% endfor %}

Remember, You dont have to use snippets just for arrays, you can use them to display anything, for example, going back to our right column snippet, this is how it would be included in our main template file.

<!-- START: COLUMN RIGHT -->
  <div class="rightPanel">  
    {% include "snippets/right.snippet.html" %}
  </div> 
<!-- END: COLUMN RIGHT -->