Departments widget

Use the widget to filter the products on the website. You use the widget together with the Products list widget. When the user clicks a department, the products are filtered according to this department.

PREREQUISITES: You have created at least two departments.

For more information about when and how to create departments, see Departments.

To configure the Departments widget, perform the following:

1. After you have dragged the Departments widget on your page, click Edit button in the upper-right corner of the widget.
2. Under What type of navigation to use? select one of the following:
   
   • Horizontal
     Displays all created departments horizontally – one next to the other.
     The hierarchy of the departments is not reflected.
   • Vertical
     Displays all created departments vertically – one under the other.
     The hierarchy of the departments is not reflected.
   • Cloud
     Displays all created departments horizontally – one next to the other.
     The hierarchy of the departments is not reflected.
     The font size of the departments depends on the number of items in each department – the more items a department has, the bigger font it uses.
   • Tree (vertical with sub-levels)
     Displays all created departments vertically – one under the other. The tree reflects the hierarchy and departments can be expanded and collapsed.
   • Menu
     The main departments are displayed in a horizontal menu. If you click a department that has sub-departments, a sub-menu opens.
3. Under Fine tune the selected type, perform the following:
   
   • If for each department, you want to display the number of items in this department, select Show item count checkbox.
   • If you want to display departments which do not have items assign to them, select Show empty items checkbox.

     NOTE: If you are using Tree or Menu navigation, and you have not selected Show empty items checkbox, the system does not display a department that has no items assigned to it, even if the department has sub-departments that do have items assigned to them.

4. Under Sort Order, select one of the following:
   
   • User Defined
     The departments are displayed in the order, in which they are defined on Departments page.
     To open the page, click Content » All classifications » Departments.
   • Alphabetical
     Departments are sorted A to Z.
   • Reverse Alphabetical
     Departments are sorted Z to A.
5. Under Hierarchical List Expansion, if you have selected Tree in Step 2, select one of the following:
   
   • Expand all
     All departments and sub-departments are displayed.
   • Collapse all
     Only top level departments are displayed.
   • Expand Current
     All sub-departments of the selected department are displayed.
6. If the Departments and Product list widgets are on different pages, perform the following:
   
   1. Click Advanced button in the lower-right corner of the window.
      The Edit window appears in advanced mode.
   2. In BaseUrl input field enter the URL name of the page where the products will be displayed.
      This page can be either the same page on which the Departments widget is, or it can also be another page.
      For example, you can display the departments on one page of your website, but if the user clicks a department, the system opens another page and displays the products there.

      NOTE: You enter the URL name in the following format ~/<URL name of page>. For example, if the title of the page is Our Products, the automatically generated URL name is our-products (in case you have not changed it), then in BaseUrl input field you enter ~/our-products.
      The URL name of the page is the name after the name of the project (http://…/<project name>/<page-name>/…) or you can see the URL name in the properties of the page.

   3. Click Save.
      The system saves the setting and closes the editing mode of the widget.
      Departments are displayed in a treeview if they have hierarchy or in vertical list if they have no hierarchy.
   4. For more information about advanced configuration options, see Advanced configuration of widgets.