Storyblok Visual Editor Integration for Magento 2

Magento 2 Storyblok Integration

CMS Pages

CMS Pages WYSIWYG

Static Blocks

CMS Block

Widgets

Our custom “multi field” widget

What about Magento Commerce’s Page Builder?

Magento Commerce Page Builder

Why Storyblok?

Storyblok Visual Editor

Storyblok Integration for Magento 2

Before we start we’ll need to create an account in Storyblok, you can start by using their free tier but you will definitely want to upgrade to one of their paid plans if you want to use the more powerful features.

Installation

composer require medialounge/magento2-storyblok-integration
php bin/magento setup:upgrade

Creating our first page

Visual Editor Preview

Creating our first block

Luma Banner
Initial Banner Block
<?php 
/** @var MediaLounge\Storyblok\Block\Container\Element $block */
?>
<div class="block-promo">
<img
width="1280"
height="460"
src="<?= $block->transformImage($block->getImage()['filename'], '1280x460') ?>"
alt="<?= __('New Luma Collection') ?>"
>
<span class="block-content">
<span class="block-info"><?= $block->getTitle() ?></span>
<?= $block->renderWysiwyg($block->getContent()) ?>
</span>
</div>
Banner Block Preview

Nesting blocks

<?php 
/** @var MediaLounge\Storyblok\Block\Container\Element $block */
?>
<a href="<?= $block->getData('url')['cached_url'] ?>">
<?= $block->getText() ?>
</a>
Button Block
Button Block Field
<?php 
/** @var MediaLounge\Storyblok\Block\Container\Element $block */
?>
<div class="block-promo">
<img
width="1280"
height="460"
src="<?= $block->transformImage($block->getImage()['filename'], '1280x460') ?>"
alt="<?= __('New Luma Collection') ?>"
>
<span class="block-content">
<span class="block-info"><?= $block->getTitle() ?></span>
<?= $block->renderWysiwyg($block->getContent()) ?>
<?= $block->getChildHtml() ?>
</span>
</div>
Banner Block with Button
Full Visual Editor Demo

Editable Sections

<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>
Editable Footer Block

SEO

Sitemap Integration

Custom SEO field

SEO Meta Fields Block

Custom Fields

Magento Product Finder Custom Field

Performance

Try it yourself!

Lead Developer at Media Lounge · 6x Magento Certified & Full Stack Developer · E-Commerce Specialist · Currently @ Bournemouth, UK