Product and Category Highlight Components
The Starter Store Boot application provides two types of Highlight Component: one for products and the other one for categories. A list of decorator documents can be specified in the component configuration: carousels-like templates can be used to render them.
The Product and Categories Highlight components provide an easy way to render a set of items in the Starter Store Boot application. They are based on the Essentials Carousel component: you will find exactly the same component parameters in the highlight component configuration. The main configuration parameters are:
- Carousel item X (where X represents a number between 1 and 6): The value represents the repository path to either a category or product decorator document (handle), depending on which Highlight component is used.
- Template: template switcher. At the moment the Starter Store Boot application provides two custom templates for each Highlight component.
- Commerce Connector ID: Starter Store components use the default commerce connector defined in the channel configuration.
Also see Essentials Carousel component for more information on other Carousel parameters
The Highlight components are command chain delivery components. Commerce components used are the following:
- categoryDetail for the Category Highlight component
- productDetail for the Product Highlight component
Both the connector components can be found in the Default Commerce Connector Set document.
The Highlight component is using the contentDecoratorCommand. For each decorator document part of document list, the above command will fetch external data related to that external id (specified in the external document picker): once fetched, all the information will be availbe to the delivery tier.
It is worth mentioning that before each external request all the "resolved" connector component parameters are wiped out: this means that the next external request doesn't contain any detail about the previous one. You can find more information in the resetConnectorComponent method of the related CommerceExchangeState implementation.
The Starter Store Boot application provides two templates for the Category Highlight component:
- starterstore-contentenricher.ftl displaying the list of categories using a unified list
- starterstore-carouselcontentenricher.ftl rendering the categories using rotating carousel
Equivalently, it provides two templates for the Product Highlight component:
- starterstore-productcontentenricher.ftl displaying the list of products as unified list
- starterstore-carouselproductcontentenricher.ftl rendering product details via a rotating carousel