index/category.template.html

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

This template contains the following references:

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.

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

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

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"