# Extend CMS Element

**URL:** <https://forum.shopware.com/t/extend-cms-element/64910>\
**Category:** Programmierung\
**Tags:** customelements\
**Created:** [21. Februar 2020 um 13:09 UTC](https://forum.shopware.com/t/extend-cms-element/64910 "2020-02-21T13:09:57Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![shoshosho](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@shoshosho](https://forum.shopware.com/u/shoshosho)\
**Post date:** [21. Februar 2020 um 13:09 UTC](https://forum.shopware.com/t/extend-cms-element/64910/1 "2020-02-21T13:09:57Z")

</div>

So letzte Frage vorm Wochenende von mir.

Ich würde gerne diverse Blöcke die bereits schon existieren, erweitern. Z.b. das Element ‘Bild Slider’ um ein&nbsp;Text Feld oder das Standard ‘Text Element’ um ein Farbauswahlfeld.

Leider finde ich auch nirgendwo&nbsp;den Quellcode der bestehenden Einkaufswelt Elementen sonst könnte man sich ja beim erstellen der eigenen Elementen dort orientieren.

Jemand einen Tipp ?

---

<div class="post-metadata">

**Author:** ![ShapeAndShift](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@ShapeAndShift](https://forum.shopware.com/u/ShapeAndShift)\
**Post date:** [21. Februar 2020 um 13:24 UTC](https://forum.shopware.com/t/extend-cms-element/64910/2 "2020-02-21T13:24:24Z")

</div>

Hatte ich auch schon gefragt, offiziell aber leider wie andere keine Antwort erhalten.

[https://forum.shopware.com/discussion/62857/erweitern-eines-custom-cms-elements-oder-blocks](https://forum.shopware.com/discussion/62857/erweitern-eines-custom-cms-elements-oder-blocks)

---

<div class="post-metadata">

**Author:** ![shoshosho](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@shoshosho](https://forum.shopware.com/u/shoshosho)\
**Post date:** [21. Februar 2020 um 13:37 UTC](https://forum.shopware.com/t/extend-cms-element/64910/3 "2020-02-21T13:37:04Z")

</div>

Hab jetzt die Quellcodes der bestehenden Module gefunden. Denke ich bau die Module dann von Grund auf neu.

Zu finden auf deinem Server wo Shopware installiert ist -\>

```
/platform/src/Administration/Resources/app/administration/src

```

Hab mir den Ordner da gezogen und schau mir das an und versuch dann mal einen Slider nachzubauen.

Grüße

---

<div class="post-metadata">

**Author:** ![ShapeAndShift](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@ShapeAndShift](https://forum.shopware.com/u/ShapeAndShift)\
**Post date:** [21. Februar 2020 um 13:43 UTC](https://forum.shopware.com/t/extend-cms-element/64910/4 "2020-02-21T13:43:59Z")

</div>

Nachbauen ist ja kein Problem, allerdings kann das eher weniger Sinn der Sache sein.

Bei einen flexibelen System wie es von Shopware beworben wird erwarte ich eigentlich, dass ich mich in alle Prozesse von vorn bis hinten einklinken kann.

Ergo: Das bestehende erweitern, anstatt komplett zu neu zu schreiben. Aber anscheinend scheint es nicht zu gehen. Oder stehen wir einfach nur aufn Schlauch [@Michael Telgmann]([http://forum.shopware.com/profile/17553/Michael](http://forum.shopware.com/profile/17553/Michael) Telgmann “Michael Telgmann”)‍ [@Moritz Naczenski]([http://forum.shopware.com/profile/14574/Moritz](http://forum.shopware.com/profile/14574/Moritz) Naczenski “Moritz Naczenski”)‍

---

<div class="post-metadata">

**Author:** ![uniqueweb](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/uniqueweb/32/17317_2.png) [@uniqueweb](https://forum.shopware.com/u/uniqueweb)\
**Post date:** [16. Oktober 2020 um 13:39 UTC](https://forum.shopware.com/t/extend-cms-element/64910/5 "2020-10-16T13:39:09Z")

</div>

Ich bin gerade auch auf das selbe Problem gestoßen. Natürlich kann man jetzt sagen man kopiert ein komplettes Element und ergänzt es um seine Felder, allerdings halte ich das für weniger Sinnvoll.

Wäre super wenn es zu dieser Sache ein Statement geben würde. Es wäre wirklich Klassen, wenn man vorhanden CMS Elemente extenden könnte.

---

<div class="post-metadata">

**Author:** ![patchee500](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/patchee500/32/17600_2.png) [@patchee500](https://forum.shopware.com/u/patchee500)\
**Post date:** [25. November 2020 um 18:49 UTC](https://forum.shopware.com/t/extend-cms-element/64910/6 "2020-11-25T18:49:14Z")

</div>

> [@ShapeAndShift schrieb:](https://forum.shopware.com/profile/34003/ShapeAndShift "ShapeAndShift")
> 
> Bei einen flexibelen System wie es von Shopware beworben wird erwarte ich eigentlich, dass ich mich in alle Prozesse von vorn bis hinten einklinken kann.

Und wovon träumst du nachts?&nbsp; ![Sticking-out-tongue](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/ac0c93e2160fb9e91c30767775d64444ad0f06c4.png "Sticking-out-tongue")

Ich stand eben vor einem ähnlichen&nbsp;Anwendungsfall mit einem zusätzlichen Textfeld bei einem Bild. Mir gings um einen&nbsp;Button+darin Befindlichen Text&nbsp;bei einem verlinktem&nbsp;Bild.

Was soweit&nbsp;funktioniert hat:

Component für das Configurationstemplate überschreiben (sw-cms-el-config-image.html.twig enthält das Markup für mein zustätzliches Feld):

```
import template from './config/sw-cms-el-config-image.html.twig'
const { Component } = Shopware;

Component.override('sw-cms-el-config-image', {
    template
});

```

Zusätzliches Feld (In meinem Fall „urlText“)&nbsp;dem ursprünglichen CMS Element hinzufügen (durch re-registrieren des selben Elements):

```
let imageConfig = Shopware.Service('cmsService').getCmsElementConfigByName('image');

imageConfig.defaultConfig.urlText = {
    source: 'static',
    value: null
}

Shopware.Service('cmsService').registerCmsElement(imageConfig);

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![kaiserkiwi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/kaiserkiwi/32/7888_2.png) [@kaiserkiwi](https://forum.shopware.com/u/kaiserkiwi)\
**Post date:** [10. März 2021 um 10:28 UTC](https://forum.shopware.com/t/extend-cms-element/64910/7 "2021-03-10T10:28:38Z")

</div>

Kannst du das vielleicht noch etwas näher ausführen? Ich habe es so probiert, wie du beschrieben hast, aber es passiert einfach nichts. Meine Dateistruktur sieht so aus:  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/c/c828c3180bbf5d5978605c4c164d27218c9b3edd.png)

Ich hätte jetzt durch deine Beschreibung erwartet, dass das reicht. Allerdings wird das Edit-Interface eines Bild-Moduls in den Erlebniswelten nicht verändert. Auch mit einem `dump(element)` innerhalb einer von `src/Resources/views/storefront/element/cms-element-image.html.twig` ist `urlText` nicht zu finden.

Ich schätze also, ich habe irgendetwas übersehen.

Die `index.js` in `image` und `image/config` enthalten 1 zu 1 deinen Code. Die `sw-cms-el-config-image.html.twig` enthält 1 zu 1 den Code des Originals plus Anpassungen für ein weiteres Feld. Muss noch an irgendeiner anderen Stelle etwas hinzugefügt werden? Ich möchte nichts anderes machen, als einen Text zum normalen Bild-Element hinzufügen zu können.

Weird genug, dass Shopware das nicht von selbst anbietet, aber dass es dann auch noch undokumentiert zu sein scheint, wie man das selbst hinzufügen kann, finde ich schon unerwartet.

---

<div class="post-metadata">

**Author:** ![patchee500](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/patchee500/32/17600_2.png) [@patchee500](https://forum.shopware.com/u/patchee500)\
**Post date:** [11. März 2021 um 15:22 UTC](https://forum.shopware.com/t/extend-cms-element/64910/8 "2021-03-11T15:22:08Z")

</div>

> [@kaiserkiwi](#):
>
> Weird genug, dass Shopware das nicht von selbst anbietet, aber dass es dann auch noch undokumentiert zu sein scheint, wie man das selbst hinzufügen kann, finde ich schon unerwartet.

Der nächste Traumtänzer 😄  
Eigentlich ist das ja auch kein offiziell unterstützter Weg. Wenn eine solche Modifikation seitens Shopware vorgesehen wäre, hätten sie auch eine anständige Logik dafür implementiert. Das mit dem re-registrieren ist (hoffentlich) nurmehr ein Workaround. Evtl. gibt es mittlerweile ja einen besseren Weg.

Damit du zu 1:1 das bekommst, was ich gemacht habe benötigst du zunächst mal das main.js file unter DEIN\_MODUL/src/Resources/app/administration/src. Das sehe ich in deinem Verzeichnisbaum nämlich noch gar nicht.  
(Siehe dazu u.a. [Add custom module | Shopware Documentation](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/custom-module))  
In dem main.js file importierst du dann dein index.js file (import „./module/sw-cms/elements/image/index“ für dich).  
In dem index.js file brauchst du dann folgenden Code:

```
import template from './config/sw-cms-el-config-image.html.twig'
const { Component } = Shopware;

Component.override('sw-cms-el-config-image', {
    template
});

let imageConfig = Shopware.Service('cmsService').getCmsElementConfigByName('image');

imageConfig.defaultConfig.urlText = {
    source: 'static',
    value: null
}

Shopware.Service('cmsService').registerCmsElement(imageConfig);

```

Das sw-cms-el-config-image.html.twig file sieht bei mir wie folgt aus:

```
{% block sw_cms_element_image_config_link %}
<div class="sw-cms-el-config-image__link">
    <sw-field v-model="element.config.url.value"
              class="sw-cms-el-config-image__link-input"
              type="text"
              :label="$tc('sw-cms.elements.image.config.label.linkTo')"
              :placeholder="$tc('sw-cms.elements.image.config.placeholder.enterUrl')">
    </sw-field>
    <sw-field v-model="element.config.urlText.value"
              class="sw-cms-el-config-image__link-input"
              type="text"
              label="Link Text"
    >
    </sw-field>
    <sw-field class="sw-cms-el-config-image__link-tab"
              v-model="element.config.newTab.value"
              type="switch"
              :label="$tc('sw-cms.elements.image.config.label.linkNewTab')">
    </sw-field>
</div>
{% endblock %}

```

Das index.js file in dem „config“ Ordner brauchst du, glaube ich, gar nicht.

Wenn du die Dateien so hast, einmal Admin Theme neu bauen und dann sollte es auch schon funktionieren.

---

<div class="post-metadata">

**Author:** ![kaiserkiwi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/kaiserkiwi/32/7888_2.png) [@kaiserkiwi](https://forum.shopware.com/u/kaiserkiwi)\
**Post date:** [11. März 2021 um 15:42 UTC](https://forum.shopware.com/t/extend-cms-element/64910/9 "2021-03-11T15:42:05Z")

</div>

Es kann manchmal so einfach sein.  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/1/1808e2d42627a08abc6216c22d696c100ba86491.png)  
Vielen Dank für die genaue Erklärung, das erspart mir künftig viel Frust. Man muss halt einmal wissen wie es geht. Für weitere Elemente schaffe ich es von hier an selbst. 😄

---

<div class="post-metadata">

**Author:** ![e.dhraou](https://avatars.discourse-cdn.com/v4/letter/e/ed8c4c/32.png) [@e.dhraou](https://forum.shopware.com/u/e.dhraou)\
**Post date:** [2. Juni 2022 um 07:05 UTC](https://forum.shopware.com/t/extend-cms-element/64910/10 "2022-06-02T07:05:37Z")

</div>

Hallo zusammen,

ich möchte noch einmal diese Problematik aufgreifen, da ich diverse Probleme habe das geünschte Ziel zu erreichen.

Ich möchte lediglich das Bild-Element um ein Textfeld erweitern. Den Text möchte ich später in dem Bild platzieren.

Ich bin die ANleitung mehrere Male durchgegangen, jedoch schafge ich es nicht, das Textfeld in die Element-Einstellungen zu bekommen. Liegt es an meiner Shopware Version? funktioniert diese ANleitung eventuell nicht mehr?

Ich würde mich freuen, wenn mir jemand behilflich sein könnte.

Ich habe auch dei main.js wie beschrieben angelegt:

Den Chache mehrmals geleert und das Theme refreshed habe ich auch durchgeführt.

Mit freundlichen Grüßen  
Elhedi

---

<div class="post-metadata">

**Author:** ![aleximi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/aleximi/32/13313_2.png) [@aleximi](https://forum.shopware.com/u/aleximi)\
**Post date:** [21. August 2025 um 07:26 UTC](https://forum.shopware.com/t/extend-cms-element/64910/11 "2025-08-21T07:26:41Z")

</div>

Ich versuche das gerade in Shopware 6.6 - lokal funktioniert es, aber nicht auf einem Testsystem.

Der minifizierte Code sieht so aus:

```auto
let i = Shopware.Service('cmsService').getCmsElementConfigByName('netzp-events6');
i.defaultConfig.categories = {
  source: 'static',
  value: []
},

```

Und ich erhalte den Fehler

Uncaught TypeError: can’t access property „defaultConfig“, i is undefined

Wenn ich in der Browser Javascript Console Shopware.Service(‚cmsService‘).getCmsElementConfigByName(‚netzp-events6‘).defaultConfig

eingebe, ist es aber definiert.

Ich gehe aktuell davon aus, dass das ein Problem mit der Ladereihenfolge der Plugins ist.

Wie kann ich das beeinflussen?

Ich habe schon versucht, die Originaldatei explizit zu importieren:

```auto
import '../../../../../../../../../../../../../vendor/store.shopware.com/netzpevents6/src/Resources/app/administration/src/module/sw-cms/elements/netzp-events6/component/index';

let eventsConfig = Shopware.Service('cmsService').getCmsElementConfigByName('netzp-events6');

```

Viele Grüße,

Alex

EDIT: evtl. klappt das mit dem Import … ich muss vendor/store.shopware.com/netzpevents6/src/Resources/app/administration/src/module/sw-cms/elements/netzp-events6/index‘; (ohne component) importieren? Teste gerade …

EDIT2: Mit dem “richtigen” Import kommt der Fehler nicht mehr, aber für das Template ist dann das neue Feld nicht zugreifbar “An error was captured in current module: TypeError: can’t access property „value“, element.config.categories is undefined”

---

<div class="post-metadata">

**Author:** ![aleximi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/aleximi/32/13313_2.png) [@aleximi](https://forum.shopware.com/u/aleximi)\
**Post date:** [21. August 2025 um 10:59 UTC](https://forum.shopware.com/t/extend-cms-element/64910/12 "2025-08-21T10:59:15Z")

</div>

So scheint es zu klappen:

custom/static-plugins/MyPlugin/Events6/src/Resources/app/administration/src/module/sw-cms/elements/netzp-events6/component/config/index.js

```auto
const { Component } = Shopware;
import template from './sw-cms-el-config-netzp-events6.html.twig';

Component.override('sw-cms-el-config-netzp-events6', {
    template,

    methods: {
        createdComponent() {
            let eventsConfig = Shopware.Service('cmsService').getCmsElementConfigByName('netzp-events6');

            if (eventsConfig.defaultConfig.categories === undefined) {
                eventsConfig.defaultConfig.categories = {
                    source: 'static',
                    value: []
                }

                Shopware.Service('cmsService').registerCmsElement(eventsConfig);
            }

            this.$super('createdComponent');
        },
    }
});

```