<img src="abc.png" />
    
call to replace anchor tags contains '/admin' in href

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 the small image and brief information about the product. For this section, you can use product-grid-item widget.
 

FAQ

Q. How can I disable collection to appear on the sidebar?

You can disable the collection from sidebar from design theme. Go to the design section of the design theme. Click on the sidebar option. Uncheck the "Show sidebar collection" checkbox. Save the changes.

Q. I don't want the sidebar to appear. Is it possible to hide it?

Yes, it is possible to hide the sidebar. Go to the design theme section, under "sidebar", uncheck "Show sidebar" checkbox. Save the changes.

Q. What's "category page size" and how is it related to the category page?

Category page size governs the initial number of products that get loaded whenever any category page is triggered. Category page size is inversely proportional to the page load speed. More the number of products to be loaded, more will be the number of requests made to the server. More will be the bandwidth occupied by the page, and thus, speed will be lesser. Try to supply with a page size of 12-20 products.

Q. Can I align the sidebar on the right?

Yes, you have the option of sidebar alignment in the design theme. The default value is "left". All you need to supply there is the "right" value, as is implicit.

Q. I've uploaded the category description on the backend. However, I'm not able to see it on the storefront. What's wrong?

In order to show the category description on storefront, you need to enable the "Show category description" from design theme. To do so, go to Categogy in Design section of design theme and select the show description checkbox.

Q. Can we add the product into cart directly from the category page?

If the product grid is having an option to add the item to cart then you can directly click on add to cart and see your item in cart summary.

Q. How does sort by works?

Sort by has 4 options: ascending, descending, low-high & high-low.

Q. Which is more suitable: load more or pagination?

You can choose any of the above. Both of them have their own beauty.

Q. How many products can be displayed on the category page?

You can specify the category page size which shows the number of the product you wish to display on the category page the in design theme. Go to More Variables > Miscellaneous in the Design section. Find and edit category page size.

Q. What all sidebar can contain?

Sidebar contain various field like : Categories, Price filter,Attributes. and collections if you want to show any.

Q. What is a sidebar?

When you open any category page then you see the page divided into two setions.The first section on the left hand side is sidebar which contains all the important details of the products which you may required to find the product which you want.

2018-08-10T05:10:23.369Z