image_text. It renders an image element on the left side and a simple text element on the right side. In this guide, you're going to create a new block to swap those two elements, so the text is on the left side and the image on the right side.
commerce: Blocks using a special template can be found here, e.g. a product slider block.
form: A single block displaying a form, mainly the
image: Only image elements are used by these blocks.
sidebar: Blocks for the sidebar, such as the listing filters or the category navigation.
text-image: Blocks, that are making use of both, text and images, belong here.
text: Blocks only using text elements are located here.
video: Our blocks for youtube and vimeo videos reside here.
main.jsfile. It has to be placed into a
<plugin root>/src/Resources/app/administration/srcdirectory in order to be automatically found by Shopware 6.
main.jsfile for now, it will be used later.
textelement, so it belongs to the category
text-image. Thus, create the directory
my-image-text-reversedis going to be used, so create this directory in there.
my-image-text-reverseddirectory, since it will be automatically loaded when importing this block in your
main.js. Speaking of that, right after having created the
index.jsfile, you can actually import your new block directory in the
index.js, which is still empty. In order to register a new block, you have to call the
registerCmsBlockmethod of the cmsService. Since it's available in the Dependency Injection Container, you can fetch it from there.
Applicationwrapper, which will grant you access to the DI container. This
Applicationwrapper has access to the DI container, so go ahead and fetch the
cmsServicefrom it and call the mentioned
registerCmsBlocktakes a configuration object, containing the following necessary data:
name: The technical name of your block. Will be used for the template and component loading later on.
label: A name to be shown for your block in the User Interface.
category: The category this block belongs to.
component: The Vue component to be used when rendering your actual block in the administration sidebar.
previewComponent: The Vue component to be used in the "list of available blocks". Just shows a tiny preview of what your block would look like if it was used.
defaultConfig: A default configuration to be applied to this block. Must be an object containing those default values.
slots: Key-value pair to configure which element to be shown in which slot. Will be explained in the next few steps when creating a template for this block.
previewComponentdo not exist yet, but they are created later in this guide. The
defaultConfigjust gets some minor margins and the sizing mode 'boxed', which will result in a CSS class is--boxed being applied to that block later. The slots are defined by an object, where the key represents the slot's name and the value being the technical name of the element to be used in this slot. This will be easier to understand when having a look at the respective template in a few minutes. Also you might want to have a look at the Vue documentation regarding slots.
nameof the component to be used when rendering your block to be 'sw-cms-block-my-image-text-reversed'. This component does not exist yet, so let's create this one real quick. As already mentioned, creating a component is not explained by this guide in detail, so you might want to head over to our guide about Creating a component first.
componentin your block's directory. In there, create a new
index.jsfile and register your custom component
nameproperty mentioned in your
index.js, while registering your cms block component via
right. Make sure to create those slots in the template as well now.
.scssfile, create it now by adding the file
componentdirectory in your
index.jsfile, so your new component actually gets loaded.
previewComponentcontaining the value
sw-cms-preview-my-image-text-reversed. Time to create this component as well. For this purpose, stick to the core structure again and create a new directory
preview. In there, again, create an
index.jsfile, register your component by its name and load a template and a
sw-cms-preview-my-image-text-reversed.html.twigfile in your
previewdirectory with the following content.
sw-cms-preview-my-image-text-reversed.scsswith the following styles:
index.jsas well. This is, what your final block's
index.jsfile should look like now: