Designing Sidebar

The sidebar widget is mainly used for showing filters on the category page. It can be conditionally hidden or visible by usingvariable.

Data Elements

Main elements of the sidebar are filters. In some cases, banners and collections are also shown. Main filters are:

Category Filters

Mostly this contains sub-categories links.

Price Filters

Price filters can be shown or hidden with variable. 'ms.widgets.category_products.priceFilter(mydata)' function filters products based on mydata.min and mydata.max input values.

Brand Filters, Size, color and other attribute filters

These filters use widget ms.entityAttributes.

Html Structure

Sidebar

Category list
Price Filter
Filters
- Color
- Size
- Fabric
- Fit etc
collection

CSS Structure

Sidebar
- sidebar-category
- sidebar-filter
  - sidebar-heading
  - color-filter
  - size-filter
  - brand-filter
- sidebar-collection

Variables used in sidebar widgets are:

show categories	‘yes/no’ to show and hide sidebar categories filter
show sidebar collection	‘yes/no’ to show and hide sidebar collection
sidebar collection	Select your collection which you want to show in sidebar collection
pricefilter	‘yes/no’ to show and hide price filter insidebar.
show attribute filters	‘yes/no’ to show and hide attributes filter insidebarlike: forbrand, color,sizeetc.

There can be changes in attributes if you are using the facet concepts on the page for filters in. It has more flexibility for filtering the products. When you are using facet group app in admin than use ms.th2.sidebar_facet_group widget forsidebar.

Related Widgets

ms.entityAttributes

ms.categories