Custom CmsElement: Bilder werden nicht richtig ausgelesen

Shopware 6 (German) Programmierung
1

Hallo,

ich habe ein neues CmsElement erstellt, welches u.a. ein Bild als Konfiguration verlangt. Abgeschaut habe ich mir den Bilder-Upload aus dem Shopware „image“ CmsElement.

Leider funktioniert das auslesen des Bildes nicht so wie im standard Element. Eigentlich sollte ich im (Frontend) Twig-Template des Elements das vollwertige Media-Objekt unter element.data finden (wie beim Core CmsElement in Bild 1). Die Property element.data ist bei meinem eigenen CmsElement aber null und die Struktur ist komplett anders (Bild 2). Ich habe testweise das Shopware „image“ CmsElement aus dem Core in mein Plugin kopiert und umbenannt (nur die Vue Komponenten). Auch hier funktioniert das Element nicht. In der Datenbank werden alle Konfigurationen richtig in der Tabelle „cms_slot_translation“ abgespeichert.

Im Backend ist die Property element.data nach dem Abspeichern der CmsPage ebenfalls null.

Muss hier noch ein Zwischenschritt gemacht werden? Wird bei den Core CmsElement zusätzlich noch Code ausgeführt, welcher bei CmsElementen aus dem Plugin nicht ausgeführt wird?

Bild 1: dump() im „element_image“ Twig Block

498×725 30.6 KB

 

Bild 2: dump() im „element_custom_image“ Twig Block

447×808 31.8 KB

Danke und viele Grüße

Jonas

2

Ich stehe momentan genau am gleichen Ort an. Habe zum Testen das ‘image-slider’ element kopiert und umbenannt. In der Administration klappt dann auch alles wunderbar. Im Frontend wird der CMS Block inklusive element geladen, aber data ist null (d.h. kein Bild). Die anderen Komponenten (z.B. die Navigationspfeile der slideshow) sind aber da.

@webalm‍ Konntest du dein Problem in der Zwischenzeit beheben?

Beste Grüsse 

Edit: Ich habe die Lösung meines Problems nun ausfindig gemacht.

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

const { Application } = Shopware;

Application.getContainer('service').cmsService.registerCmsBlock({
    name: 'hero-image-slider',
    label: 'Image slider',
    category: 'gp-blocks',
    component: 'sw-cms-block-hero-image-slider',
    previewComponent: 'sw-cms-preview-hero-image-slider',
    defaultConfig: {
        marginBottom: '0px',
        marginTop: '0px',
        marginLeft: '0px',
        marginRight: '0px',
        sizingMode: 'full-width'
    },
    slots: {
        'imageSlider': {
            type: 'image-slider', 
            default: {
                config: {
                    displayMode: {source: 'static', value: 'cover'}
                },
                data: {
                    media: {
                        url: '/administration/static/img/cms/preview_camera_large.jpg'
                    }
                }
            }
        }
    }
});

Der ‘type’ muss einen entsprechenden Resolver haben. Ich hatte zuerst einen eigenen type zugewiesen und deshalb hat es mir die Bilder nicht richtig geladen.

3

Hallo @Shopware6User‍,

die mediaId des Bildes wird in der elementConfig des CmsSlot abgespeichert.

Das Problem haben wir dann über einen EventSubscriber (cms_slot.loaded Event) gelöst. Dieser holt dann über die mediaId die MediaEntity aus der Datenbank und schreibt sie ins “data” hinein.

LG

Jonas

1 „Gefällt mir“
4

Du kannst auch den entsprechenden Resolver extenden und deinen Type angeben. Dann wird das Media Object im Frontend angereichert.

 

 

5

Hallo @StefanPoensgen‍,

vielen Dank für den Hinweis.
Es gibt zu diesem Thema mittlerweile auch eine Antwort von Shopware: https://issues.shopware.com/issues/NEXT-4491

LG

Jonas

6

Hallo,

könnte einer von euch beiden die Lösung einmal detailierter beschreiben (also mit Ablageort der zusätzlichen Dateien wie dem EventSubscriber und dessen Inhalt, also der beim Laden des CmsSlot die gesamte MediaEntity aus der Datenbank holt und diese somit im Frontend verfügbar macht), also wie ihr von der mediaID, die als einzigstes (im value ) übergeben wird, zum media-Objekt / -Entity oder der media-URL gekommen seid (in einem eigenen CMS - Element basierend auf dem Image - CMS - Element von Shopware)? Das wäre sehr nett und würde wahrscheinlich vielen helfen. Es geht nur um die zusätzlichen Dateien / Code für diese Funktionalität.

Eine andere Frage: klappt es bei euch, dass Feld auf “required: false” zu setzen und das dann trotzdem die Erlebniswelt noch gespeichert werden kann? Jedes Mal wenn ich dies setze, kommt ein 404 - Fehler und die Erlebniswelt lässt sich nicht speichern (nicht immer will man die Bildauswahl als Pflichtfeld setzen) - bei “required: true” klappt es dagegen problemlos. 

Das Feld media zu nennen wird auch nicht Pflicht sein oder (wenn man beispielsweise auch mehrere Bilder möchte)?

Grüße

Sebastian

7

https://github.com/stefanpoensgen/swag-docs-custom-cms-element

https://github.com/stefanpoensgen/swag-docs-custom-cms-element/commit/625af8eafca1e5a0c78c78952c745b99c6180a07

Ich hab das Beispiel aus den Docs mal erweitert

2 „Gefällt mir“
8

Hallo Stefan,

vielen lieben Dank. Hast du zufällig auch eine Lösung bzgl. “required: false”, damit das Bild kein Pflichtfeld ist, die Erlebniswelt aber trotzdem abzuspeichern geht? Müssen da noch irgendwelche Parameter oder so ergänzt werden?

Grüße

Sebastian

9

Hi Sebastian,

hast du bereits ne Lösung, damit das Bild kein Pflichtfeld ist. Habe das gleiche Problem.

@StefanPoensgen: Danke für dein Example, der Resolver hat mir sehr geholfen.

Grüße
Roland

10

Hallo Roland,

die Problematik ist laut issue - Ticket Shopware 6.3 zugeordnet worden. Es gibt aber einen Workaround, siehe: https://issues.shopware.com/issues/NEXT-6188 .

Grüße

Sebastian

11

@sschreier‍ Ich habs bei mir hinbekommen, damit das Media/Image Feld kein Pflichtfeld mehr ist. Habe einfach die Zeile “required: true,” weggelassen auf “required: false,” gehts eben auch nicht.

media: {
	source: 'static',
	value: null,
	entity: {
		name: 'media'
	}
},

 

12

Hallo,

das steht exakt so auch als Workaround im verlinkten Ticket Wink.

Grüße

Sebastian