You might come up with the question “how do I change the home page category picker to look different?”. Answer is simple; we have a couple of pre-built templates for the category  picker. You can try them, and if you still need to have a different category picker, it’s very straightforward to develop a completely new one.

The category picker (or category list) is rendered with an Angular directive. The app requests for the category list directive from the shop-list.html template of the shop module with following markup. The attribute thumbnail indicates whether to show category image thumbnail in-front of the category name. The mode attribute determines the style of the category list. This directive can be used in any HTML template of the shop module.

<category-list thumbnail="true" mode="collapse" class="product-categories"></category-list>

First let’s take a look at existing templates.

mode=”simple”

When simple mode is used categories are fit into the device width. Each category  occupies equal width, so there will be no slider. This mode is recommended for small number of categories.

When thumbnail parameter is set to true, it might completely occupied by the image if there are more than 4 – 5 categories.

mode=”icons”

icons mode will display category icons horizontally along with the category name on bottom of the icon. Having large number of categories does not mater here as it automatically applies a horizontal slider.

 
mode=”collapse

This mode shows a vertical menu with collapsible items. If there are multiple category levels, it will be available with a collapsible + mark.

Thumbnail parameter can be used to show/hide the category image.

Developing your own template or changing an existing template

Templates for category list can be found in the location www/app/shop/widgets/categories. If you want to add a new template,

  1. Create a new html file in www/app/shop/widgets/categories directory
  2. Use the naming convention <new_mode>-template.html
  3. Copy HTML content from one of the existing modes or use the following code snippet to have the minimal category list

    <div>
    <a  ng-repeat="category in categories" ng-href="#/app/menu/shop/category/{{::category.category_id}}"><span ng-bind-html="category.name"></span></a>
    </div>
  4. Invoke the new template by setting mode=”<new_mode>” in the <category-list> directive
Did this answer your question?