Displaying CMS blocks on the Shopware Category page permits you to let the customers know about some special offers and the new category pages. There are a plethora of reasons to append a CMS block to the category page in Shopware. And most of them might not be new to you.
So, let’s start learning how to create a CMS block on a Shopware category page
First, you need to create blocks.
Create plugin and add new block and element on this path
PluginRoot/src/Resources/app/administration/src/module/sw-cms
For blocks create folder in sw-cms directory on this path:
PluginRoot/src/Resources/app/administration/src/module/sw-cms/blocks
Then you need to choose a category for cms block these all are categories in shopware see the screenshot:
Here we are going to create a text & images block, for that create a folder “text-image” in the blocks folder:
PluginRoot/src/Resources/app/administration/src/module/sw-cms/blocks/text-image
In this folder, you can create your block with any name I am creating a block that shows the text on right.
First I need to show the image then text on its right, then the other image and text on its right:
Please see the below screenshot for block preview:
After creating “text-image” folder, you need to create a folder for block name as I have created “right-text” folder.
PluginRoot/src/Resources/app/administration/src/module/sw-cms/blocks/text-image/right-text
Then here you need to create two folders:
- component
- preview
In both folders you need to create:
html.twig file, index.js file, .scss file is not mandatory.
Create these files in component
Component ->
1. sw-cms-block-right-text.html.twig
Code:
{% block sw_cms_block_right_text %}
<div class="sw-cms-block-right-text">
<div class="sw-cms-block-right-text__image-left">
<slot name="left"></slot>
</div>
<div class="sw-cms-block-right-text__text">
<slot name="left-text"></slot>
</div>
<div class="sw-cms-block-right-text__image-center">
<slot name="center"></slot>
</div>
<div class="sw-cms-block-right-text__text">
<slot name="right"></slot>
</div>
</div>
{% endblock %}
2. sw-cms-block-right-text.scss
Code:
.sw-cms-block-right-text {
display: flex;
flex-wrap: wrap;
.sw-cms-block-right-text__text {
flex-grow: 2;
flex-shrink: 0;
flex-basis: 300px;
}
.sw-cms-block-right-text__image-left,
.sw-cms-block-right-text__image-center {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 240px;
}
.sw-cms-el-image.is--cover {
min-height: 340px;
}
.sw-cms-el-text {
padding-top: 20px;
}
.sw-cms-el-image.is--cover {
min-height: 200px;
}
}
3. index.js
Then include both files in index.js
import template from './sw-cms-block-right-text.html.twig';
import './sw-cms-block-right-text.scss';
const { Component } = Shopware;
Component.register('sw-cms-block-right-text', {
template,
});
Next, go to the preview folder to create a preview in admin:
PluginRoot/src/Resources/app/administration/src/module/sw-cms/blocks/text-image/right-text/preview
In preview folder create the files:
1. sw-cms-preview-right-text.html.twig
Code:
{% block sw_cms_block_right_text_preview %}
<div class="sw-cms-preview-right-text">
<div class="sw-cms-preview-right-text__image">
<img :src="'/administration/static/img/cms/preview_camera_small.jpg' | asset">
</div>
<div>
<p>Lorem ipsum dolor sit amet elitr.</p>
</div>
<img :src="'/administration/static/img/cms/preview_plant_small.jpg' | asset">
<div class="sw-cms-preview-right-text__text">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet elitr.</p>
</div>
</div>
{% endblock %}
2. sw-cms-preview-right-text.scss
Code:
.sw-cms-preview-right-text {
display: grid;
grid-template-columns: 0.5fr 0.5fr 1fr 1fr;
padding: 15px;
.sw-cms-preview-right-text__image {
height: 80px;
margin-bottom: 10px;
}
.sw-cms-preview-right-text__text {
padding: 15px;
text-align: center;
height: 124px;
}
img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
}
3. index.js
Include both files in index.js
Code:
import template from './sw-cms-preview-right-text.html.twig';
import './sw-cms-preview-right-text.scss';
const { Component } = Shopware;
Component.register('sw-cms-preview-right-text', {
template,
});
Now go to your main folder of block and create index.js file
PluginRoot/src/Resources/app/administration/src/module/sw-cms/blocks/text-image/right-text
In this file you need to import component and preview folders, then you need to assign all the slots which we have defined in component, Look into the screenshot:
import './component';
import './preview';
Shopware.Service('cmsService').registerCmsBlock({
name: 'right-text',
label: 'sw-cms.blocks.textImage.rightText.label',
category: 'text-image',
component: 'sw-cms-block-right-text',
previewComponent: 'sw-cms-preview-right-text',
defaultConfig: {
marginBottom: '20px',
marginTop: '20px',
marginLeft: '20px',
marginRight: '20px',
sizingMode: 'boxed',
},
slots: {
left: {
type: 'image',
default: {
config: {
displayMode: { source: 'static', value: 'cover' },
},
data: {
media: {
url: '/administration/static/img/cms/preview_camera_large.jpg',
},
},
},
},
'left-text': {
type: 'text',
default: {
config: {
content: {
source: 'static',
value: `
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
`.trim(),
},
},
},
},
center: {
type: 'image',
default: {
config: {
displayMode: { source: 'static', value: 'cover' },
},
data: {
media: {
url: '/administration/static/img/cms/preview_plant_large.jpg',
},
},
},
},
right: {
type: 'text',
default: {
config: {
content: {
source: 'static',
value: `
<h2 style="text-align: center;">Lorem Ipsum dolor sit amet</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
`.trim(),
},
},
},
},
},
});
Then go to the admin panel and add a block, see screenshot:
Click on the settings icon and add the image, Image is required but the text can be the same or you can also change it. Then save and you can see the output on the front.
Wrapping Up
This way, you can create text and image category block (CMS) in admin on a Shopware page and make your consumers know about the special offers you will provide them. Also, if you need any assistance with a project then you can consult professional Shopware developers at Emizentech.
#23 Chase Tower, opp. Metro Pillar 31,
USA
UK
