# CMS Section um ein Custom Feld erweitern

**URL:** <https://forum.shopware.com/t/cms-section-um-ein-custom-feld-erweitern/103087>\
**Category:** Shopware 6 (German)\
**Tags:** administration, shopping-worlds\
**Created:** [22. Februar 2024 um 10:22 UTC](https://forum.shopware.com/t/cms-section-um-ein-custom-feld-erweitern/103087 "2024-02-22T10:22:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![DKP](https://avatars.discourse-cdn.com/v4/letter/d/f17d59/32.png) [@DKP](https://forum.shopware.com/u/DKP)\
**Post date:** [22. Februar 2024 um 10:22 UTC](https://forum.shopware.com/t/cms-section-um-ein-custom-feld-erweitern/103087/1 "2024-02-22T10:22:44Z")

</div>

Hallo zusammen,

ich habe ein Problem beim erweitern der CMS-Section bzw. CMS-Section-Config.

Was ich bereits geschafft habe ist ein bestehendes Feld der **CMS-Section-Config** zu erweitern. Dafür habe ich einfach im Template der Section Config ein **sw-select-field** mit meinen Options gebaut und dann im computed Bereich der dazugehörigen index.js die Dropdown Auswahl mit Klassen gekoppelt. Nun habe ich anstatt des Color Pickers ein Dropdown mit von mir fest gelegten Farben.

```auto
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/index.js

computed: {
        // Add custom section classes
        sectionClasses() {
            // Call the original method using super
            const originalClasses = this.$super('sectionClasses');

            return {
                ...originalClasses,
                'is--indented': this.section.sizingMode === 'indented',
                'container-fluid': this.section.sizingMode === 'container-fluid',
                'theme-primary': this.section.backgroundColor === 'primary',
                'theme-secondary': this.section.backgroundColor === 'secondary',
                'theme-tertiary': this.section.backgroundColor === 'tertiary',
                'theme-gray': this.section.backgroundColor === 'gray',
            };
        },
    },

```

```auto
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/sw-cms-section-config/sw-cms-section-config.html.twig

{% block sw_cms_section_config_background_color_field %}
            <sw-select-field
                {% if VUE3 %}
                    v-model:value="section.backgroundColor"
                {% else %}
                    v-model="section.backgroundColor"
                {% endif %}
                :label="$tc('sw-cms.detail.label.backgroundColorLabel')"
            >
                <option value="" selected>
                    {{ $tc('sw-cms.detail.label.color.none') }}
                </option>
                <option value="primary">
                    {{ $tc('sw-cms.detail.label.color.primary') }}
                </option>
                <option value="secondary">
                    {{ $tc('sw-cms.detail.label.color.secondary') }}
                </option>
                <option value="tertiary">
                    {{ $tc('sw-cms.detail.label.color.tertiary') }}
                </option>
                <option value="gray">
                    {{ $tc('sw-cms.detail.label.color.gray') }}
                </option>
            </sw-select-field>
        {% endblock %}

```

Das alles klappt genau so wie ich es mir vorgestellt habe. Mein Dropdown mit den angelegten Options ist da und alles wird auch korrekt angewendet und gespeichert. Nun aber zum eigentlichen Problem.

Ähnlich wie beim überschreiben, wollte ich nun ein neues Feld hinzufügen. In der Administration soll ein Toggle eingebaut werden, welches einem Redakteur ermöglicht einen Parallax Effekt für ein Hintergrundbild einzustellen. Den Toggle habe ich im Template der **SW-Section-Config** hinterlegt und im computed Bereich der **index.js** eine **get()** und **set() Funktion** für die Value gebaut.

```auto
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/sw-cms-section-config/index.js

computed: {
        backgroundMediaParallax: {
            get() {
                return this.section.backgroundMediaParallax !== undefined
                    ? this.section.backgroundMediaParallax
                    : false;
            },
            set(value) {
                this.$set(this.section, 'backgroundMediaParallax', value);
            }
        },
    },

```

```auto
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/sw-cms-section-config/sw-cms-section-config.html.twig

{% block sw_cms_section_config_background_image_parallax_field %}
    <sw-switch-field
         {% if VUE3 %}
             v-model:value="backgroundMediaParallax"
         {% else %}
             v-model="backgroundMediaParallax"
         {% endif %}
             :label="$tc('sw-cms.detail.label.backgroundMediaParallax')"
             :disabled="!section.backgroundMediaId"
        >
    </sw-switch-field>
{% endblock %}

```

Mein Toggle erscheint auch schon an der richtigen Stelle und wenn ich den Active State ändere, kommt der Wert auch korrekt an. Das Problem ist aber, dass mein Wert erst angelegt wird, wenn ich den Toggle benutzt. Meine Variable wird nicht initial angelegt, wie es bei den anderen Feldern der CMS-Section-Config ist. Dadurch wird beim speichern die Änderung des Togglers wieder zurück gesetzt / nicht übernommen.

**(Links)** Vor Benutzung vom Toggle gibt es keine Variable **backgroundMediaParallax**. **(Rechts)** Nachdem ändern des Toggle wird meine Variable **backgroundMediaParallax** korrekt auf **true** gesetzt

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/6/b/6b4c76f43d22fb2ca53e1227b6a456540f33842a.png)

Das ist quasi mein erstes SW6 Projekt, daher bin ich mir unsicher ob ich etwas grundlegendes falsch mache oder ob das erweitern der CMS-Section so vielleicht gar nicht erlaubt oder gewünscht ist? Im Moment weiß ich auch nicht ob ich ein Feld in der Datenbank dafür anlegen muss oder ob die Änderung über den VuexStore passiert und auch ohne DB persistiert? Muss ich die Value aus der **SW-Section-Config** irgendwie in die **SW-Section** übertragen und wenn ja wie mache ich das? Weil die anderen **SW-Section-Config** Values sind ja auch direkt zugreifbar.

Hoffe ich konnte mein Problem deutlich genug formulieren.

LG