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

Shopware 6 (German) Programmierung
1

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

2

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

inject: ['repositoryFactory'],
3

Hi ninja.

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

Gruß

4

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

});
5

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 „Gefällt mir“