Commerce Pickers in Bloomreach Content
Bloomreach Content includes the Commerce Pickers, a front-end module enabling site editors to browse and select commerce data coming from Bloomreach Discovery and supported commerce backends. Commerce Pickers are seamlessly integrated in the Experience Manager: while working on a page-specific component, site editors are able to browse and select external items and eventually store the related references as part of the component configuration. The image below shows the Commerce Pickers in action while using the Pathways & Recommendations component.
Once that component is dropped onto a page, site editor can work on the desired configuration. After clicking on the Widget picker field, a dialog - showing all the available widgets - pops up. Once the widget is selected, editor can do the same with the Product picker. If the Pathways and Recommendations component is configured correctly, in line with this article, the Experience Manager instantly previews the list of products to highlight.
Commerce Pickers represent a necessary solution when site editors need to continously browse and select external commerce data, like product or categories references: instead of opening different browsers tabs and copy/paste commerce references (e.g. product IDs), editors can easily browse and select the desired data directly within the Experience Manager.
The Commerce Pickers functionality is used by a set of pre-defined compound fields. Among the others, a fresh Bloomreach Content instance includes the following commerce compounds:
- CommerceCategoryCompound, providing a category picker
- CommerceProductCompound, providing both the product and variant picker
- WidgetCompound, providing the Bloomereach Discovery widget picker
All the pre-defined compounds listed above are available via the Document Type Editor. As an example, the image below shows the Category Highlight type definition. On the right side, as part of of the Compound Field section, you can see the compound field types mentioned above. In this specific document type, an instance of the CommerceCategoryCompound has been added to the fields section.
The Commerce Pickers module is exposed through a set of UI extensions. More precisely, the Commerce Pickers module is an OpenUI extension used as a document field extension. Bloomreach Content includes the following set of UI extension entry points:
- commerceCategoryPicker, providing commerce categories managed on the external backend
- commerceProductPicker, providing commerce products managed on the external backend
- commerceProductVariantPicker, providing product varations based on the selected - main - product
- smWidgetPicker, providing Bloomreach Discovery widgets
In case you are interested in building your own custom type, please ensure to use one of the predefined UI extensions as part of your OpenUI field. As example, the image below shows the configuration for the Product Picker.
All the existing UI extensions are shipped with pre-defined configurations. By default the Commerce Pickers module tries to load data from Bloomreach Discovery. In case you are interested in loading data from other commerce backends, you may need to introduce some additional configurations. For example, the image below shows a possible solution adopted in the Product Highlight component. On the left pane you notice that a Commerce connector dropdown field has been introduced: it includes a list of connector key/value, like sap=SAP. The selected key is used by the Commerce Pickers implementation while invoking the brX GraphQL Service, forwarding it as the value of the connector request header. Please have a look here to see the list of connector request header supported by the brX GraphQL Service.
Please also note that the Commerce connector field path, connectorid, cannot be changed since it is specified in the pre-defined UI extensions configuration. If you are planning to use the commerce connector field in another compound, please always stick with the connectorid field value. In addition, by default Commerce Pickers can only be used as part of the brxsaas namespace.
Bloomreach Content provides a set of managed commerce components already using the Commerce Pickers:
- Category Highlight: a manually curated list of external commerce categories;
- Pathways & Recommendations: out-of the box integration with Bloomreach Discovery;
- Product Grid: a product list directly powered by the selected commerce backend. It can use either a category reference or a keyword;
- Product Highlight: a manually curated list of external commerce products.
All those components are page-specific and the related configurations are backed by compound type - some of them (e.g. Category and Product Highlight) have been already explained in the previous paragraphs. In addition, the Reference SPA provides the a basic implementation for all the components listed above.