Overview

The Elements package leverages slots to allow customisation on top of, or to replace the default UI.

FacetResults

The FacetResults component is the most outer layer of the Facets UI you can modify. There are two options in order to modify the UI:

1. Consume the slot elements-facets-results-container to create a completely bespoke UI.
2. Consumed additional named slots to modify aspects of the UI.

Each slot has a unique name which can be consumed by additional out-the-box components exported by the Elements package, or through custom markup:

• <slot name="facet-tabs-start" /> UI for currently selected Facets, placed before facets in the DOM tree - An out-the-box UI component for this slot is exported as FacetTabs
• <slot name="facet-tabs-end" /> UI for currently selected Facets, placed after facets in the DOM - An out-the-box UI component for this slot is exported as FacetTabs
• <slot name="elements-facets-sort-start" /> UI for sort options within parent node of any facets
• <slot name="facet-button" /> UI for any additional content on the top level facet button i.e Selected counters
• <slot name="facet-list" /> UI for the facet group SimpleFacet - An out-the-box UI component for this slot is exported as FacetList
• <slot name="facet-range" /> UI for the facet group RangedFacet - An out-the-box UI component for this slot is exported as FacetRange
• <slot name="facet-slider" /> UI for the facet group FacetSlider - An out-the-box UI component for this slot is exported as FacetSlider
• <slot name="facet-search" /> UI for the facets where the facetName contains _brand_ - An out-the-box UI component for this slot is exported as FacetSearch

UI Component slots

When using the out-the-box UI components for the facet groups, additional named slots can be consumed to change or extend the display of these components. Adding additional markup without consuming a named slot will result in a completely custom UI.

Below is a list of the named slots and the component these named slots are present in:

• <slot name="elements-facet-options-header" /> Additional UI can be added above the facet options.
  Components: All
• <slot name="elements-facets-option-list" /> The UI for the facet options can be overriden by consuming this slot.
  Components: FacetList, FacetRange, FacetSearch
• <slot name="elements-facets-slider" /> The UI for the slider can be overriden by consuming this slot.
  Components: FacetSlider
• <slot name="elements-facet-options-footer" /> Additional UI can be added below the facet options.
  Components: All
• <slot name="elements-facet-list-search" /> The UI for the search input can be overriden by consuming this slot.
  Components: FacetSearch

<FacetList>
    <p slot="elements-facet-options-header">This is custom markup</p>
</FacetList>

Custom UI

When creating a UI using custom markup, it is worth noting that the markup provided to the elements package is intended to be used as a template. Data attributes are used to inject and populate dynamic data to these templates.

This means that the UI defined for a facet group will be the same UI for all instances of that same facet group. Before defining a custom UI or consuming named slots, it is recommended to consult the documentation on how attributes are used.