CMS-Element mit mehreren Config-Einträgen

Shopware 6 (German) Programmierung
1

Cuten Abend liebe Community, vlt. kann mir jemand weiter helfen…
Frage: Wie gehe ich da ran, wenn ich mehr als ein Config-field in meinem CMS-Element haben möchte?
Ich habe das Beispiel aus dem Git-Repo geklont (Beispiel wo eine URL abgefragt wird und dann ein iframe geladen wird) und angepasst und das funktioniert auch. Nun ist es so, dass in dem Beispiel nur ein Field (Element settings) verwendet wurde, für die URL zum Video, doch wie kann ich noch weitere hinzufügen?
Muss ich ein extra Component erstellen, oder kann ich das “recyclen”?
Ich habe schon vieles ausprobiert, doch immer wird nur eins angezeigt.
Hat jemand vlt. ein Beispiel wo >1 verschiedene Fields verwendet werden, es aber nicht so komplex ist, wie die Beispiele in Shopware selber?

Beispiel welchem ich gefolgt bin:
https://github.com/shopware/swag-docs-custom-cms-element

Das Problem wurde so ähnlich hier schon einmal gefragt:
https://forum.shopware.com/discussion/73495/cms-custom-element-konfiguration-zeigt-meine-felder-nicht-an/p1

Nur wurde da dem How-To gefolgt und kein extra Component erstellt wie aus dem Git-Repo. Leider wurde da nicht drauf geantwortet, ob der Ansatz falsch ist.

 

--- index.js vom Element ---

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

Shopware.Service('cmsService').registerCmsElement({
    name: 'button',
    label: 'Button',
    component: 'sw-cms-el-button',
    configComponent: 'sw-cms-el-config-button',
    previewComponent: 'sw-cms-el-preview-button',
    defaultConfig: {
        buttonUrl: {
            source: 'static',
            value: ''
        },
        buttonLabel: {
            source: 'static',
            value: ''
        }
    }
});

--- config index.js ---

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

const { Component } = Shopware;

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

    mixins: [
        'cms-element'
    ],

    computed: {
        buttonUrl() {
            return this.element.config.buttonUrl;
        },
        buttonLabel() {
            return this.element.config.buttonLabel;
        }
    },

    created() {
        this.createdComponent();
    },

    methods: {
        createdComponent() {
            this.initElementConfig('button');
        },

        onElementUpdate(element) {
            this.$emit('element-update', element);
        }
    }
});


--- Config sw-cms....html.twig ---

{% block sw_cms_element_button_config %}
    {% block sw_cms_element_button_config_url %}
        
    {% endblock %}
    {% block sw_cms_element_button_config_label %}
        
    {% endblock %}
{% endblock %}

Sehen tue ich wie gesagt nur eine Einstellung:

717×286 9.96 KB

2

Hi Viod!
Ich hatte eben das gleiche Problem. Mein Fehler war, dass ich die Felder im config template nicht in ein eigenes HTML Element gewrappt habe. Ich vermute mal, dass das Problem daher rührt, dass Vue.JS ein Root Wrapper HTML Element für ein Template verlangt. Näheres hier: https://vuejs.org/v2/guide/components.html#A-Single-Root-Element.
Es wäre schön, wenn das in der Shopware Dokumentation drin Stände… hat mich eine ganze Weile gedauert, bis ich das rausgefunden habe.

In deinem Fall müsstest du das config template (und die Felder) in ein umfassendes div packen.

{% block sw_cms_element_button_config %}
    <div> {# Wrapper HTML Element #}
       {% block sw_cms_element_button_config_url %}
        
       {% endblock %}
       {% block sw_cms_element_button_config_label %}
        
       {% endblock %}
    </div>
{% endblock %}
1 „Gefällt mir“
3

Ich stand vor dem gleichen Problem. Bei mir hat es erst funktioniert, als ich jedes sw Element jeweils in ein div gewrapped habe.