Designing Category Page

This template is used to render the category page. The main purpose of this page is to list the products within a category, often presented as a grid of images with product titles and prices. ms.categoryProducts widget is used for fetch the complete details of the category.

Data Elements

• Breadcrumb Area
• Category Title
• Category Image
• Category Description
• Sort Buttons
• Sidebar
• Product Grid

Breadcrumb Area

The breadcrumb contains links to the home page and it's parent category if exists.

<ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li ng-if="category.parent.parent.parent.parent">
        <a href="/browse/{{category.parent.parent.parent.parent.alias}}">
            {{category.parent.parent.parent.parent.name}}
        </a>
    </li>
    <li ng-if="category.parent.parent.parent">
        <a href="/browse/{{category.parent.parent.parent.alias}}">
            {{category.parent.parent.parent.name}}
        </a>
    </li>
    <li ng-if="category.parent.parent">
        <a href="/browse/{{category.parent.parent.alias}}">{{category.parent.parent.name}}</a>
    </li>
    <li ng-if="category.parent">
        <a href="/browse/{{category.parent.alias}}">{{category.parent.name}}</a>
    </li>
    <li class="active">{{category.name}}</li>
</ol>

Category Title

The category title specifies the title or name given to the category.

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

Category Image

Category Image can be accessed by using category.image variable of category object, returned by the ms.categoryProducts widget.

<img ng-src="{{category.image|image}}">

Category Description

It is used to show a description of the particular category on site to let your customers know about the details category.

{{category.description}}

category.description is available as HTML. So, we can show it by using ng-bind-html-unsafe binding.

Example:

<div ng-bind-html-unsafe="category.description">

Sort Buttons

Sort buttons are used to change the order of product listing, where customers can choose which criteria they want the products to be listed. So, price-conscious web users may choose to list the products in order of price, from cheapest to most expensive.

Sample Code

<ul data-ng-init="selected='Sort By'">
<li data-ng-click="col='alias';sort(col);selected='Ascending Order'" data-ng-class="{'active':col=='alias'}">
<a href="">{{'Ascending Order'|msTranslate}}</a>
</li>
<li data-ng-click="col='-alias';sort(col);selected='Descending Order'" data-ng-class="{'active':col=='-alias'}">
<a href="">{{'Descending Order'|msTranslate}}</a>
</li>
<li data-ng-click="col='price';sort(col);selected='Price - Low to High'" data-ng-class="{'active':col=='price'}">
<a href="">{{'Price - Low to High'|msTranslate}}</a>
</li>
<li data-ng-click="col='-price';sort(col);selected='Price - High to Low'" data-ng-class="{'active':col=='-price'}">
<a href="">{{'Price - High to Low'|msTranslate}}</a>
</li>
</ul>

Sidebar

This section use Sidebar widget for showing filters on the category page. It can be conditionally hidden or visible by using a variable.

Product Grid

Product grid contains a small image and brief information about the product. For this section, you can use product-grid-item widget.