Hallo,
Ich beiße mir seit zwei Tagen die Zähne aus, weshalb ich hoffe, dass mir jemand helfen kann.
Ich habe nach der „Add CMS block“-Anleitung (Add CMS block - Shopware Developer) ein Plugin erstellt, um einen eigenen CMS Block zu implementieren. Nachdem ich gleich versucht hatte, eigene Anpassungen am Tutorial vorzunehmen, habe ich schlussendlich 1:1 das Beispiel aus der Anleitung nachgebaut. Zudem habe ich eine Testumgebung mit dem Development Template aufgesetzt und nach Installation des CMS Plugins den Befehl „./psh.phar administration:build“ ohne Fehlermeldung durchgeführt. Die entsprechenden Dateien im „public“ Ordner im Plugin Verzeichnis wurden auch generiert. Jedoch schaffe ich es nicht, dass der CMS-Block im Erlebniswelten-Editor erscheint.
Da ich immer wieder alle Pfade und Dateien kontrolliert und auch mit den Dateien auf GitHub verglichen habe, bin ich mir recht sicher, dass dort kein Fehler vorliegt. Da sich das Plugin auch einwandfrei installieren und die Dateien generieren lassen, bin ich mir auch eigentlich sicher, dass ich dort auch keinen Fehler im Ablauf der Erstellung habe. Unter Umständen übersehe ich auch einfach etwas.
Hier meine Quelldateien:
composer.js
{
"name": "swag/custom-cms-block",
"description": "Example plugin which adds a custom block for the CMS",
"version": "v1.0.0",
"type": "shopware-platform-plugin",
"license": "MIT",
"authors": [
{
"name": "shopware AG"
}
],
"require": {
"shopware/core": "*",
"shopware/administration": "*",
"shopware/storefront": "*"
},
"extra": {
"shopware-plugin-class": "Swag\\CustomCmsBlock\\CustomCmsBlock",
"label": {
"de-DE": "Label für das Plugin CustomCmsBlock",
"en-GB": "Label for the plugin CustomCmsBlock"
},
"description": {
"de-DE": "Beschreibung für das Plugin CustomCmsBlock",
"en-GB": "Description for the plugin CustomCmsBlock"
}
},
"autoload": {
"psr-4": {
"Swag\\CustomCmsBlock\\": "src/"
}
}
}
CustomCmsBlock.php
<?php declare(strict_types=1);
namespace Swag\CustomCmsBlock;
use Shopware\Core\Framework\Plugin;
class CustomCmsBlock extends Plugin
{
}
main.js
import './module/sw-cms/blocks/text-image/image-text-reversed';
index.js (im Block-Ordner)
import './component';
import './preview';
Shopware.Service('cmsService').registerCmsBlock({
name: 'image-text-reversed',
label: 'Text next to image',
category: 'text-image',
component: 'sw-cms-block-image-text-reversed',
previewComponent: 'sw-cms-preview-image-text-reversed',
defaultConfig: {
marginBottom: '20px',
marginTop: '20px',
marginLeft: '20px',
marginRight: '20px',
sizingMode: 'boxed'
},
slots: {
left: 'text',
right: 'image'
}
});
index.js (im component Ordner)
import template from './sw-cms-block-image-text-reversed.html.twig';
import './sw-cms-block-image-text-reversed.scss';
Shopware.Component.register('sw-cms-block-image-text-reversed', {
template
});
sw-cms-block-image-text-reversed.html.twig (im component Ordner)
{% block sw_cms_block_image_text_reversed %}
<div class="sw-cms-block-image-text-reversed">
<slot name="left">{% block sw_cms_block_image_text_reversed_slot_left %}{% endblock %}</slot>
<slot name="right">{% block sw_cms_block_image_text_reversed_slot_right %}{% endblock %}</slot>
</div>
{% endblock %}
sw-cms-block-image-text-reversed.scss (im component Ordner)
.sw-cms-block-image-text-reversed {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 40px;
}
index.js (im preview Ordner)
import template from './sw-cms-preview-image-text-reversed.html.twig';
import './sw-cms-preview-image-text-reversed.scss';
Shopware.Component.register('sw-cms-preview-image-text-reversed', {
template
});
sw-cms-preview-image-text-reversed.html (im preview Ordner)
{% block sw_cms_block_image_text_reversed_preview %}
<div class="sw-cms-preview-image-text-reversed">
<div>
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
<img :src="'/administration/static/img/cms/preview_mountain_small.jpg' | asset">
</div>
{% endblock %}
sw-cms-preview-image-text-reversed.scss (im preview Ordner)
.sw-cms-preview-image-text-reversed {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
padding: 15px;
}
Und hier die Pfad-Struktur:
Ich hoffe mir kann jemand helfen. Vielleicht (oder besser gesagt hoffentlich) übersehe ich auch einfach eine Kleinigkeit die ganz offensichtlich ist.