Bloomreach Content acceleration

Your journey with Bloomreach Content will most likely start with a clean environment. The Vue Storefront team will populate it with data models parallel to your frontend setup.

This is just a beginning

The default data model provided by Vue Storefront is just a starting point. Use it as a foundation and as an example helping you to develop your project further.

Content types

Creating a Content Type (opens new window) is the first step required to work with components in Bloomreach Content. It is a scaffolding for Documents (opens new window) which you will be creating to populate your frontend Blocks with dynamic data (e.g. to add values for fields such as title, subtitle and description in your Banner component).

Content Types are divided into two groups: Document Types (opens new window) and Field Group Types (opens new window). Every Block component in your frontend setup has its corresponding Document Type in Bloomreach Content. Going further, these Document Types might contain one ore more Field Group Types. For example, the Accordion Block component in your frontend setup has a parallel Accordion Document Type in Bloomreach Content which contains the Accordion Item Field Group Type.

See it yourself

You can view the existing Content Types by navigating to the Content Type Editor (opens new window) in the Content Application (opens new window).

Folders

Folders are required to organize Documents created from Content Types. In the initial Vue Storefront setup, every Content Type has a dedicated Folder in the Documents section of the Content Application. These folders are nested within the en root folder.

Components

Components (opens new window) are the final building blocks in your Bloomreach Content setup. They are selectable within the Experience Manager (opens new window) and allow you to pick or create Documents. Every Block component in your frontend setup has its corresponding Component in Bloomreach Content.

See it yourself

You can view the existing Components by navigating to the Site Development Application (opens new window) and clicking the Components tab. The ones meant to work with Vue Storefront can be found within the vuestorefront group.

Layouts

Layouts (opens new window) define the structure of your dynamic CMS pages. The iniitial Vue Storefront setup ships with an abstract base layout extended by the dynamic page layout. First, they allow you to add static components which will be rendered once during the initial page load and persisted across all pages which use the layout (e.g Footer and MegaMenu). Second, they allow you to define containers (i.e. placeholders) for one or more managed components which can be added and configured in the Experience manager.

See it yourself

You can view the existing Layouts by navigating to the Site Development Application (opens new window) and clicking the Page layouts tab.

Menus

Menus (opens new window) allow you to build components which feature navigation menus (such as Footer and MegaMenu). They must be associated with a static Base Menu (opens new window) component instance added on the layout level. It allows editing them from within the Experience Manager. The initial Vue Storefront setup ships with Menus for both Footer and MegaMenu.

Limitation

Currently it is not possible to manipulate the appearance of static layout components such as Footer or MegaMenu from within the Experience Manager. You can only define the tree structure of their menu items.

See it yourself

You can view the existing Menus by navigating to the Site Development Application (opens new window) and clicking the Menus tab. We also suggest you go to the Page layouts tab and take a look at the static header and footer components existing on the base layout. You will notice they both have the menu parameter which links them to the right Menus.