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>