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

**URL:** <https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025>\
**Category:** Programmierung\
**Tags:** customelements\
**Created:** [15. Januar 2020 um 17:00 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025 "2020-01-15T17:00:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Liiila](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Liiila](https://forum.shopware.com/u/Liiila)\
**Post date:** [15. Januar 2020 um 17:00 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/1 "2020-01-15T17:00:31Z")

</div>

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:&nbsp;[https://docs.shopware.com/en/shopware-platform-dev-en/how-to/custom-cms-block?category=shopware-platform-dev-en/how-to](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:&nbsp;[https://github.com/shopware/swag-docs-custom-cms-block](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.&nbsp;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.

---

<div class="post-metadata">

**Author:** ![Liiila](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Liiila](https://forum.shopware.com/u/Liiila)\
**Post date:** [15. Januar 2020 um 17:43 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/2 "2020-01-15T17:43:39Z")

</div>

Ich habe den Fehler gefunden, im Beispiel Plugin ist in der&nbsp;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.

---

<div class="post-metadata">

**Author:** ![taltholtmann](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@taltholtmann](https://forum.shopware.com/u/taltholtmann)\
**Post date:** [16. Januar 2020 um 10:13 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/3 "2020-01-16T10:13:48Z")

</div>

Hallo Liiila,

vielen Dank für den Hinweis ![Thumb-Up](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/7fcda44f782696668a3d093569d15e88105769e1.png "Thumb-Up"). Ich habe es direkt in dem Plugin auf GitHub angepasst.

&nbsp;

Viele Grüße aus Schöppingen,&nbsp;

Timo

---

<div class="post-metadata">

**Author:** ![Liiila](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Liiila](https://forum.shopware.com/u/Liiila)\
**Post date:** [16. Januar 2020 um 12:59 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/4 "2020-01-16T12:59:47Z")

</div>

Hallo Timo! Perfekt, vielen Dank!

---

<div class="post-metadata">

**Author:** ![D4ni3l](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@D4ni3l](https://forum.shopware.com/u/D4ni3l)\
**Post date:** [16. Dezember 2021 um 18:23 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/5 "2021-12-16T18:23:47Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![D4ni3l](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@D4ni3l](https://forum.shopware.com/u/D4ni3l)\
**Post date:** [16. Dezember 2021 um 18:39 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/6 "2021-12-16T18:39:30Z")

</div>

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

```auto
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 😉

---

<div class="post-metadata">

**Author:** ![mmoojjoo](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@mmoojjoo](https://forum.shopware.com/u/mmoojjoo)\
**Post date:** [1. April 2022 um 16:08 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/7 "2022-04-01T16:08:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![IKM\_Shop](https://avatars.discourse-cdn.com/v4/letter/i/71c47a/32.png) [@IKM\_Shop](https://forum.shopware.com/u/IKM_Shop)\
**Post date:** [1. April 2022 um 16:47 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/8 "2022-04-01T16:47:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Arno\_HOHE8](https://avatars.discourse-cdn.com/v4/letter/a/258eb7/32.png) [@Arno\_HOHE8](https://forum.shopware.com/u/Arno_HOHE8)\
**Post date:** [14. Dezember 2023 um 15:50 UTC](https://forum.shopware.com/t/beispiel-plugin-zu-adding-a-custom-cms-block-zeigt-in-frontend-nichts-an-unter-v6-1-0/64025/9 "2023-12-14T15:50:05Z")

</div>

Hatte mit der Anleitung ab dem Part [Storefront](https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html#storefront-representation)auch 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

```auto
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

```auto
{% 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

```auto

{% 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 %}

```