Neue CMS Elemente Media-Upload, Medienverwaltung lässt sich nicht öffnen

Shopware 6 (German)
1

Hallo zusammen,

ich bin gerade dabei ein paar CMS-Elemente zu entwickeln. Jetzt stehe ich vor dem Problem, dass sich die Medienverwaltung über den entsprechenden Button nicht öffnen lässt. Ich habe es aus den bestehenden Elementen (Image) abgeschaut. Upload, Drag & Drop, URL Upload funktioniert, es lässt sich auch alles speichern. Aber der Button um die Medienverwaltung zu öffnen funktioniert nicht. Es kommen auch keine Fehlermeldungen und es werden auch keine Requests abgefeuert wenn man drauf klickt. Bin ein bisschen ratlos.

<sw-cms-mapping-field
    v-model="element.config.media"
    value-types="entity"
    entity="media"
>
    <sw-media-upload-v2
        variant="regular"
        :upload-tag="uploadTag"
        :source="previewSource"
        :allow-multi-select="false"
        :default-folder="cmsPageState.pageEntityName"
        caption="caption"
        @media-upload-sidebar-open="onOpenMediaModal"
        @media-upload-remove-image="onImageRemove"
    />

    <div
        slot="preview"
        slot-scope="{ mediaObject }"
    >
        <img
            v-if="mediaObject.url"
            :src="mediaObject.url"
            alt=""
        />
        <sw-alert
            v-else
            variant="info"
        >
            Leere Vorschau
        </sw-alert>
    </div>
</sw-cms-mapping-field>

<sw-upload-listener
    :upload-tag="uploadTag"
    auto-upload
    @media-upload-finish="onImageUpload"
/>

...

<sw-media-modal-v2
    v-if="mediaModalIsOpen"
    variant="regular"
    caption="Caption"
    :entity-context="cmsPageState.entityName"
    :allow-multi-select="false"
    :initial-folder-id="cmsPageState.defaultMediaFolderId"
    @media-upload-remove-image="onImageRemove"
    @media-modal-selection-change="onSelectionChanges"
    @modal-close="onCloseModal"
/>

Config:

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

Die Methoden etc. habe ich alle aus dem Image-Element genommen. Vielleicht hat noch jemand eine Ahnung was falsch sein könnte?

2

Die Media-Upload Komponente ist etwas eigen.
Versuche mal folgendes:
//@Plugin/src/Resources/app/administration/src/module/sw-cms/elements/{Beispiel}/index.js:

defaultConfig: {
        media: {
            source: 'static',
            value: null,
            required: false,
            entity: {
                name: 'media'
            }
        },
//Dein restlicher Code...

//@Plugin/src/Resources/app/administration/src/module/sw-cms/elements/{Beispiel}/config/index.js:

import template from './sw-cms-el-config-beispiel.html.twig';

Shopware.Component.register('sw-cms-el-config-beispiel', {
    template,

    mixins: [
        'cms-element'
    ],

    data() {
        return {
            mediaModalIsOpen: false
        };
    },

    computed: {
        uploadTag() {
            return `cms-element-media-config-${this.element.id}`;
        },

        previewSource() {
            if (this.element.data && this.element.data.media && this.element.data.media.id) {
                return this.element.data.media;
            }
            return this.element.config.media.value;
        }
    },

    created() {
        this.initElementConfig('beispiel');
    },

    methods: {
        onImageUpload({ targetId }) {
            this.element.config.media.value = targetId;
            this.updateElementData(targetId);
            this.$emit('element-update', this.element);
        },

        onImageRemove() {
            this.element.config.media.value = null;
            this.updateElementData(null);
            this.$emit('element-update', this.element);
        },

        onOpenMediaModal() {
            this.mediaModalIsOpen = true;
        },
        onCloseMediaModal() {
            this.mediaModalIsOpen = false;
        },
        onSelectionChanges(mediaItems) {
            const media = mediaItems[0];
            this.element.config.media.value = media.id;
            this.updateElementData(media);

            this.$emit('element-update', this.element);
            this.onCloseMediaModal(); // Modal nach der Auswahl schließen
        },

        updateElementData(media) {
            this.$set(this.element.data, 'mediaId', media ? media.id : null);
            this.$set(this.element.data, 'media', media);
        }
    }
});

//@Plugin/src/Resources/app/administration/src/module/sw-cms/elements/{Beispiel}/config/DeineTwigDatei:

{% block sw_cms_element_beispiel_config %}
    <sw-cms-mapping-field
            v-model="element.config.media"
            :label="$tc('sw-cms.elements.image.label')"
            value-types="entity"
            entity="media"
    >
        <sw-upload-listener
                :uploadTag="uploadTag"
                autoUpload
                @media-upload-finish="onImageUpload"
        ></sw-upload-listener>
        <sw-media-upload-v2
                variant="regular"
                :uploadTag="uploadTag"
                :source="previewSource"
                :allowMultiSelect="false"
                :defaultFolder="cmsPageState.pageEntityName"
                :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
                @media-upload-sidebar-open="onOpenMediaModal"
                @media-upload-remove-image="onImageRemove"
        ></sw-media-upload-v2>
    </sw-cms-mapping-field>

	{* Hier sind deine anderen Felder wie sw-text etc... (falls benötigt) *}

    <!-- Media Modal for image selection -->
    <sw-media-modal-v2
            v-if="mediaModalIsOpen"
            variant="full"
            :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
            :entity-context="cmsPageState.entityName"
            :allow-multi-select="false"
            :initial-folder-id="cmsPageState.defaultMediaFolderId"
            @media-upload-remove-image="onImageRemove"
            @media-modal-selection-change="onSelectionChanges"
            @modal-close="onCloseMediaModal"
    />
{% endblock %}

//@Plugin/src/Resources/views/storefront/element/{Beispiel}-DeineTwigDatei:

    {% set mediaId = element.config.media.value %}
    {% set mediaCollection = searchMedia([mediaId], context.context) %}
    {% set media = mediaCollection.get(mediaId) %}

   {% if media %}
      <img
          src="{{ media.url }}"
          alt="{{ media.translated.alt ?: element.config.title.value }}"
          title="{{ media.translated.title ?: element.config.title.value }}"
          class="cms-image"
          loading="lazy"
      >
    {% endif %}

Das sollte it der Aktuellen Shopware 6 version funktionieren.