Filter Specific Configuration

Filter Specific Configuration (MANADEV -> Layered Navigation)

• Layered Navigation Filters
• Individual Filter Configuration
  • General Tab. General Information
  • General Tab. Display Settings
  • General Tab. Search Engine Optimization
  • Advanced Tab. Expand/Collapse
  • Advanced Tab. Help Tooltip
  • Colors and Images Tab. Colors and Images (Picker)
  • Colors and Images Tab. Colors and Images (State)
  • Colors and Images Tab. Options

Layered Navigation Filters

MANAdev -> Layered Navigation

All store filters (filterable attributes and categories) are listed in MANAdev -> Layered Navigation menu and every filter can be customized there individually.

Individual Filter Configuration

MANAdev -> Layered Navigation -> [filter]

After clicking a filter in Layered Navigation filter list, new window opens with filter options. Please note, there are several tabs like General, Advanced, Colors and Images, and after clicking the tab, appropriate section will be shown. Some tabs might be shown or hidden depending on different filter configuration.

General Tab. General Information

• Name - filter block label, which appears in frontend. Filter name also is used to build URL. Name could be set on store level. If `Use Attribute Configuration' is checked, attribute label will be used.

• In Category - to show or hide filter block in Layered Navigation on category pages. This parameter also used for Layered Navigation on CMS pages or in Shop By Brand MANAdev extension. This parameter overrides Use In Layered Navigation value, which is set for attribute.

  • No - filter will not be shown in Category Layered Navigation
  • Filterable (with results) - filter is shown in Category Layered Navigation. However only options, where product are available will be listed for the filter.
  • Filterable (no results) - filter is shown in Category Layered Navigation. If filter is set as Filterable (no results), it will list all options, even no products are available now for specific option

• In Search - to show or hide filter block in Layered Navigation on quick search pages. This parameter overrides Use in Search Results Layered Navigation value, which is set for attribute.

  • No - filter will not be shown in Quick Search Layered Navigation.
  • Filterable (with results) - filter is shown in Quick Search Layered Navigation. However only options, where product are available will be listed for the filter.
  • Filterable (no results) - filter is shown in Quick Search Layered Navigation. If filter is set as Filterable (no results), it will list all options, even no products are available now for specific option

General Tab. Display Settings

• Display parameter - here you can change filter appearance by choosing different template like checkboxes or slider.

  • Text (Multiple Select Enabled) - few options of the same filter can be chosen like Skirts and Dresses.

    

  • Text (One Item Can Be Selected At A Time) - only one filter option can be chosen at a time like only Skirts or only Dresses.

    

  • Checkboxes (Form Elements) - checkbox template, that uses checkbox form element for choosing filter options. Appearance can look different on different machines and different browsers.

    

  • Checkboxes (Images). Images are used instead of form elements and looks the same in all browsers. These images can be changed to any other images, like other shape or color images. These images can be found in skin skin/frontend/base/default/images/manapro_filtercheckboxes/

    

  • Colors and Images (Horizontal) will show all swatches, placed horizontally:

    

  • Colors and Images (Vertical) will place all color or images in a vertical order:

    

  • Colors and Images (with Labels) will show all swatches in a vertical line with names:

    

  • Colors and Images with Labels (One Item Can Be Selected At A Time)) ill show all colors in a vertical line with color names, but only one color can be selected at at time:

    

  • Slider - range can be modified by dragging thumbs.

    

    HINT: If attribute is of Dropdown or Multiple Select type, then attribute option positions should be unique. Options in slider will be ordered according position.

  • Min/Max Slider - price range can be modified by dragging thumbs. Option available for Price type attributes only.

    

  • Range Inputs - min and max range values are edited manually. Option available for Price type attributes only.

    

  • Radio Buttons - ranges are shown as list of radio button options.

    

  • Drop Down - options are shown as drop down list.

    

• Role in Min/Max Slider. Appears only when Display is set to Min/Max Slider. Min/Max Slider displays two attributes at once, so assign 'Minimum Value' role to one filter , 'Maximum Value' role to other filter.

• Minimum Value Attribute. Appears only when Display is set to Min/Max Slider and Role in Min/Max Slider - to Maximum Value. Parameter stores reference to filter with 'Minimum Value' role.

• Position - filter position. Filters with lower position will be highest on the Layered Navigation.

• Item Limit - initial limit of visible filter options. In case filter has more than specified number of options, only first options are displayed, as well as 'Show More' and 'Show Less' actions are available.

• Method of Showing All Items - way of showing filters with large number of options:

  • 'Show More' and 'Show Less' actions

  

  • Scroll bar

  

  • 'Show More' popup

  

• Show Option Search. If Yes, then text box appears above filter options appears, where customer can quickly search for option needed.

  

• Show - filter position in frontend. In general, Layered Navigation could be placed in left column, in right column or above product list. Several or even all options can be selected at a time. To select several options, keep Ctrl key pressed and click on the desired option. For each filter, positioning could be set individually.

  • In Left Column - filter will be shown in the left column
  • In Right Column - filter will be shown in the left column
  • Above Product List - filter will be shown above product list.

• Sort Items By - how filter options are sorted inside filter.

  • Position - all filter options are sorted by attribute option position. Options with lower position will be highest on the list. Option positions are set in Magento attribute management.
  • Position (selected at the top) - all filter options are sorted by attribute option position, but selected options will be placed higher.
  • Name - all filter options are sorted by attribute option name in ascending order.
  • Name (selected at the top) - all filter options are sorted by attribute option name in ascending order, but selected options will be placed higher.
  • Count - options with the largest products count will be highest on the list.
  • Count (selected at the top) - options with the largest products count will be highest on the list, but selected options will be placed higher.

• Combine Multiple Selections Using - defines how products will be chosen, If several options are selected within one filter.

  • Logical OR - products, having ANY of selected options assigned will be shown. For example, if blue and red options for color filter are selected, blue products and red product and even those product which are red/blue will be shown.
  • Logical AND - only products, having ALL selected options assigned will be shown. It is mostly applicable to Multiple Select type attributes.

  For example, "Decoration" attribute is of Multiple Select type and has some options defined:

  

  When product is created, several options can be assigned:

  

  If Logical AND is set for Decoration filter, then only products having both Pockets and Bow options assigned will be shown when these two options are selected in Layered Navigation.

  

• Reverse Mode. If enabled, shows all options as selected and allows user to deselect items he/she is not interested in.

• Filterable (no results) Links Are Not Clickable. If filter is set as Filterable (no results), it will list all options, even if no products are available. This parameter makes such options non clickable.

  For example, field Use In Layered Navigation is set to Filterable (no results) for filter "Type":

  

  In layered navigation, options without available products will be non clickable, if this parameter is set to Yes:

  

General Tab. Search Engine Optimization

Several filter specific parameters for SEO are stored on filter level. More information about SEO configuration can be found in SEO - Search Engine Optimization Settings

• Include Filter Name In URL - show or hide filter name in URL. For example, for color filter you can skip word color and URL will contain only filter value, let's say blue. It helps to have more elegant URL structure, but you should be very careful with possible URL Key conflicts

Hint: URL key should be unique for every option in filter scope when attribute name is used in url, or globally for whole store view, if attribute name is not included to url.

• Position in URL is relative filter position in URL. For example, if for color filter you will set it to 10, while for brand you set it to 20, in URL color will always be placed before brand. The same is for filter options. All option position can be reviewed in attribute management (standard Magento admin menu Catalog -> Attributes -> Manage Attributes

• Include Applied Filter In Canonical URL. This is used to override global SEO schema setting for specific filter. You can choose:

  • As specified in current SEO schema settings
  • Always
  • Never

Advanced Tab. Expand/Collapse

• Expand/Collapse/Dropdown Method - how to show filter options initially.

  • Expanded, not collapsible - filter is expanded initially and cannot be collapsed:

    

  • Collapsible, initially collapsed - filter is collapsed initially and can be expanded and collapsed later:

    

    • Collapsible, initially expanded - filter is expanded initially and can be collapsed later:

    

  • Dropdown. Filter is shown as dropdown

    

Advanced Tab. Help Tooltip

• Text - Filter explanation, which will be shown in popup. HTML is supported.

• Popup Width - width of help hint in pixels.

Colors and Images Tab

How to create color or image picker is described in How To Create Color Picker

Additional tab Colors and Images appears, when Display parameter is set to one of options below :

• Colors and Images (Horizontal)
• Colors and Images (Vertical)
• Colors and Images (with Labels)
• Colors and Images (One Item Can Be Selected At A Time)

Here you can finalize your color picker visualization.

Colors and Images Tab. Colors and Images (Picker)

There are two different sections in layered navigation, that can be configured: Picker and State. Picker is a palette of all possible colors or options, while State contains information about selected elements:

Colors and Images (Picker) group of settings define default visualization and behavior of every swatch:

• Width and Height will define size of color swatch.
• Border Radius allows to add rounder borders to an element
• Image, Selected, Mouse Over and Selected Mouse Over This section allows to add additional top layer over all swatches which might be used as a mask to give specific shape for a swatch (for example heart shape swatches) or additional border.

Graphical file for the mask can be uploaded using buttons Add or Change, or can be removed, if you do not need it anymore.

Colors and Images Tab. Colors and Images (State)

Colors and Images (State) settings are used for visualization of selected filter options:

• Width andHeight will define size of state element.
• Border Radius allows to round corners to an element, where 0 means square.
• Image is a mask for element, which will be applied to on top of selected element image.Graphical file for the mask can be uploaded using buttons Add or Change, or can be removed, if you do not need it anymore.

Colors and Images Tab. Options

Option settings are used for visualization of every swatch element:

For every swatch element (in our case - color) you can set:

• Color - swatch color, which will be shown, if image is not provided.. Using color selecting control you can set a Hex value of the color of a swatch.
• Image - is a graphical image which will be used to show the swatch element.
• Selected Image - is a graphical image which will be shown when option is selected.
• Mouse Over is a graphical image which will be used when mouse is over the option.
• Selected Mouse Over is a graphical image which will be shown when mouse is over the selected element .
• In State is a graphical image which will be shown in "State" section for the selected element.

In case you want to have image picker, you can upload images for different states: ordinal image, image when item is selected, ordinal image when mouse is over the item and selected item when mouse is over it.

Hint: In case image picker should look the same in spite of the state of the filter - normal, selected, mouse over it or selected with mouse over it - it is recommended to set the image only for one Image column. It will help to avoid image flicker.

Here is the example of Length filter configuration.