Last Updated on January 21, 2022

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:

block 2

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:block 3

	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:
block 4block 5
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.

Author

Founder and tech lead at Emizentech, Mr. Vivek has over ten years of experience in developing IT infrastructures and solutions. With his profound knowledge in eCommerce technologies like Shopware, Magento, and Shopify, Mr. Vivek has been assisting SMEs to enterprises across the globe by developing and maintaining their eCommerce applications. Technology innovation and trends insight come easy to Vivek with his thorough knowledge in the eCommerce domain. See him talking about ideas, trends, and technology in this blog. To know more about how Team Vivek can assist you in your eCommerce strategy? Connect team Vivek here.