index/category.template.html

Follow

The category template is used to display categories and sub categories.

This template contains the following references:

TermData TypeTypical OutputDescription
category.content.top html Top content, can be anything such as an intro.. HTML top category content
category.content.bottom html Bottom content to help with SEO HTML bottom category content
category.id id 7 The category Id
category.name varchar My Category The category name
category.submenu array   (See Sub Categories (array))
category.has_children int 1 Int set to 1 or 0 if the selected category has sub categories
filter.tags html <ul><li>… HTML Tag filter drop down menu..
filter.filters array   (See Filters (array))
filter.per_page html <form>.. HTML form per page filter
filter.sort html <form>.. HTML form sort by filter
filter.value.per_page int 20 The currently set number of items to show per page
filter.value.sort_by int 3 (see Sort By)
product_layout varchar list A layout setting for displaying products, such as list or grid3
pagination array   (See pagination (array))
features array   (See products (array), main_features (array) & features (array))
main_features array   (See products (array), main_features (array) & features (array))
products array   (See products (array), main_features (array) & features (array))
brands array   (See brands (array))

products (array), main_features (array) & features (array)

The products, main_features & features references allows you to display products. This reference is a recursive array containing the following references within each sub array contained within.

The products reference uses a snippet to display each product.

TermData TypeTypical OutputDescription
id int 4 The product id
link varchar http://www.yourstore/product/product_name_1.html Link to the product
link_button html <button… HTML button with link to the product
short_description varchar Short description of product Short description
buy_link varchar /add/211232_1.html HTML link to add product to basket
buy_button html <button id=”… HTML buy button w/out quantity
buy_button_image html <a href=“buy”><img src=”… HTML image button
price_ex_tax varchar £5.00 The price excluding tax formatted to the local currency
price_inc_tax varchar £5.90 The price including tax formatted to the local currency
price_was varchar £5.90 The original price formatted to the local currency
price_saved varchar £5.90 The amount saved inc tax formatted to the local currency
price_saved_percent varchar £5.90 The percentage saved over the original price
price_rrp varchar £5.90 The original RRP price formatted to the local currency
price_rrp_saved varchar £5.90 The amount saved inc tax formatted to the local currency
price_rrp_saved_percent varchar £5.90 The percentage saved over the original price
is_special boolean True / false Determines if the product is on special offer
savings_text html Youve saved x amount.. HTML savings text
tax_rate varchar 20 Tax rate in percent
name varchar Product Name Title of the product
name_short varchar Product Na.. An abbreviated title of the product
stock varchar 56 The current stock level for this product
code varchar 201224 The product code
man_code varchar DFG-45323 The manufacturers code
upc_code varchar 6346345 The UPC code
brand.name varchar Value Range The brand / manufacturers name
brand.id varchar 5 The brand id
is_free_delivery varchar True / false Determines if this product is eligible for free delivery
review_stars html <img src=”.. The html image showing review stars
review_average int 4 The average rating out of 5
review_count int 6 The total number of reviews
login_for_price boolean True / false User has to log in to view price if true
qty_prices html 100+ $5.00, 200+ $4.85.. HTML quantity prices
image_one.active boolean True / false Determines if image exists
image_one.mini varchar http://www.yourstore/images/product_images/mini/product_image.jpg Mini Image URL & Path
image_one.small varchar http://www.yourstore/images/product_images/small/product_image.jpg Small Image URL & Path
image_one.thumb varchar http://www.yourstore/images/product_images/thumb/product_image.jpg Thumb Image URL & Path
image_one.main varchar http://www.yourstore/images/product_images/main/product_image.jpg Main Image URL & Path
image_one.large varchar http://www.yourstore/images/product_images/large/product_image.jpg Large Image URL & Path
image_two.active boolean True / false Determines if image exists
image_two.mini varchar http://www.yourstore/images/product_images/mini/product_image2.jpg Second Image URL & Path
image_two.small varchar http://www.yourstore/images/product_images/small/product_image2.jpg Second Image URL & Path
image_two.thumb varchar http://www.yourstore/images/product_images/thumb/product_image2.jpg Thumb Image URL & Path
image_two.main varchar http://www.yourstore/images/product_images/main/product_image2.jpg Second Image URL & Path
image_two.large varchar http://www.yourstore/images/product_images/large/product_image2.jpg Second Image URL & Path
image_three.active boolean True / false Determines if image exists
image_three.mini varchar http://www.yourstore/images/product_images/mini/product_image3.jpg Third Image URL & Path
image_three.small varchar http://www.yourstore/images/product_images/small/product_image3.jpg Third Image URL & Path
image_three.thumb varchar http://www.yourstore/images/product_images/thumb/product_image3.jpg Third Image URL & Path
image_three.main varchar http://www.yourstore/images/product_images/main/product_image3.jpg Third Image URL & Path
image_three.large varchar http://www.yourstore/images/product_images/large/product_image3.jpg Third Image URL & Path
image_four.active boolean True / false Determines if image exists
image_four.mini varchar http://www.yourstore/images/product_images/mini/product_image4.jpg Fourth Image URL & Path
image_four.small varchar http://www.yourstore/images/product_images/small/product_image4.jpg Fourth Image URL & Path
image_four.thumb varchar http://www.yourstore/images/product_images/thumb/product_image4.jpg Fourth Image URL & Path
image_four.main varchar http://www.yourstore/images/product_images/main/product_image4.jpg Fourth Image URL & Path
image_four.large varchar http://www.yourstore/images/product_images/large/product_image4.jpg Fourth Image URL & Path

Usage

{% extends "tekkie_twig.html" %}
{% block content %}
{{ cat_trail|raw }}<hr />
<h1>{{ category.name }}</h1>
{% if category.content.top|raw %}<p>{{ category.content.top }}</p>{% endif %}
<hr /><br />
<!-- START: COLUMN RIGHT -->
<div class="panelContainer">
    <div class="leftPanel">
        {% if category.submenu %}
        <!-- Brand Filter Start -->
        <div class="brandFilter">
            <div class="brandFilterLeft">Sort by Sub Cat</div>
            <div class="brandFilterRight">
                <table width="100%">
                    <tr>
                        <td>
                            <ul>
                                {% for category in category.submenu %}
                                {% include "snippets/category.snippet.html" %}
                                {% endfor %} 
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- End Brand Filter -->
        {% endif %}
 
        {% if category.submenu == false %}
 
        {% if filter.tags %}
        <!-- Tag Filter Start -->
        <div class="tagFilter">
            <div class="tagFilterLeft">Sort by Feature</div>
            <div class="tagFilterRight">
                {{ filter.tags|raw }}
            </div>
        </div>
        <!-- Tag Filter End -->
        {% endif %}
        {% if filter.brand %}
        <!-- Brand Filter Start -->
        <div class="brandFilter">
            <div class="brandFilterLeft">Sort by Brand</div>
            <div class="brandFilterRight">
                {{ filter.brand|raw }}
            </div>
        </div>
        <!-- End Brand Filter -->
        {% endif %}
        <!-- Page Sort Filter -->
        <div class="sortFilter">
            <div class="sortFilterLeft">Sort by Term</div>
            <div class="sortFilterRight">
                {{ filter.per_page|raw }}
                {{ filter.sort|raw }}
            </div>
        </div>
 
        {% endif %}
 
        {% if category.submenu %}
        <hr />
        <p>Products found in {{ category.name }}</p>
        <div class="featureContainer">
            {% for product in features %}
            {% include "snippets/products.snippet.html" %}
            {% endfor %} 
        </div>
 
        {% endif %}
 
        {% if category.submenu == false %}
        <hr /><div class="featureContainer">
            {% for product in products %}
            {% include "snippets/products.snippet.html" %}
            {% endfor %} 
            <div class="pageNav">{{ page_nav|raw }}</div>
        </div>
        {% endif %}
 
        {% if category.content.bottom %}    
        <div style="float:left;margin:-10px 0 15px 0;padding: 10px; background: #f4f4f4; width:690px">
            <h3>About {{ page_title }} at {{ store_name }}</h3>
            <p style="line-height:1.3em;">
                {{ category.content.bottom|raw }}
            </p>
        </div>
        {% endif %}
    </div> 
    <!-- START: COLUMN RIGHT -->
    <div class="rightPanel">  
        {% include "snippets/right.snippet.html" %}
    </div> 
    <div class="clear"></div>
</div>
<hr /><br />
<!-- END: Right Column -->      
<!-- END: ContentBody -->
{% endblock content %}

 

 

Brands Array

The brands array allows you to filter category pages by brand. You can do this in many ways, such as using HTML menus or a drop down select box as shown in the example below:-

<script>
                    $(function() {
                        // Control Brand Filter
                        $('#filter-brand').bind('change', function() {
                            var url = $(this).val(); // get selected value
                            if (url !== 'Arrange by Brand') { // require a URL
                                window.location = url; // redirect
                            }
                            return false;
                        });
                     });
</script>
                    <form name="brands" method="post" action="{{ current_uri }}">
                        <select id="filter-brand" name="filter-brand" class="form-control form-control-sort text-xs">
                            <option>Arrange by Brand</option>
                            {% for brand in filter.brands %}
                            <option value="{{ brand.link }}"{% if brand.is_selected %} SELECTED{% endif %}>{{ brand.name }}</option>
                            {% endfor %}
                        </select>
                    </form>

 

Sub Categories (array)

Sub Categories (array) is an associative array of categories that have been associated with the parent category you are currently viewing. This allows a user to browse sub categories from a drop down menu or html list based menu.  Once the submenu has no more categories to show, it will by default show categories of the same level as the category you are viewing.  You can choose to only display the submenu if category.has_children is set.

{% if category.has_children %}
<div class="span2">
    <div class="tag-filter-title text-black text-small">
        <strong>Type</strong>
    </div>
    <ul>
        {% for category in category.submenu %}
        {% if category.count > 0 %}
        <li>
            <div class="filter-checkbox">
                <input type="checkbox" value="1" id="catCheckbox{{ category.id }}" name="" class="catLink" data-url="{{ category.link|raw }}" />
                <label for="catCheckbox{{ category.id }}"></label>
            </div>
            <div class="filter-label">
                <a href="{{ category.link|raw }}" title="Browse {{ category.title }}">{{ category.title }} ({{ category.count }})</a>
            </div>
        </li>
        {% endif %}
        {% endfor %}
    </ul>
</div>
{% endif %}

 

Filters (array)

Filters is an associative array of Tag Groups and Tags that have been assigned to both products and categories. This allows a user to refine their search based on the options they select.

{% set filterCount = 0 %}
 
{% for filter in filter.filters %}
{% if filter.count %}
 
{% set filterCount = filterCount + 1 %}
 
{% set tagCount = 0 %}
 
{% set tagTotal = filter.tags|length %}
 
<div class="tag-filter-title text-black text-small">
    <strong>{{ filter.name }}</strong>
</div>
 
{% for tag in filter.tags %}    
{% set tagCount = tagCount + 1 %}
 
{% if tagCount == 1 %}<ul style="vertical-align: top">{% endif %}
    {% if tag.count %} 
    <li>
        <div class="filter-checkbox">
            <input type="checkbox" value="1" id="tagCheckbox{{ tag.id }}" name="" class="tagLink" rel="{{ tag.id }}" />
            <label for="tagCheckbox{{ tag.id }}"></label>
        </div>
        <div class="filter-label">
            <a href="#" class="tagLink" rel="{{ tag.id }}">{{ tag.name }} {% if category.id != '53' %}({{ tag.count }}){% endif %}</a> <span id="tagSelected{{ tag.id }}"></span>
            <!-- <input type="checkbox" value="{{ tag.id }}" class="tag_id[]" /> -->
        </div>
    </li>
    {% else %}
 
    <li>
        <div class="filter-checkbox" style="opacity:0.3;">
            <input type="checkbox" value="1" id="tagCheckbox{{ tag.id }}" name="" class="tagLink" rel="{{ tag.id }}"  disabled="disabled" />
            <label for="tagCheckbox{{ tag.id }}"></label>
        </div>
        <div class="filter-label" style="opacity:0.3;">
            {{ tag.name }} <span id="tagSelected{{ tag.id }}"></span>
            <!-- <input type="checkbox" value="{{ tag.id }}" class="tag_id[]" /> -->
        </div>
    </li>
    {% endif %}
    {% if tagCount == 7 and tagCount < tagTotal %}</ul><ul>{% elseif tagCount == tagTotal %}</ul>{% endif %}
{% endfor %}
 
 
{% endif %}
{% endfor %}

 

Creating a Sort By HTML drop down

The following HTML shows you how to create a drop down sort by box, and associated jQuery to control it.

<script>
                    $(function() {
                        // Control Sort By Filter
                        {% if(filter.value.sort_by) %}
                        console.log('{{ filter.value.sort_by }}');
                        $('#sortBy').val('{{ filter.value.sort_by }}'); // selects "Two"
                        {% endif %}
                        $('#sortBy').change(function() {
                            this.form.submit();
                        });
                     });
</script>
                    <form name="sortBy" method="post" action="{{ current_uri }}">
                        <input type="hidden" name="action" value="sortBy">
                        <select id="sortBy" name="sortBy" class="form-control form-control-sort text-xs">
                            <option value="1">Alphabetical (A-Z)</option>
                            <option value="2">Alphabetical (Z-A)</option>
                            <option value="3" SELECTED>price (Lowest)</option>
                            <option value="4">price (Highest)</option>
                            <option value="5">Latest Products</option>
                            <option value="6">Popularity</option>
                        </select>
                    </form>


The pagination array allows you to display a page navigation toolbar. This reference is a associative array containing a recursive sub array in "pagination.pages"

TermData TypeTypical OutputDescription
showing.from int 1 The product results count we are showing from for the current page
showing.to int 20 The product results we are showing to for the current page
showing.of int 36 The total number of products across all pages
showing.page int 1 The current page we are viewing
perpage int 20 The number of product set to show per page
total int 2 The total number of pages in the current set
pages array   Contains a recursive array of pages with the following keys: "no", "url", "current". Where no = page number, url = the link to the page, and current is either true or false to say we are currently viewing this page.

Usage

<p class="text-xs">
{% if pagination.showing.page > 1 %}
    <a href="{{ pagination.url.prev }}"><< Prev Page</a>
{% endif %}

{% set count = 0 %}
{% for page in pagination.pages %}
{% set count = count + 1 %}

    <!-- Show Page 1 -->
{% if count == 1 and pagination.showing.page > 3 %}|
    <a href="{{ page.url }}" {% if page.current %}class="text-500"{% endif %}>{{ page.no }}</a>
{% if pagination.showing.page > 4 %}
    ...
{% endif %}
    |
{% endif %}

    <!-- Show first 3 pages and last 3 pages, with a void in between -->
{% if ((count < (pagination.showing.page + 3))) %}
{% if ((pagination.showing.page - 3 < count) and (count < pagination.total)) %}
    <a href="{{ page.url }}" {% if page.current %}class="text-500"{% endif %}>{{ page.no }}</a> |   
{% endif %}
{% endif %}

    <!-- Show last page -->
{% if count == pagination.total and count > 1 %}
{% if (pagination.showing.page < (pagination.total - 3)) %}
    ...
{% endif %}
    <a href="{{ page.url }}" {% if page.current %}class="text-500"{% endif %}>{{ page.no }}</a> |   

{% endif %}
{% endfor %}


{% if pagination.showing.page < pagination.total %}
    <a href="{{ pagination.url.next }}">Next Page >></a>
{% endif %}
</p>
 
Have more questions? Submit a request

Comments

Powered by Zendesk