Add a Content Area

In this guide, I outline the steps for adding an additional content area and displaying it within the Storefront. My examples will use the Layout content instance. For context, search for this system page in the Admin and then choose to edit its content.

Notice this content already has multiple areas (Header Promo and Footer Navigation in the image below).

My example adds a 3rd area, utility_nav, as shown below.

And then outputs the blocks for this additional area in the Storefront.

Configure Areas

The Admin uses the value of Workarea.config.content_areas to determine which areas to display when editing content. The example below shows the data structure of this value—a hash whose keys are strings and whose values are arrays of strings.

Therefore, for my Layout content example, I see the hash key I need to use is 'layout', and this key already exists in Workarea.config.content_areas, so I need to shovel my additional area onto this existing key.

Notes

[1] Using Workarea::Content#slug, not Workarea::Navigable#slug. Navigable slugs are guaranteed to be unique, but content slugs are not. Be aware when adding an area, you may be affecting many content instances.

[2] If my application were already overriding the layout, I would skip the partial and render the blocks directly in the layout file.