# CMS-Element mit mehreren Config-Einträgen

**URL:** <https://forum.shopware.com/t/cms-element-mit-mehreren-config-eintraegen/71871>\
**Category:** Programmierung\
**Tags:** customelements\
**Created:** [4. Januar 2021 um 21:33 UTC](https://forum.shopware.com/t/cms-element-mit-mehreren-config-eintraegen/71871 "2021-01-04T21:33:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Viod](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@Viod](https://forum.shopware.com/u/Viod)\
**Post date:** [4. Januar 2021 um 21:33 UTC](https://forum.shopware.com/t/cms-element-mit-mehreren-config-eintraegen/71871/1 "2021-01-04T21:33:00Z")

</div>

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](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](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.

&nbsp;

```
--- 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:

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/60e4c470d21cb722e6b681cc256a322aca8bf76e.jpeg)

---

<div class="post-metadata">

**Author:** ![mistermysticguy](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mistermysticguy](https://forum.shopware.com/u/mistermysticguy)\
**Post date:** [22. März 2021 um 14:35 UTC](https://forum.shopware.com/t/cms-element-mit-mehreren-config-eintraegen/71871/2 "2021-03-22T14:35:58Z")

</div>

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](https://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 %}
```

---

<div class="post-metadata">

**Author:** ![AlexBS](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@AlexBS](https://forum.shopware.com/u/AlexBS)\
**Post date:** [16. Juni 2022 um 15:14 UTC](https://forum.shopware.com/t/cms-element-mit-mehreren-config-eintraegen/71871/3 "2022-06-16T15:14:12Z")

</div>

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