Storefront Content Editing

As an alternative to using Commerce Management, content managers can create and manage content assets directly in the storefront by entering the storefront in the Design View or "Editing" mode. The Design View makes it possible to preview the effect of an action immediately, e.g., the assignment of a component to a page slot, on the resulting page.

For storefront content editing to work, your storefront application must be prepared accordingly. That is, the pagelet models are created, the editable page areas are defined and the intended interactions are implemented in the application.

The Design View is divided into four main areas:

• The palette, which provides tiles of components and media assets for drag and drop creation of new components (the palette is closed by default)

• The render area, which renders the page and displays the preview, with the currently selected asset highlighted

• The content structure tree, which is used to navigate through the previewed content structure including page, page variant, components, includes, categories, products, etc.

• The content edit area, which displays the available editing options for the currently selected element in the content structure tree

The Design View provides two modes:

• The Inspect mode highlights the rendered parts of the page and helps to navigate easily to that part that has to be edited.

• The Layout mode displays all slots and placeholders on a page to extend or change the page layout via drag and drop.