Shopware 6 custom CMS element

Question

I am creating a custom element. I do the steps correctly according to this document, but I can not update my config value.

here is my code.

customelement/index.js

import './component'; 
import './preview';
import './config';
Shopware.Service('cmsService').registerCmsElement({
   name: 'customelement',
   label: 'sw-cms.elements.customelement.label',
   component: 'sw-cms-el-customelement',
   configComponent: 'sw-cms-el-config-customelement',
   previewComponent: 'sw-cms-el-preview-customelement',
   defaultConfig: {
      varName: {
        source: 'static',
        value: 'hello raj'
     }
  }
});

customelement/component/index.js

import template from './sw-cms-el-customelement.html.twig';
import './sw-cms-el-customelement.scss';
Shopware.Component.register('sw-cms-el-customelement', {
    template,

    mixins: [
      'cms-element'
    ],

  computed: {
      varName() {
          return this.element.config.varName.value;
      }
  },

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

  methods: {
      createdComponent() {
           this.initElementConfig('customelement');
      }
  }
});

customelement/config/index.js

import template from './sw-cms-el-config-customelement.html.twig';
Shopware.Component.register('sw-cms-el-config-customelement', {
   template,

   mixins: [
      'cms-element'
   ],

   computed: {
      varName() {
         return this.element.config.varName.value;
      }
   },

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

   methods: {
      createdComponent() {
         this.initElementConfig('customelement');
      },

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

customelement/config/sw-cms-el-config-customelement.html.twig

{% block sw_cms_element_customelement_config %}
<sw-text-field
    class="swag-customelement-field"
    label="value"
    placeholder="Enter value..."
    v-model="varName"
    @element-update="onElementUpdate">
</sw-text-field>
{% endblock %}

When I enter a varName value and press done the varName value is set to the default value. Is there anything wrong? If not, then why the config value is not updated?

Answer 1

Not quite sure if the documentation is correct. I think it might be that onElementUpdate isn't called. Maybe try using the conventional event binds and set the value manually:

<sw-text-field
    class="swag-customelement-field"
    label="value"
    placeholder="Enter value..."
    v-model="varName"
    @input="onElementUpdate"
    @change="onElementUpdate">
</sw-text-field>

// sw-cms-el-config-customelement
onElementUpdate(value) {
    this.element.config.varName.value = value;

    this.$emit('element-update', this.element);
}