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

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

{% 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

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

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

inject: ['repositoryFactory'],

Hi ninja.

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

Gruß

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

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);
        }
    }

});

Hi.

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

Config

{% 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

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

{% 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ß

1 Like