Categories

Categories organize your products into nifty classifications. When viewing your store, customers can select a category to view products that have been assigned to that category. You can also create subcategories within a parent category.

Categories are managed from Product Catalog > Categories.

For information on Category Sorting and Displaying, see our Tutorial section.

Adding a Category

You can assign the category name, URL, API code, short and long description when creating or editing a category. It’ll look something like this:


Parent Categories

Parent categories can be defined to group subcategories together. For instance, a parent category might be tops, and within it there might be subcategories of cotton, polyester, and linen.


Category SEO

Apply title tags, meta descriptions, and meta keywords to your Categories for optimal findability.

Category Images

Select an image for your Category.


Display Category Products

Let's have a look at how category products are displayed with LemonStand.

The category page in your LemonStand store is the page used to display category products. The category page itself loads the correct category of products by first examining a urlName parameter defined after /category/ in the page's URL.

You will notice on the category page that this functionality has been defined with the following setting in the URL field:

The shop:category action, which is set in the Action section of this page, then preps the category object for use in our page code. So in the case of the Tops category page, the 'tops' parameter value is read from the URL, then the shop:category action loads the category variable and list of products contained in the sporting goods category.

Next let's look at the code content on the category page. If you have a look at the content area starting at line 15, you will see the following section of code:

{{ 
partial('shop-product-list', {
'products': products,
'empty_text': 'There are no products in this category.'
}) 
}}

This section of code is telling LemonStand to render the shop-product-list partial using any defined products for this product category. The list of products was defined at page load by the shop:category action.

You can also access the category variable directly on the category page, along with some useful associated parameters. For example, let's add the following snippet right above our code example:

<h3>{{ category.name }}</h3>

As you can see, when you load the Shop page, the category name is now outputted above the list of category products.

Additionally, you can also load a list of products outside of a partial using the following Twig syntax:

{% for product in products %}
<h3>{{ product.name }}</h3>
...
{% endfor %}

Learn more about Displaying in our theme docs.

Display Category List

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

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 that 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 area 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 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 Sporting Goods category and some associated child categories that were created for this example:

<ul>
<li>
<a href="/category/sporting-goods">Sporting goods</a>
<ul>
<li><a href="/category/sporting-goods/football">Football</a></li>
<li><a href="/category/sporting-goods/hockey">Hockey</a></li>
</ul>
</li>
</ul>

Category Sorting

You also have the capability of sorting categories with our extended_sort Twig filter.

Usage looks like this:

{% for category in tree.items|extended_sort('name', true) %} 
//do... 
{% endfor %}

Where extended_sort is the Twig filter, which expects the following three parameters:

  1. Illuminate\Database\Eloquent\Collection $collection (which, in the Twig syntax above, is implicitly passed in)
  2. string $field, or the field that you want to sort on
  3. boolean $ascending, where true sorts in ascending order, and false sorts in descending order.