HomeEngagementContentDiscoveryOther Resources

React Reference SPA OOTB Components

Suggest Edits

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:

ComponentTypeParametersDescriptionCode in GitHub
Banner carouselPage-specificContent:

  • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SingleBannerCarousel
    Banner CTAPage-specificContent:

    • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/BannerCTA
    Banner galleryPage-specificContent:
    • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/MultiBannerCarousel
    Category highlightPage-specificContent:
    • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/CategoryHighlight
    Pathways & RecommendationsPage-specificContent:
    • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/PathwaysRecommendations
    Product gridPage-specificContent:
  • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/ProductGrid
    Product highlightPage-specificContent:
    • 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/components/ProductHighlight
    Title & textPage-specificContent:
    • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/TitleAndText
    Banner carouselSharedProperties:
    • 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 on the home page of the Reference SPA.https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SingleBannerCarousel
    Banner gridSharedProperties:
    • 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/components/BannerCollection
    ContentSharedProperties: This component has no editable propertiesThe 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 catalogSharedProperties
    • 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/components/PageCatalog
    Google mapsSharedProperties:
    • 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/components/Map
    ImagesSharedProperties:
    • 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/components/Images
    Page navigationSharedProperties:
    • 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/components/Navigation.tsx
    Product detailsSharedNon-editable componentThe 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 barSharedProperties:
    • 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 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
    VideoSharedProperties:
    • 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/components/Video

    Updated almost 2 years ago