Editable Sections

We don't need to use Storyblok just to manage content for a whole page, we can also use it to make specific sections within our pages editable. This can be useful when we need elements like header menus, footer links, product-specific promotions, etc, where we would normally use Static Blocks or Widgets.

First, we need to create a new Entry in Storyblok but instead of using the "page" content type you should choose to create a new one that better matches the content that you're trying to create.

Take note of the Slug value as we will need this later.

After this Storyblok will open the content type in the preview window as a regular page, this is NOT what we want but let's ignore it. For now, define the schema as you normally would.

Next we want to tell Storyblok what page should be displayed in the preview, you can change this in the sidebar by going to Config → Real Path. This depends on the kind of content that you want to manage, eg: to display the homepage use /, for the cart page use /checkout/cart and so on. Save the change and reload the page.

We should now see the Real Path in the preview screen but our new block is nowhere to be seen yet. We need to tell Magento where we want our block to be displayed and this is done using regular Layout XML directives:

<referenceContainer name="footer">
    <block class="MediaLounge\Storyblok\Block\Container" name="storyblok.custom.block">
        <arguments>
            <argument name="slug" xsi:type="string">our-block-slug</argument>
        </arguments>
    </block>
</referenceContainer>

As long as we use MediaLounge\Storyblok\Block\Container as the block class and pass the Storyblok slug as an argument we can display custom blocks anywhere we want, in this example we chose to display it inside the footer container.

Finally we just repeat the same process as before:

1. Create the PHTML template
2. Style content
3. Publish