Beispiel Plugin zu "Adding a custom CMS block" zeigt in Frontend nichts an unter v6.1.0

Shopware 6 (German) Programmierung
1

Hallo zusammen!

Ich arbeite mich gerade durch die Anleitung aus der Doku, wie man mittels eines Plugins einen eigenen CMS-Block hinzufügen kann. Die Anleitung ist hier zu finden: https://docs.shopware.com/en/shopware-platform-dev-en/how-to/custom-cms-block?category=shopware-platform-dev-en/how-to

Dazu gibt es auch ein Demo-Plugin, welches auf der Anleitung basiert: https://github.com/shopware/swag-docs-custom-cms-block

Nach der Installation und Aktivierung des Plugins taucht bei mir zwar der neue Block in der Kategorie “Text & Bild” auf (“Text next to image”) und ich kann diesen auch zum Layout hinzufügen. Doch auch wenn ich den Block mit den gewünschten Inhalten (Text und eigenes Bild) befülle, wird dieser im Frontend leider nicht angezeigt. Die anderen Standard-Blöcke werden im Frontend wie gewünscht mit meinen Inhalten angezeigt.

Funktioniert das Plugin bei euch unter der Version v6.1.0 (Stable Version)? Muss ich noch etwas Zusätzliches beachten?

Über eure Hilfe wäre ich sehr dankbar.

2

Ich habe den Fehler gefunden, im Beispiel Plugin ist in der cms-block-image-text-reversed.html.twig-Datei noch der alte bzw. falsche Pfad, es müsste so heißen:

 {% sw\_extends '@Storefront/storefront/block/cms-block-image-text.html.twig' %}

Das entpsricht auch der Doku, hier ist es korrekt geschrieben.

3

Hallo Liiila,

vielen Dank für den Hinweis Thumb-Up. Ich habe es direkt in dem Plugin auf GitHub angepasst.

 

Viele Grüße aus Schöppingen, 

Timo

1 „Gefällt mir“
4

Hallo Timo! Perfekt, vielen Dank!

5

Muss mich hier noch so langer Zeit auch zu diesem Thema melden, Frontend zeigt ebenfalls nichts an … außer einem leeren div - weshalb ich vermute meine Ordnerstruktur ist fehlerhaft, finde den Fehler aber nicht.

plugins
├── composer.json
└── src
    ├── blocks.php
    └── Resources
        ├── app
        │   └── administration
        │       └── src
        │           ├── main.js
        │           └── module
        │               └── sw-cms
        │                   └── blocks
        │                       └── text-image
        │                           └── image-text-reversed
        │                               ├── component
        │                               │   ├── index.js
        │                               │   ├── sw-cms-block-image-text-reversed.html.twig
        │                               │   └── sw-cms-block-image-text-reversed.scss
        │                               ├── index.js
        │                               └── preview
        │                                   ├── index.js
        │                                   ├── sw-cms-preview-image-text-reversed.html.twig
        │                                   └── sw-cms-preview-image-text-reversed.scss
        ├── config
        │   └── services.xml
        ├── public
        │   ├── administration
        │   │   ├── css
        │   │   │   └── blocks.css
        │   │   └── js
        │   │       └── blocks.js
        │   └── static
        │       ├── css
        │       └── js
        └── views
            └── storefront
                └── block
                    └── cms-block-image-text-reversed.html.twig

cms-block-image-text-reversed.html.twig unter views/storefront/block scheint nicht berücksichtigt zu werden.

6

Okay, Fehler gefunden: lag nicht an mir sondern an der Anleitung :wink: Der vergebene Name aus der Config muss genutzt werden.

cms-block-image-text-reversed.html.twig ==> cms-block-**my**-image-text-reversed.html.twig

In there, a twig template named after your block is expected.

So go ahead and re-create that structure in your plugin: <plugin root>/src/Resources/views/storefront/block/

In there create a new twig template named after your block, so cms-block-image-text-reversed.html.twig that is.

…

/src/Resources/views/storefront/block/cms-block-image-text-reversed.html.twig

{% sw_extends ‚@Storefront/storefront/block/cms-block-image-text.html.twig‘ %}

Wäre gut, wenn das evtl angepasst werden könnte :wink:

7

Unglaublich! Wenn der Dateiname in der Doku einfach so dastehen (cms-block-my-image-text-reversed.html.twig) würde, wäre das sicher nicht ganz so verwirrend

Vielen Dank @D4ni3l

8

Moin zusammen,

Bin gerade auf eure Diskussion gestoßen. Nur für’s Verständnis. Kann mir jemand den unterscheid zwischen eine CMS Element und einem CMS Block erklären?

9

Hatte mit der Anleitung ab dem Part Storefrontauch ein bisschen zu kämpfen. Insbesondere da ich einen anderen Namen für den Block vergeben habe, als in der Anleitung.
Hier also noch meine Ergänzung, falls sich jemand fragt, warum sein Storefront twig nicht angezogen wird:

Der Name der Storefront Twig muss wie folgt lauten:
cms-block-name*DesBlocksWieErInDerIndex.jsDefiniertWurde*.html.twig

Ich hatte noch Issues mit der Ausgabe und habe sichergestellt, dass der Block im Twig-File dem aus dem components-Twig File entspricht.

…/src/Resources/app/administration/src/module/sw-cms/blocks/text-image/four-images-with-text/index.js

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

Shopware.Service('cmsService').registerCmsBlock({
    name: 'four-images-with-text',
    category: 'text-image',
    label: 'Four Images with Text!',
    component: 'sw-cms-block-four-images-with-text',
    previewComponent: 'sw-cms-preview-four-images-with-text',
    defaultConfig: {
        marginBottom: '20px',
        marginTop: '20px',
        marginLeft: '20px',
        marginRight: '20px',
        sizingMode: 'boxed'
    },
    slots: {
        leftTop: 'image',
        leftBottom: 'text',
        leftCenterTop: 'image',
        leftCenterBottom: 'text',
        rightCenterTop: 'image',
        rightCenterBottom: 'text',
        rightTop: 'image',
        rightBottom: 'text'
    }
});

…/src/Resources/app/administration/src/module/sw-cms/blocks/text-image/four-images-with-text/component/sw-cms-block-sw-cms-block-four-images-with-text.html.twig

{% block sw_cms_block_four_images_with_text %}
    <div class="sw-cms-block-four-images-with-text-row">
        <div>
            <slot name="leftTop">{% block sw_cms_block_four_images_with_text_slot_leftTop %}{% endblock %}</slot>
            <slot name="leftBottom">{% block sw_cms_block_four_images_with_text_slot_leftBottom %}{% endblock %}</slot>
        </div>
        <div>
            <slot name="leftCenterTop">{% block sw_cms_block_four_images_with_text_slot_leftCenterTop %}{% endblock %}</slot>
            <slot name="leftCenterBottom">{% block sw_cms_block_four_images_with_text_slot_leftCenterBottom %}{% endblock %}</slot>
        </div>
        <div>
            <slot name="rightCenterTop">{% block sw_cms_block_four_images_with_text_slot_rightCenterTop %}{% endblock %}</slot>
            <slot name="rightCenterBottom">{% block sw_cms_block_four_images_with_text_slot_rightCenterBottom %}{% endblock %}</slot>
        </div>
        <div>
            <slot name="rightTop">{% block sw_cms_block_four_images_with_text_slot_rightTop %}{% endblock %}</slot>
            <slot name="rightBottom">{% block sw_cms_block_four_images_with_text_slot_rightBottom %}{% endblock %}</slot>
        </div>
    </div>
{% endblock %}

…/src/Resources/views/storefront/block/cms-block-four-images-with-text.html.twig


{% block sw_cms_block_four_images_with_text_slot_leftTop %}
{% set element = block.slots.getSlot('leftTop') %}
{% set elementText = block.slots.getSlot('leftBottom') %}
...
{{ elementText.data.content | sw_sanitize }}
...
{% endblock %}