Collections
The container for selecting the active collection.
Provided Aliases: $collections
Structure
<gb-collections>
<gb-select options="{ $collections.collections }" on-select="{ $collections.onSelect }">
<gb-custom-select>
<gb-collections-option>
<span>{ $option.label }</span>
<gb-badge>{ $option.total }</gb-badge>
</gb-collections-option>
</gb-custom-select>
</gb-select>
</gb-collections>
Example Implementation
Add this to your html.
<gb-collections></gb-collections>
Properties
Property | Type | Default | Required |
---|---|---|---|
labels |
object | {} |
These are configurable via tags
: read more under configuration.
State
Property | Type | Default | Notes | Description |
---|---|---|---|---|
collections |
{ value: string, label: string, selected?: boolean, total?: number }[] | [] |
An array of collection options. | An array of collections options, where value is the collection’s value, label is the collection���s label, selected is optional and only set when true which indicates the collection is selected, total is optional and indicates the total number of products in that collection. |
onSelect(index) |
function | Sets the collection with the specified index to active. index : number |
index : number - index of the selected collection. Sends an action to request the selected collection. |
Events
Event | Affected State Properties |
---|---|
'collection_updated' |
collections |
'selected_collection_updated' |
collections |
Child Components: Collections Option
The container for displaying a collection option.
- This component does not have any properties.
- This component does not have any properties in state.
- This component does not listen for any events.
Example
Add this to your html.
<gb-collections-option></gb-collections-option>