# Eignes CMS Element - Update in Vorschau bei Änderung Config-Values

**URL:** https://forum.shopware.com/t/eignes-cms-element-update-in-vorschau-bei-aenderung-config-values/91021
**Category:** Programmierung
**Created:** [21. Oktober 2021 um 13:42 UTC](https://forum.shopware.com/t/eignes-cms-element-update-in-vorschau-bei-aenderung-config-values/91021 "2021-10-21T13:42:19Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![\_MikeB](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/_mikeb/32/7856_2.png) [@\_MikeB](https://forum.shopware.com/u/_MikeB)
#### Post date: [21. Oktober 2021 um 13:42 UTC](https://forum.shopware.com/t/eignes-cms-element-update-in-vorschau-bei-aenderung-config-values/91021/1 "2021-10-21T13:42:19Z")

</div>

Hallo.

Habe eine eigenes CMS-Element angelegt und mich am regulären Text-Element orientiert. Tut auch alles soweit bis auf das Aktualisieren der Vorschau bei Anpassung der Konfiguration. Dort gibt es 2 Textfelder und ich bei blur oder Speichern der Konfiguration die angepassten Texten in der Vorschau/Erlebniswelt Admin sehen.

Template

```auto
{% block bst_cms_el_config_headline %}
<div class="bst-cms-el-config-headline">
    {% block bst_cms_element_headline %}
        <sw-field type="text"
                  :label="$tc('bst-cms.element.headline.label.title')"
                  :placeholder="$tc('bst-cms.element.headline.placeholder.title')"
                  v-model="element.config.title.value"
                  :allow-inline-data-mapping="true"
                  sanitize-input
                  @blur="onBlurTitle"
                  @input="onInputTitle">
        </sw-field>
    {% endblock %}
    {% block bst_cms_element_subline %}
        <sw-field type="text"
                  :label="$tc('bst-cms.element.headline.label.subtitle')"
                  :placeholder="$tc('bst-cms.element.headline.placeholder.subtitle')"
                  v-model="element.config.subTitle.value"
                  :allow-inline-data-mapping="true"
                  sanitize-input
                  @blur="onBlurSubTitle"
                  @input="onInputSubTitle">
        </sw-field>
    {% endblock %}
</div>
{% endblock %}

```

JS

```auto
import template from './headline.html.twig';

const { Component, Mixin } = Shopware;

Component.register('bst-cms-el-config-headline', {
    template,

    mixins: [
        Mixin.getByName('cms-element'),
    ],

    data() {
        return {
            editable: true
        };
    },

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

    methods: {
        createdComponent() {
            this.initElementConfig('bst-headline');
        },

        onBlurTitle(content) {
            this.emitChanges(this.element.config.title, content);
        },

        onInputTitle(content) {
            this.emitChanges(this.element.config.title, content);
        },

        onBlurSubTitle(content) {
            this.emitChanges(this.element.config.subTitle, content);
        },

        onInputSubTitle(content) {
            this.emitChanges(this.element.config.subTitle, content);
        },

        emitChanges(el, content) {
            if (content !== el.value) {
                el.value = content;
                this.$emit('element-update', this.element);
            }
        },
    },
});

```

Er ersetzt beide Felder in der Config mit [object FocusEvent]  
Und die Vorschau ändert sich auch nicht. Ich sehe meine Änderungen erst im Frontend… Was mache ich falsch?

Gruß Mike

---

<div class="post-metadata">

### Author: ![ninja](https://avatars.discourse-cdn.com/v4/letter/n/53a042/32.png) [@ninja](https://forum.shopware.com/u/ninja)
#### Post date: [21. Oktober 2021 um 13:47 UTC](https://forum.shopware.com/t/eignes-cms-element-update-in-vorschau-bei-aenderung-config-values/91021/2 "2021-10-21T13:47:57Z")

</div>

Sieht für mich soweit richtig aus… Ich glaube aber du hast den inject vergessen…

```auto
inject: ['repositoryFactory'],

```

---

<div class="post-metadata">

### Author: ![\_MikeB](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/_mikeb/32/7856_2.png) [@\_MikeB](https://forum.shopware.com/u/_MikeB)
#### Post date: [22. Oktober 2021 um 08:02 UTC](https://forum.shopware.com/t/eignes-cms-element-update-in-vorschau-bei-aenderung-config-values/91021/3 "2021-10-22T08:02:54Z")

</div>

Hi ninja.

Ne das brauche ich nicht das ich ja kein Repository abfrage. Will ja lediglich die Werte in die Vorschau übernehmen

Gruß

---

<div class="post-metadata">

### Author: ![ninja](https://avatars.discourse-cdn.com/v4/letter/n/53a042/32.png) [@ninja](https://forum.shopware.com/u/ninja)
#### Post date: [22. Oktober 2021 um 08:48 UTC](https://forum.shopware.com/t/eignes-cms-element-update-in-vorschau-bei-aenderung-config-values/91021/4 "2021-10-22T08:48:21Z")

</div>

Also ich hab mir auch mal ein Element gebaut, was sich am Text-Element orientiert und das sah dann am Ende so aus:

```auto
import template from './sw-cms-el-config-cms-element-title.html.twig';
import './sw-cms-el-config-cms-element-title.scss';

const { Component, Mixin } = Shopware;

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

    inject: ['repositoryFactory'],

    mixins: [
        Mixin.getByName('cms-element')
    ],

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

    methods: {
        createdComponent() {
            this.initElementConfig('cms-element-title');
        },

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

});

```

---

<div class="post-metadata">

### Author: ![\_MikeB](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/_mikeb/32/7856_2.png) [@\_MikeB](https://forum.shopware.com/u/_MikeB)
#### Post date: [22. Oktober 2021 um 09:02 UTC](https://forum.shopware.com/t/eignes-cms-element-update-in-vorschau-bei-aenderung-config-values/91021/5 "2021-10-22T09:02:22Z")

</div>

Hi.

Hab es gewuppt. War doch simple. weniger Code ist manchmal mehr. Habe mich an der Form Component orientiert.

Config

```auto
{% block bst_cms_el_config_headline %}
<div class="bst-cms-el-config-headline">
    {% block bst_cms_element_headline %}
        <sw-text-field
                  :label="$tc('bst-cms.element.headline.label.title')"
                  :placeholder="$tc('bst-cms.element.headline.placeholder.title')"
                  v-model="element.config.title.value">
        </sw-text-field>
    {% endblock %}
    {% block bst_cms_element_subline %}
        <sw-text-field
                  :label="$tc('bst-cms.element.headline.label.subtitle')"
                  :placeholder="$tc('bst-cms.element.headline.placeholder.subtitle')"
                  v-model="element.config.subTitle.value">
        </sw-text-field>
    {% endblock %}
</div>
{% endblock %}

```

JS

```auto
import template from './headline.html.twig';

const { Component, Mixin } = Shopware;

Component.register('bst-cms-el-config-headline', {
    template,

    inject: ['systemConfigApiService'],

    mixins: [
        Mixin.getByName('cms-element'),
    ],

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

    methods: {
        createdComponent() {
            this.initElementConfig('bst-headline');
        },
    }
});

```

Component (Hier hatte ich noch Textbausteine drin und nicht auf die Elemente ansich referenziert

```auto
{% block bst_cms_element_headline %}
<div class="bst-cms-el-headline">
    <h2 class="title"><span>{{ element.config.title.value }}</span></h2>
    <h3 class="subTitle">{{ element.config.subTitle.value }}</h3>
</div>
{% endblock %}

```

Gruß