React Reference SPA OOTB components
The React Reference SPA provisioned with every new Bloomreach Content environment comes with a set of components designed and selected to showcase our best features. These components can be used, re-used, changed, and removed in any Bloomreach Headless Experience Manager project. This page provides a detailed list of these components and the use cases they cover.
For more information regarding managing components and the differences between page-specific and shared components, please check the following page:
Component | Type | Parameters | Description | Code in GitHub |
---|---|---|---|---|
Banner carousel | Page-specific | Content:
| The Banner carousel allows dropping onto a page an information driven carousel, including up to 50 banners with a set interval. Multiple images or banners are shown simultaneously in a carousel. You can find an example of the Banner carousel component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SingleBannerCarousel |
Banner CTA | Page-specific | Content:
Properties: This component has no editable properties | The Banner CTA displays key information in a wide format, often with a call to action, text and a button to engage audiences. You can find an example of the Banner CTA component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/BannerCTA |
Banner gallery | Page-specific | Content:
| The Banner gallery displays banners in a grid with horizontal and vertical axis or a custom template. You can find an example of the Banner gallery component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/MultiBannerCarousel |
Category highlight | Page-specific | Content:
Properties: This component has no editable properties | The Category highlight creates a category based navigation in a grid which direct users to category based product listing pages. You can find an example of the Category highlight component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/CategoryHighlight |
Pathways & Recommendations | Page-specific | Content:
Properties:
| The Pathways & Recommendations component displays similar products on product detail pages in a grid which is horizontally scrollable. You can find an example of the Pathways & Recommendations component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/PathwaysRecommendations |
Product grid | Page-specific | Content:
Properties:
| The Product grid component showcases different products from a commerce backend into a grid based on pre-defined search query. You can find an example of the Product grid component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/ProductGrid |
Product highlight | Page-specific | Content:
Properties: This component has no editable properties | The Product highlight component highlights a set of products creating a grid which links to the highlighted products' detail pages. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/ProductHighlight |
Title & text | Page-specific | Content:
Properties:
| The Title & text component allows adding a title and a text onto a page and format it in different heading styles. You can find an example of the Title & text component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/TitleAndText |
Banner carousel | Shared | Properties:
| The Banner carousel allows dropping onto a page an information driven carousel, including up to 50 banners with a set interval. Multiple images or banners are shown simultaneously in a carousel. You can find an example of the Banner carousel component on the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SingleBannerCarousel |
Banner grid | Shared | Properties:
| The Banner grid displays banners in a grid defined with horizontal and vertical axis or a custom template. You can find an example of the Banner grid component in the About Us page of the Reference SPA | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/BannerCollection |
Content | Shared | Properties: This component has no editable properties | The Content component allows visualizing on a page where content will be displayed. You can find an example of the Content component in the Terms of Use page of the Reference SPA | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Content |
Document catalog | Shared | Properties
| The Document catalog component shows a list based on a feed or pre-defined variables. This component can be used for news articles, blogs etc. You can find an example of the Document catalog component in the Articles page of the Reference SPA | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/PageCatalog |
Google maps | Shared | Properties:
| The Google maps component displays map and location(s) based on Google maps. You can find an example of the Google maps component in the About Us page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Map |
Images | Shared | Properties:
| The Images component adds one or more images onto a page. You can find an example of the Images component in the About Us page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Images |
Page navigation | Shared | Properties:
| The Page navigation component creates a menu from up to 5 links. You can find an example of the Page navigation component in the footer of the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/blob/main/components/Navigation.tsx |
Product details | Shared | Non-editable component | The Product details component allows visualising on a page where product details will be displayed. You can find an example of the Product details component in any Product page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Product |
Search bar | Shared | Properties:
| The Search bar component typically located in shared containers returns products from the commerce backend based on a search query. This includes Discovery optimized autosuggest and autocomplete for keywords, products, and other search results. You can find an example of the Search bar components in the header of the home page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SearchBar |
Video | Shared | Properties:
| The Video component places a video from a given URL (e.g. YouTube) onto a page. You can find an example of the Video component in the About Us page of the Reference SPA. | https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Video |
Updated 15 days ago