CMS-Block erstellen in Shopware 6

CMS-Block erstellen in Shopware 6

Veröffentlicht am 14.10.2023

# Shopware# Shopware 6

Table of Contents

Einleitung

Auf meinem Hashnode Blog gibt es bereits einen Blog Post, der Dir zeigt wie Du einen CMS-Block in Shopware 6 erstellen kannst. In diesem Post passiert das ganze auf deutsch!

Die offizielle Shopware 6 Dokumentation lege ich Dir ebenfalls ans Herz. Die Dokumentation scheint es nur auf englisch zu geben.

Was ist ein CMS-Block?

In der offizielle Shopware 6 Dokumentation gibt es einen Unterschied zwischen einem CMS-Block und einem CMS-Element.

Leider sind beide Anleitungen völlig unabhĂ€ngig voneinander. Um ein besseres VerstĂ€ndnis dafĂŒr zu bekommen, wie Blöcke und Elemente zusammenarbeiten, werden wir einen Block erstellen und das zugehörige Element.

FĂŒr mich ist der CMS-Block nur der Ă€ußere Wrapper. Es ist einfach ein Block, und Du kannst jedes Element in den Block einfĂŒgen. Das ist die beste Beschreibung die ich habe. Schauen wir uns das mal gemeinsam an.

Blockkategorien

StandardmĂ€ĂŸig haben wir folgende Kategorien fĂŒr einen Block:

  • Text
  • Text & Bilder
  • Bilder
  • E-Commerce
  • Formular
  • Seitenleiste
  • Video

Du hast diese Kategorien wahrscheinlich bereits in den Erlebniswelten gesehen.

Shopware 6 Kategorien

Jetzt können wir unseren CMS-Block in eine dieser Kategorien einordnen. In dieser Anleitung erstellen wir eine einfache SchaltflÀche. Eine SchaltflÀche ist im Grunde nur Text, daher wÀhlen wir diese Kategorie. Es ist Zeit, endlich in den Code einzusteigen!

Administrations-Code

Wenn du ein Shopware 6 Plugin erstellst, ist die Verzeichnisstruktur ziemlich wichtig. Das erste, was wir tun mĂŒssen, ist, unsere index.js in folgendem Verzeichnis zu erstellen: src > Resources > app > administration > src > module > sw-cms > blocks > text > cms-button

Das Verzeichnis ist fĂŒr die Kategorie verantwortlich. Da wir möchten, dass unser CMS-Block im Text-Verzeichnis erscheint, heißt der Ordner “text”. Wenn du deinen CMS-Block in einer anderen Kategorie platzieren möchtest, Ă€ndere einfach den Ordnernamen.

Ein Blick auf den Shopware Code hilft vielleicht.

Unsere index.js:

import './component';
import './preview';

Shopware.Service('cmsService').registerCmsBlock({
    name: 'button',
    label: 'sw-cms.blocks.text.ninja-cms-button.label',
    category: 'text',
    component: 'sw-cms-block-button',
    previewComponent: 'sw-cms-preview-button',
    defaultConfig: {
        marginBottom: '20px',
        marginTop: '20px',
        marginLeft: '20px',
        marginRight: '20px',
        sizingMode: 'boxed'
    },
    slots: {
        button: 'text'
    }
});

Dann schauen wir uns mal den Code an! Der Code beginnt mit zwei Imports, die wir vorerst ignorieren können. Wir mĂŒssen zuerst die Verzeichnisse erstellen, was wir spĂ€ter in diesem Guide tun werden.

Dann verwenden wir die Methode registerCmsBlock.

  • name: Der technische Name des Blocks.
  • label: Ein Name, der fĂŒr den Block angezeigt wird.
  • category: Die Kategorie, zu der dieser Block gehört.
  • component: Die Vue-Komponente, die verwendet wird, um den Block in der Administrations-Sidebar zu rendern.
  • previewComponent: Die Vue-Komponente, die in der “Liste der verfĂŒgbaren Blöcke” verwendet wird. Zeigt nur eine kleine Vorschau des Blocks.
  • defaultConfig: Eine Standardkonfiguration, die auf den Block angewendet wird.
  • slots: Key-Value-Paar zur Konfiguration, welches Element in welchem Slot angezeigt werden soll. Dies wird in den nĂ€chsten Schritten erklĂ€rt, wenn eine Vorlage fĂŒr den Block erstellt wird.

Das ist unser Code! Du hast vielleicht bemerkt, dass wir weder den component noch die previewComponent erstellt haben, oder? Das werden wir jetzt tun!

Block-Komponente

Wir mĂŒssen ein Verzeichnis fĂŒr die Komponente erstellen: /src/Resources/app/administration/src/module/sw-cms/blocks/text/cms-button/component. In diesem Verzeichnis erstellen wir eine Datei sw-cms-block-button.html.twig:

{% block sw_cms_block_button %}
	<div class="sw-cms-block-button">
		<slot name="button"></slot>
	</div>
{% endblock %}

GlĂŒcklicherweise haben wir hier nicht viel Code zu betrachten. Eine Sache, die Dir wahrscheinlich aufgefallen ist, ist, dass wir hier einen Slot festgelegt haben. Der Slot-Name lautet “button”. In unserer ersten Datei haben wir diesen Slot in unserem Konfigurationsobjekt platziert. Du kannst Slots beliebig bennen, aber sei Dir sicher, dass Du das Konfigurationsobjekt entsprechend Ă€nderst.

Registrierung Block-Komponente

Die Block-Komponente muss ebenfalls registriert werden. Um die Komponente zu registrieren, erstellen wir erneut eine index.js-Datei und legen sie in /src/Resources/app/administration/src/module/sw-cms/blocks/text/cms-button/component ab:

const { Component } = Shopware;

Component.register('sw-cms-block-button', {
    template
});

Wie Du sehen kannst, importieren wir einfach die Vorlage, die wir gerade erstellt haben, und registrieren dann die Komponente. Das ist alles fĂŒr die Komponente, aber wir mĂŒssen immer noch die Vorschau implementieren.

Block-Vorschau

Die Vorschau funktioniert im Wesentlichen genauso wie die Komponente. Schauen wir uns kurz an wo diese Vorschau zu sehen ist:

Shopware 6 CMS-Block Vorschau

Das ist die Vorschau unseres Blocks. Du wirst die Vorschau-Komponente in der ausgewÀhlten Kategorie sehen. Um die Vorschau zu erstellen, benötigen wir unser Vorschau-Verzeichnis: /src/Resources/app/administration/src/module/sw-cms/blocks/text/cms-button/preview, und erstellen dann eine Datei sw-cms-preview-button.html.twig:

{% block sw_cms_block_ninja_button_preview %}
    <div class="ninja-button-flex-center">
        <button class="sw-cms-preview-ninja-button">Button</button>
    </div>
{% endblock %}

Dieser Code ist fĂŒr unsere Vorschau verantwortlich. Da wir nur einen Button haben, benötigen wir hier nicht viel Code.

Styling der Vorschau-Komponente

Wir können unsere Vorschau-Komponente stylen, damit sie so aussieht, wie wir es möchten. DafĂŒr erstellen wir einfach eine .scss-Datei wie /src/Resources/app/administration/src/module/sw-cms/blocks/text/cms-button/preview/sw-cms-preview-button.scss:

.ninja-button-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    .sw-cms-preview-ninja-button {
        background-color: #4492ed;
        border: none;
        color: white;
        padding: 16px 60px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        fontgrĂ¶ĂŸe: 16px;
    }
}

Block Komponente registrieren

Wir mĂŒssen auch die Vorschau-Komponente registrieren. Dies funktioniert genauso wie zuvor. Also mĂŒssen wir erneut eine index.js erstellen und sie in /src/Resources/app/administration/src/module/sw-cms/blocks/text/cms-button/preview/index.js

import template from './sw-cms-preview-button.html.twig';
import './sw-cms-preview-button.scss';

const { Component } = Shopware;

Component.register('sw-cms-preview-button', {
    template
});

Jetzt sind wir fast fertig. Wir haben die Komponente und die Vorschaukomponente fĂŒr die Administration erstellt. Schauen wir uns an, wie diese Komponenten auch in der Administration angezeigt werden.

Integration in die Administration

Wir haben unseren CMS-Block geschrieben, aber er muss von Shopware gefunden werden. DafĂŒr benötigen wir den Einstiegspunkt, der sich in der Datei main.js befindet. Platziere diese Datei in <Plugin-Wurzel>/src/Resources/app/administration/src und wir mĂŒssen nur unseren CMS-Block hier importieren:

import './module/sw-cms/blocks/text/cms-button';

Administration build

Damit Ihr Block in der Shopware-Administration angezeigt wird, mĂŒssen Sie jetzt eine Build-Operation in Ihrer Konsole ausfĂŒhren.

Entwicklungs-Vorlage: ./psh.phar administration:build

Produktions-Vorlage: ./bin/build-administration.sh

Das Ergebnis in der Administration

Wenn wir alles richtig gemacht haben, sollten wir in der Administration ein Ergebnis sehen, das so aussieht:

Jetzt haben wir den Block und können ihn in den Erlebniswelten benutzen, aber es ist immer noch kein Button, oder? Es ist nur ein Textelement. Um es tatsĂ€chlich wie einen Button funktionieren zu lassen, mĂŒssen wir das CMS-Element fĂŒr den Block erstellen.

Wir sehen auch noch nichts im Frontend. Das lÀsst sich schnell beheben!

Frontend-Implementation

Um eine Frontend-Ansicht zu erstellen, mĂŒssen wir nur eine Twig-Datei in das richtige Verzeichnis mit dem richtigen Namen platzieren. In diesem Beispiel wĂŒrden wir eine Datei wie diese erstellen: /src/Resources/views/storefront/block/cms-block-cms-button.html.twig.

{% block block_cms_button_example %}
    <div class="cms-element ninja-cms-button-flex ninja-cms-button-flex-center">
        {% block element_text_button %}
            <a href="#">
                <button class="ninja-cms-btn">
                    Button
                </button>
            </a>
        {% endblock %}
    </div>
{% endblock %}

Das ist es! Wir haben jetzt einen Block in der Shopware-Administration und auch eine Frontend-Ansicht. Passen wir die Frontend-Ansicht noch mit ein wenig CSS an.

Frontend-SCSS

Im Frontend sieht unser Block im Moment schrecklich aus und unterscheidet sich komplett von dem, was wir in den Erlebniswelten definiert haben. Mit folgendem CSS können wir das Àndern.

.ninja-cms-btn {
    padding: 1rem;

    &:hover {
        filter: brightness(110%);
    }
}

.ninja-cms-button-flex {
    display: flex;
    margin: auto;

    &-start {
        justify-content: flex-start;
    }

    &-center {
        justify-content: center;
    }

    &-end {
        justify-content: flex-end;
    }

    a {
        button {
            background-color: #4492ed;
            border: none;
            color: #fff;
            padding: 14px 50px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            fontgrĂ¶ĂŸe: 16px;
            margin: 30px 0;
        }
    }
}

Warum unterscheidet sich die Administration von der Storefront?

In den Erlebniswelten ist unser Block im Grunde ein Textelement, oder? Wenn Du die Kommentare im Code gelesen hast, weißt Du bereits warum. Wir haben einen Slot definiert und diesem Slot das Element “Text” zugewiesen. Wenn wir also einen echten Button mit echter Konfiguration haben möchten, mĂŒssen wir ein CMS-Element dafĂŒr erstellen.

In unserem nĂ€chsten Guide werden wir uns ansehen, wie man ein CMS-Element in Shopware 6 erstellen kann. Der nĂ€chste Guide basiert auf diesem unseren “Wie man einen CMS-Block in Shopware 6 erstellt”-Guide, da wir das Element fĂŒr den Block erstellen werden.

Github

Wenn Du nur einen Blick auf den Code werfen möchtest oder das Repository klonen möchtest, dann schau Dir einfach das Projekt auf GitHub an.