product/productdetail.template.html

This template is used to display product information in detail.

<div class="leftPanel">
    <div class="productDetail">
        <div class="productDetailImages">
            <a class="menuPopup" rel="gallery" href="{{ product.image_one.large|raw }}" title="{{ product.name|raw }}"><img src="{{ product.image_one.main|raw }}" alt="{{ product.name|raw }}" /></a>
            <div class="miniImages" >
                {% if product.image_two.active %}
                <a class="menuPopup" rel="gallery" href="{{ product.image_two.large|raw }}" title="{{ product.name|raw }} Image Two" ><img src="{{ product.image_two.mini|raw }}" border="0" alt="{{ product.name|raw }}" /></a>
                {% endif %}
                {% if product.image_three.active %}
                <a class="menuPopup" rel="gallery" href="{{ product.image_three.large|raw }}" title="{{ product.name|raw }} Image Three" >&nbsp;&nbsp;&nbsp;<img src="{{ product.image_three.mini|raw }}" border="0" title="{{ product.name|raw }}" alt="{{ product.name|raw }}" /></a>
                {% endif %}
                <br />
            </div>
            <table cellpadding="0" cellspacing="0" id="productDetailTable" width="280">
                <tr>
                    <td><p>
                            <span class="priceLarge">Price: {{ product.price_inc_tax|raw }}</span> 
                            <span class="priceSmall">inc. VAT</span><br />
                            <span class="priceSmall">({{ product.price_ex_tax|raw }}</span>
                            <span class="priceSmall">ex. VAT)</span><br />
                            <span class="priceSmall">{{ stock_label }}</span>
                        </p>
                        {{ product.savings_text|raw }}
                        <div class="buy">
                            {{ product.buy_button|raw }}
                        </div>
                    </td>
                </tr>
                {% if product.review_count > 0 %}
                <tr>
                    <td><a class="menuPopup" href="ajaxPhp/phpServer.php?action=getProductReviews&amp;={{ product.id }}&amp;showButton=0" title="Product Reviews">{{ product.review_starts|raw }}</a></td>
                </tr>
                {% endif %}
            </table>
        </div>
        <div class="productRight">
 
            <div class="productDescription">
                {{ product.description|raw }}
            </div>
            <div class="productShare">
                <div class="productFacebook">
                    <iframe src="http://www.facebook.com/plugins/like.php?app_id=127264777352678&amp;href={{ store_url|url_encode() }}{{ current_uri|url_encode() }} &amp;send=false&amp;layout=box_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:90px;" allowTransparency="true"></iframe>
                </div>
                <div class="productAddthis">
                    <!-- AddThis Button BEGIN -->
                    <div class="addthis_toolbox addthis_default_style">
                        <a class="addthis_button_preferred_1"></a>
                        <a class="addthis_button_preferred_2"></a>
                        <a class="addthis_button_preferred_3"></a>
 
                        <a class="addthis_button_preferred_4"></a>
                        <a class="addthis_button_compact"></a>
                        <a class="addthis_counter addthis_bubble_style"></a>
                    </div>
                    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
                    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d911e6078fa72a8"></script>
                    <!-- AddThis Button END -->
                </div>
 
            </div>
        </div>
    </div>
 
    {% if tags_list %}
    <div style="margin-top:20px; padding:8px;">
        <p><strong>Popular Tags associated with the Product (click to find compatible or similar items).</strong></p>
        {{ tags_list }}
    </div>  
    {% endif %}
    <div style="float:left" width:690px">
         <hr />
        <h2>Other Items that may interest you...</h2>
        <div class="featureContainer">
            {% for product in alternative_products %}
            {% include "snippets/products.snippet.html" %}
            {% endfor %} 
        </div>
    </div>
</div>

This array accesses a set of options available to the product. These options are controlled via Product Sets in the control panel, and allows a customer to choose from say 3 different colours or sizes of the same product. You will need to be able to build some new data loops to access this information and then display it with HTML. If you want to use a pre-formatted options list, please see options_html above.

Each Choices array contains the following.

{% for option in product.buy.options %}
<select name="productSet[]">
<option value="0">Choose {{ option.name }}</option>
{% for choice in option.choices %}
<option value="{{ choice.value }}">{{ choice.name }}</option>
{% endfor %}
</select><br />
{% endfor %}

This array accesses a set of product set members available to the product (which will be a master product in the set). These products are controlled via Product Sets in the control panel, and allows a customer to choose from say 3 different colours or sizes of the same product. You will need to be able to build some new data loops to access this information and then display it with HTML. If you want to use a pre-formatted options list, please see options_html above.

{% if product.id == '2689' %}
{% for product in product.buy.products %}
<p>
<a href="{{ product.link }}">{{ product.name }}</a> {{ product.price_ex_tax|raw }} <button onclick="location.href='{{ product.buy_link }}';">Buy</button>
<br />
   {% for tag in product.tags %}
       Features: {{ tag.name }}   
   {% endfor %}
</p>
{% endfor %}
{% endif %}

This array accesses a list of product reviews which you can cycle through and render using HTML.

Each product.reviews variable is an array containing the following.

{% if product.reviews %}
<div class="row">
    {% for review in product.reviews %}
    <div class="span7">
        <div class="padding-20">
            <p class="text-extra-medium">{{ review.title|raw }}</p>
            <p>{{ review.body | replace({"\n":"<br />"})}}</p>
        </div>
    </div>
    <div class="span4">
        <div class="padding-20">
 
            <p>
                <span class="text-small">Written By {{ review.name|raw }} on {{ review.date.created }}</span>
            </p>
            <img src="images/review/{{ review.rating }}-stars.gif" width="116" height="20" />
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

This array accesses a list of product tags assigned to a product which you can cycle through and render using HTML. You will need to make sure any tags are associated with a tag group.

Each product.tags variable is an array containing the following.

{% if tags %}
<div class="padding-7">
    <table>
        <tr>
            <td class="text-small padding-top-5">Product Code</td>
            <td>&nbsp;&nbsp;</td>
            <td class="text-small padding-top-5 code">
                {{ product.code }}
            </td>
        </tr>
        {% for tag in tags|sort %}
        {% set tagIgnore = ['Box Size (LxWxD)','Min Bar Pressure','Shower Head Size','Stocked','Handset Type','Instruction Booklet 1','Instruction Booklet 2'] %}
        {% if tag.tag_group.name not in tagIgnore and tag.tag_group.name != '' %}
        {# if tag.tag_group.name != 'Box Size (LxWxD)' and product.category not in [25,27,28,29,30,31,32,33] #}
        <tr>
            <td class="text-small padding-top-5">{{ tag.tag_group.name }}</td>
            <td>&nbsp;&nbsp;</td>
            <td class="text-small padding-top-5">
                {% if tag.tag.name  == 'See water pressure guide' %}
                <a href="/water-pressure-guide.html" title="Water Pressure Guide">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Sold separately' %}
                <a href="/d/Accessories_51.html" title="Accessories and Wastes">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Argo' %}
                <a href="/d/Argo_8.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Cyclo' %}
                <a href="/d/Cyclo_19.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Koyo' %}
                <a href="/d/Koyo_9.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Iso' %}
                <a href="/d/Iso_10.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Marino' %}
                <a href="/d/Marino_11.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Taboo' %}
                <a href="/d/Taboo_12.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Cento' %}
                <a href="/d/Cento_13.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Tanto' %}
                <a href="/d/Tanto_14.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Vedo' %}
                <a href="/d/Vedo_15.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Timo' %}
                <a href="/d/Timo_17.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Modo' %}
                <a href="/d/Modo_18.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% elseif tag.tag.name  == 'Chao' %}
                <a href="/d/Chao_20.html" title="See the {{ tag.tag.name }} Collection">{{ tag.tag.name }}</a>
                {% else %}
                {{ tag.tag.name }}
                {% endif %}
                <br />
            </td>
        </tr>
        {# endif #}
        {% endif %}
        {% endfor %}
    </table>
</div>
{% endif %}

This array accesses a list of attribute groups and their attributes available to the product. These options are controlled via Product attributes in the control panel, and allows a customer to choose from product add ons such as more memory for a custom computer. You can link attributes to products in your catalog, allowing you to pull in the price of that item when a customer adds the master product to the basket. You will need to be able to build some new data loops to access this information and then display it with HTML.

Each attribute_groups variable is an array containing the following.

Each attributes array contains the following.

You can make many variations of Attribute lists, including radio checkbox attribute lists, Tabbed attribute lists or simple checkbox attribute lists.

Below we have an example of a radio list attribute selection.

   {% if attribute_groups %}
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                {% for ag in attribute_groups %}
                <tr><td><h3>
                            Choose {{ ag.name }}
                        </h3>
                        <table cellpadding="4" cellspacing="0" border="0" width="100%">
                            {% for attribute in ag.attributes %}
                            <tr>
                                <!-- <td>{{ attribute.qty }} X</td> -->
                                <td width="70%">{{ attribute.name }}</td>
                                <td>{% if attribute.price_raw > 0 %} + {{ attribute.price|raw }} {% endif %}</td>
                                <td>{% if attribute.product.id %} [ {{ attribute.product.stock }}  In Stock] {% endif %}</td>
                                <td><input type="radio" id="{{ attribute.id }}" name="attributes[{{ ag.id }}]" value="{{ attribute.id }}" {% if attribute.count == 1 %}checked{% endif %}></td>
                            </tr>
                            {% endfor %}
                        </table></td></tr>
                {% endfor %}
                </tr>
            </table>
            {% endif %}

Alternatively you can set them up as a HTML dropdown option list

{% if attribute_groups %}
{% for ag in attribute_groups %}

<div class="div-XX"></div>
<div class="row">
    <div class="col-sm-2">
        <h4 class="font-sm font-blue">
            &nbsp;<strong>Choose {{ ag.name }}</strong>
        </h4>
    </div>
    <div class="col-sm-4">
        <select id="attributes[{{ ag.id }}]" name="attributes[{{ ag.id }}]" class="form-control">
            {% for attribute in ag.attributes %}
            <option value="{{ attribute.id }}" {% if attribute.count == 1 %}selected{% endif %}>
                    {{ attribute.name }} 
                    {% if attribute.price_raw > 0 %}&nbsp; + {{ attribute.price|raw }} {% endif %}
        </option>
        {% endfor %}
    </select>
</div>
</div>
<div class="div-XX"></div>
<div class="page-div"></div> 

{% endfor %}
{% endif %}

The related_products & alternative_products reference allows you to display products that relate to the brand. This reference is a recursive array containing the following references within each sub array contained within products.

The related_products reference uses a snippet to display each product.