React Reference SPA OOTB Components - Bloomreach Commerce Experience Cloud - The Headless Digital Experience Platform Built for Commerce

React Reference SPA OOTB Components

The React Reference SPA provisioned with every new Bloomreach Headless Experience Manager 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. To understand more about these components and the use-cases they cover, this page provides a detailed list.

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:

  • Banners*
    • Title
    • Content
    • Image
    • Cta
    • Link

Properties:

  • Appearance
    • Content Alignment
    • Slide Interval (milliseconds)
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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/SingleBannerCarousel
Banner CTA Page-specific

Content:

  • Title
  • Content
  • Cta
  • Link

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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/BannerCTA
Banner gallery Page-specific

Content:

  • Title
  • Banners*
    • Title
    • Content
    • Image
    • Cta
    • Link

Properties:

  • Appearance
    • Slide Interval (milliseconds)
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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/MultiBannerCarousel
Category highlight Page-specific

Content:

  • Title
  • Commerce connector*
  • Category
    • Category (Category Picker)

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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/CategoryHighlight
Pathways & Recommendations Page-specific

Content:

  • WidgetCompound
    • Widget* (Widget Picker)
    • Widget Algorithm
  • ProductCompound
    • Product (Product Picker)
    • Product Variant (Product Picker)
  • CategoryCompound
    • Category (Category Picker)
  • Keyword

Properties:

  • Appearance
    • Title
    • Number of Products*
    • Show Product Title
    • Show Price
    • Show Product ID
    • Show Description
    • Slide Interval (milliseconds)
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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/PathwaysRecommendations
Product grid Page-specific

Content:

  • Title
  • Type*
  • Search term
  • Category
    • Category (Category Picker)

Properties:

  • Appearance
    • Page size*
    • Filters
    • Show pagination
    • Show total
    • Show sorting
    • Show facets
  • Search and Merchandising
    • View ID
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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/ProductGrid
Product highlight Page-specific

Content:

  • Title
  • Commerce connector*
  • Product
    • Product (Product Picker)
    • Product Variant (Product Picker)

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/src/components/ProductHighlight
Title & text Page-specific

Content:

  • Title
  • Text

Properties:

  • Text alignment
  • Title size
  • Style
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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/TitleAndText
Banner carousel Shared

Properties:

  • Appearance
    • Content Alignment
    • Slide Interval (milliseconds)
  • Banners
    • Banner 1*
    • Banner 2
    • Banner 3
    • Banner 4
    • Banner 5
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 in the Home page of the Reference SPA. https://github.com/bloomreach/bloomreach-reference-spa/tree/main/src/components/SingleBannerCarousel
Banner grid Shared

Properties:

  • Appearance
    • Title
  • Banners
    • Banner 1*
    • Banner 2
    • Banner 3
    • Banner 4
    • Banner 5
    • Banner 6
    • Banner 7
    • Banner 8
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/src/components/BannerCollection
Content Shared Properties: This component has no editable properties The Content component allows visualising 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/src/components/Content
Document catalog Shared

Properties

  • Appearance
    • Title
    • Show Pagination
    • Show Total
  • Content selection
    • Documents path
    • Include document subtypes
    • Document types*
  • Sorting
    • Sort field
    • Sort order
  • Pagination
    • Hide past items
    • Hide future items
    • Field that contains document date (for hiding)
    • Nr. of posts to show
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/src/components/PageCatalog
Google maps Shared

Properties:

  • Position
    • Latitude
    • Longitude
    • Address
  • Appearance
    • Default Zoom*
    • Show Marker
    • Map Type*
  • Settings
    • Google Maps API Key
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/src/components/Map
Images Shared

Properties:

  • Image 1*
  • Image 2
  • Image 3
  • Image 4
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/src/components/Images
Page navigation Shared

Properties:

  • Link 1*
  • Link 2
  • Link 3
  • Link 4
  • Link 5
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/src/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/src/components/Product
Search bar Shared

Properties:

  • document*
  • suggestionsEnabled
  • suggestionsLimit*
The Search bar component typically located in shared containers returns products from the commerce backend based on a search query. This includes Discovery optimised 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/src/components/SearchBar
Video Shared

Properties:

  • URL*
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/src/components/Video

 

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?