Analytics & Reports
Analytics

Navigation

The container for navigation refinements based on the availableNavigation returned from the search response.

Provided Aliases: $navigation

Example Implementation

Add this to your HTML.

<gb-navigation></gb-navigation>

Properties

Property Type Default Required Notes
display { [key: string]: string } {} A map of navigation names to display types. The display type is either 'value', 'range', 'filter', or 'slider', defaulting to 'value'. Optional property.
labels { [key: string]: string } {} A map of navigation names to labels.
collapse boolean | { isActive: boolean | number } true true adds a button to collapse navigations, false removes button. Optionally can be set to an object with the key isActive set to: false to make all navigations collapsed on load, true to make all navigations open on load, a number x, where the first x navigations are open on load and the rest are collapsed.

State

Property Type Default Notes
fields string[] [] An array of available navigation fields returned in the search response.

Events

Event Affected State Properties
'navigations_updated' fields

Child Components: Navigation List

The container for navigation display components. Creates a list of containers for each availableNavigation returned in the search response.

Provided Aliases: $navigationList

Example Implementation

<gb-navigation-list fields="{ ['brand', 'price', 'size'] }" collapse="true"></gb-navigation-list>

Properties

Property Type Default Required Notes
fields string[] [] Yes An array of available navigation fields.
collapse boolean Collapse property passed down from navigation properties

Child Components: Navigation Display

The display container that determines what kind of refinement controls child component to display refinements with.

Provided Aliases: $navigationDisplay

Example Implementation

<gb-navigation-display collapse="true" field="{ value: 'Main', display: 'value', label: 'All Departments', active: true }"></gb-navigation-display>

Properties

Property Type Default Required Notes
collapse boolean Collapse property passed down from navigation properties
field { value: string, display: string, label: string, active: boolean } Single field passed down from navigation list fields
icons { toggleOpen: string, toggleClosed: string } {
  toggleOpen: ‘gb-icon__minus’,
  toggleClosed: ‘gb-icon__plus’ }
Icons for the collapse button

State

Property Type Default Notes
isActive boolean true Whether is collapsed
navigation object Current navigation

Child Components: Navigation Header

The navigation name display container.

Provided Aliases: $navigationHeader

Example Implementation

const onToggle = function() {
  console.log('toggled');
}
<gb-navigation-header is-active="false" label="All" collapse="true" on-toggle="{ onToggle }"></gb-navigation-header>

Properties

Property Type Default Required Notes
icons { toggleOpen: string, toggleClosed: string } {
  toggleOpen: ‘gb-icon__minus’,
  toggleClosed: ‘gb-icon__plus’ }
Icons for the collapse button
label string Navigation name label
isActive boolean true Whether is collapsed
collapse boolean Collapse property passed down from navigation properties
onToggle() function Function called when collapse is toggled

Navigation List Sorting

By default, elements in a navigation list are sorted based on the order given in Command Center, and then the refinement lists within these navigations are sorted based on the number of results they contain

There is, however, an option within the Config in order to sort navigations by popularity, sort refinements based on popularity and an option to pin certain navigations/refinements to the top of their respective lists

NOTE: Refinements with very small numbers of records within them which are still popular (and would normally end up in the list of most popular refinements) may sometimes not be displayed, and will only show when moreRefinements() is called

Maximum refinements to show

By default, every navigation will show all the available refinements (to the engine limit of 20) that are returned with the search request. A custom limit can be set however in the Config.

Note that this does not affect the behaviour of the more refinements button, which will still show all refinements under its respective navigation.

Child Components: Value Refinement Controls

Displays the availableNavigation label along with the list of refinements for each availableNavigation returned in the response.

Provided Aliases: $valueControls

Example Implementation

<gb-value-refinement-controls navigation="{ field: 'brand', refinements: [] }"></gb-value-refinement-controls>

Properties

Property Type Default Required Notes
navigation object The current navigation.

State

Property Type Default Notes
onClick() function index: number . Toggles the refinement.
moreRefinements() function Sends an action to request more refinements.
refinements Store.Refinement & { selected: boolean } The label of the available navigation.
more boolean A boolean value indicating whether there are more available navigation refinements.

Child Components: Range Refinement Controls

Provides two text boxes to specify the low and high values for a range refinement.

Provided Aliases: $rangeControls

Example Implementation

<gb-range-refinement-controls field="{ field: 'price', refinements: [] }"></gb-range-refinement-controls>

Properties

Property Type Default Required Notes
navigation object The current navigation.
labels.low string 'Min' The placeholder text for the lower bound input field.
labels.high string 'Max' The placeholder text for the upper bound input field.
labels.submit string 'Submit' The text of the submit button.

State

Property Type Default Notes
min number Lower bound for refinements
max number Upper bound for refinements
low number Currently selected low value
high number Currently selected high value

Child Components: Slider Refinement Controls

Adds a slider in addition to two text boxes to specify low and high values for a range refinement.

Has all of the same properties and state as Range Refinement Controls.

Child Components: Filter Refinement Controls

Adds a search box and pagination to your refinement list within a navigation. More refinements are fetched when the search box is focused.

Provided Aliases: $filterControls

Properties

Property Type Default Required Notes
navigation object The current navigation.

Child Components: Refinement List

A list of refinements.

Provided Aliases: $refinements

Example Implementation

// index.js
const refinements = [
  { value: 'red', total: 200, selected: true },
  { value: 'blue', total: 100, selected: false }
];
<!-- index.html -->
<gb-refinement-list refinements="{ refinements }"></gb-refinement-list>

Properties

Property Type Default Required Notes
refinements Array<Store.Refinement & { selected: boolean }> [] An array of available navigation refinements.

Child Components: Refinement

An available navigation refinement. It displays the refinement label and can be selected when clicked.

Provided Aliases: $refinement

Example Implementation

// index.js
let selected = true;
<gb-refinement class="{ gb-selected: selected }"></gb-refinement>

State

Property Type Default Notes
or boolean Indicates whether it is an ORable refinement
selected boolean Indicates whether it is a selected refinement
range boolean Indicates whether it is a range refinement
low number Low value on a range refinement
high number High value on a range refinement
value string Value on a value refinement
total number Total number of records for this refinement