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

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