I started to learn how to create a custom block in shopware 6. To do this I setup a development environment using ddev. This wasn't as easy as it should've been, since I needed version 6.4.2.0 of shopware.
So my shop is running locally and I started creating an extension and followed this guide to add custom blocks to the "Shopping Experiences", which resulted in my own plugin.
After having installed the extension I called ddev exec ./bin/build-administration.sh
to "register" my custom blocks. The command finished successfully.
However, I am not seeing my block anywhere. So I have two questions:
I tried to follow the guide I had as strictly as possible. Since I don't know how to properly debug shopware, I only copy/pasted all files and their respective contents according to the guide.
I found the issue and I am perplexed.
In an effort to keep my code "dry" I exported the config:
export const config = {
name: blockName,
// label: 'sw-cms.blocks.text.text.label',
label: "My Image Text Block!",
category: "text-image", // TODO: add custom category
component: `sw-cms-block-${blockName}`,
previewComponent: `sw-cms-preview-${blockName}`,
defaultConfig: {
marginBottom: "20px",
marginTop: "20px",
marginLeft: "20px",
marginRight: "20px",
sizingMode: "boxed",
},
slots: {
left: "text",
right: "image",
},
};
and used them like
import { config } from "../index";
import template from "./sw-cms-block-my-image-text-reversed.html.twig";
import "./sw-cms-block-my-image-text-reversed.scss";
const { Component } = Shopware;
/**
* @private since v6.5.0
* @package content
*/
Component.register(config.component, {
template,
});
This however doesn't work, I have to use the names of the component or preview that I want to register as a full string.
I don't know why that is, maybe there is some magic happening which I don't understand or I have simply made a mistake somewhere. I can't find it though.
For now I will write the whole name of the component/preview file. I found the cause by an error that has been thrown in the browser console.