Skip to main content

Register CMS block

Available since Shopware v6.6.1.0

With cms.registerCmsBlock you can register CMS blocks to use in the Shopping Experiences Module.

Register a CMS block in your Shopping Experiences Module via App

Usage:

cms.registerCmsBlock({
name: 'dailymotion-dual-block',
label: 'ex.cms.dailymotion.block.label',
slots: [
{ element: 'dailymotionElement' },
{ element: 'dailymotionElement' },
],
// optional properties
category: 'video',
previewImage: 'https://placehold.co/350x200',
slotLayout: {
grid: 'auto / auto auto'
},
});

Parameters

NameRequiredDescription
nametrueThe name of the cms block - Should have vendor prefix. It can be used in the Storefront for overriding the default layout.
labeltrueThe label, which is visible when selecting the cms element - Use snippet keys here
slotstrueArray containing the slots. The content of the array are objects with the property "element" which refers to a real CMS element (can also be your own custom CMS elements).
category falseThe category of the CMS block. This is used to group the CMS blocks in the Shopping Experiences Module. You can use existing ones or create your own category. Then you need to provide a snippet for the category following this pattern: apps.sw-cms.detail.label.blockCategory.${yourCategoryName}
previewImagefalseThe URL of the preview image. This image is shown in the Shopping Experiences Module when selecting the CMS block.
slotLayoutfalseThe layout of the slots. This is used to define the grid layout of the slots. You can use the CSS grid shorthand syntax here.

Storefront usage

The CMS block will render automatically in the Storefront without any additional work. It renders the block as a CSS grid with the slots as grid items and the grid shorthand syntax you provided in the slotLayout property.

If you want you can override the default layout by creating a new template file in your app. The file should be named cms-block-app-renderer.html.twig and should be placed in the <your-app>/Resources/views/storefront/block directory of your app folder. More details on how to customize the Storefront in your App can be found in this documentation: https://developer.shopware.com/docs/guides/plugins/apps/storefront/customize-templates.html

Inside this file you need to define the block layout and the slots. The block which needs to be created follows this naming pattern: block_app_renderer_${yourBlockName}. The ${yourBlockName} is the name of the block you registered with cms.registerCmsBlock except that you need to replace the hyphens with underscores.

If you want to have multiple different templates for multiple different CMS blocks you can add new Twig blocks for each CMS block in the same file.

Example:

{% sw_extends '@Storefront/storefront/block/cms-block-app-renderer.html.twig' %}

{% block block_app_renderer_dailymotion_dual_block %}
<div>
<h1>Your custom implementation</h1>

{# Render each slot content #}
{% for slot in block.slots %}
{% set element = block.slots.getSlot(slot.slot) %}

<div>
{% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
</div>
{% endfor %}
</div>
{% endblock %}