Display Category List

LemonStand provides a robust and user-friendly approach to displaying lists of product categories on your site. This functionality makes a task that would of required skilled planning on the part of the developer easy and intuitive.

Whereas in the past you would have to consider things like the output of nested/child categories when building your list, LemonStand now provides you everything you need in an easy to use syntax.

For an example of category lists in action, let's look at how the Happy Hour theme is outputting the category list sidebar menu on the category pages. You can see the category list sidebar highlighted in red:


If you open up the Category page in the backend of your store you will see that the category page calls on a partial named shop-categories to be rendered as part of every category page. This should be at about line 5 in the content area for the category page.

<div>
   <h3>Categories</h3>
   {{ partial('shop-categories') }}
</div>

In this case we are rendering the category list as part of a partial, but this is not strictly required, the beauty of the category list implementation is you can output category lists anywhere on your site.

Let's now open the shop-categories partial to have a look at exactly how we are outputting the category lists. Go to the partials section in your backend and open the shop-categories partial. In the content are of this partial you will see the following code:

{% tree categories %}
    <ul>
        {% for category in tree.items %}
            <li>
                <a href="/category/{{ category.url_name }}">{{ category.name }}</a>
                {% branch category.children %}
            </li>
        {% endfor %}
    </ul>
{% endtree %}

As you can see, the snippet of code starts with the {% tree %} tag, which will accept the category list as an argument by defining the tag as {% tree categories %}. The categories variable is global and always available. The **tree** variable inside the {% tree %} tag contains a number of parameters, including **items** – a list of categories of the current level and **children** - a list of the current category children.

Next, we have defined a for loop which will iterate through the category items available at the parent level category, and then output list items for each category found.

{% for category in tree.items %}

The example also provides the syntax for outputting child categories when iterating through the for loop. This is done using the {% branch %}tag, which accepts the list of subcategories. This tag, in turn, renders the tree again, but this time it uses subcategories as an input. The process continues until you have the fully rendered category tree.

{% branch category.children %}

The for loop will continue iterating until all parent and child categories have been cycled through. In LemonStand, there are no nested categories created with our demo data, but rest assured, when you add some, they will be outputted along with your parent categories in the way described.

Here is an example of the HTML output created by the category list, featuring the Top category and some associated child categories that were created for this example:

<ul>
    <li>
        <a href="/category/tops">Tops</a>
        <ul>
            <li><a href="/category/tops/unisex">Unisex</a></li>
            <li><a href="/category/tops/womens">Womens</a></li>
        </ul>
    </li>
</ul>