Extend CMS Element

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 Text Feld oder das Standard ‘Text Element’ um ein Farbauswahlfeld.

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

Jemand einen Tipp ?

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

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

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 Telgmann “Michael Telgmann”)‍ [@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski “Moritz Naczenski”)‍

1 Like

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.

@ShapeAndShift schrieb:

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?  Sticking-out-tongue

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

Was soweit 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”) 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);

 

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

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.

Der nächste Traumtänzer :smile:
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. Shopware 6: Add new module to administration)
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.

2 Likes

Es kann manchmal so einfach sein.
image
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. :smile:

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