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 |
{} |
A map of navigation names to display types. The display type is either 'value', 'range', 'filter', or 'slider', defaulting to 'value'. Optional property. |
||
labels |
{} |
A map of navigation names to labels. | ||
collapse |
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 |
Single field passed down from navigation list fields | |||
icons |
{ toggleOpen: string, toggleClosed: string } | { |
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 } | { |
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 |