# Einkaufswelten Element -\> custom emotion component speichern

**URL:** <https://forum.shopware.com/t/einkaufswelten-element-custom-emotion-component-speichern/43819>\
**Category:** Programmierung\
**Created:** [17. Februar 2017 um 17:12 UTC](https://forum.shopware.com/t/einkaufswelten-element-custom-emotion-component-speichern/43819 "2017-02-17T17:12:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tammo](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@Tammo](https://forum.shopware.com/u/Tammo)\
**Post date:** [17. Februar 2017 um 17:12 UTC](https://forum.shopware.com/t/einkaufswelten-element-custom-emotion-component-speichern/43819/1 "2017-02-17T17:12:40Z")

</div>

&nbsp;Hallo,

ich versuche gerade ein neues Element für die Einkaufswelten zu erstellen. Da ich gerne einen Colorpicker hätte und es nicht fertiges gibt (wie createColorPicker) habe ich per ExtJs versucht einen zu erstellen. Dieser wird mir auch angezeigt im Backend. Jedoch wird das Feld nicht gespeichert und auch im $Data array taucht der gewählte Farbwert nicht auf.

Bin langsam am Verzweifeln. Hab nun auch schon mehrere Listener versucht und diverse speichermethoden aber nichts will. anbei mal gekürzte Bootstrap.php und mein extjs file

&nbsp;

Ich hoffe es kann wer helfen.

&nbsp;

LG

```
createEmotionComponent([
            'name' => 'Counter Banner',
            'template' => 'emotion_counter',
            'xtype' => 'emotion-components-counter',
            'description' => 'A banner with counter.'
        ]);
.
.
.
.
        $counterElement->createHiddenField([
            'name' => 'color',
            'allowBlank' => true
        ]);

			

        /**
         * Subscribe to the post dispatch event of the emotion backend module to extend the components.
         */
        $this->subscribeEvent(
            'Enlight_Controller_Action_PostDispatchSecure_Backend_Emotion',
            'onPostDispatchBackendEmotion'
        );
        $this->subscribeEvent(
            'Shopware_Controllers_Widgets_Emotion_AddElement',
            'onEmotionAddElement'
        );
		
        $this->subscribeEvent(
            'Theme_Compiler_Collect_Plugin_Less',
            'onCollectLessFiles'
        );
		
		$this->subscribeEvent(
        'Theme_Compiler_Collect_Plugin_Javascript',
        'addJsFiles'
		);
		
		$this->subscribeEvent(
		'Theme_Compiler_Collect_Plugin_Css',
		'onCollectCssFiles'
		);

        $this->subscribeEvent(
            'Shopware_Controllers_Widgets_Emotion_AddElement',
            'onEmotionAddElement'
        );

        return true;
    }

    /**
     * Extends the backend template to add the grid component for the emotion designer.
     *
     * @param Enlight_Controller_ActionEventArgs $args
     */
    public function onPostDispatchBackendEmotion(Enlight_Controller_ActionEventArgs $args)
    {
        /** @var \Shopware_Controllers_Backend_Emotion $controller */
        $controller = $args->getSubject();
        $view = $controller->View();
        $view->addTemplateDir($this->Path() . 'Views/');
    }

    public function onEmotionAddElement(Enlight_Event_EventArgs $arguments)
    {
        $data = $arguments->getReturn();

        return $data;
    }
	

}

Ext.define('Shopware.apps.Emotion.view.components.CounterBanner', {

    extend: 'Shopware.apps.Emotion.view.components.Base',

    alias: 'widget.emotion-components-counter',

    initComponent: function () {
        var me = this;

        me.callParent(arguments);
        me.colorHiddenField = me.getForm().findField('color');
        me.createColorField();
        me.createHoverEffectWidgetFieldset();
        me.add(me.widgetFieldset);
    },

    onColorChange: function (field, value) {
        var me = this;
        me.colorHiddenField.setValue(value);
    },

    createColorField: function(){
        var me = this;
        return me.colorField = Ext.create('Shopware.form.field.ColorField', {
            fieldLabel: 'Hintergrundfarbe',
            listeners:{
                scope: this,
                select: me.onColorChange,
                change: me.onColorChange
            }
        });

    },

    createHoverEffectWidgetFieldset: function() {
        var me = this;

        return me.widgetFieldset = Ext.create('Ext.form.FieldSet', {
            title: 'Farb-Einstellungen',
            layout: 'anchor',
            defaults: { anchor: '100%' },
            items: [
                me.colorField
            ]
        });
    },

});

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![DrowGmbH](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@DrowGmbH](https://forum.shopware.com/u/DrowGmbH)\
**Post date:** [12. Oktober 2017 um 08:29 UTC](https://forum.shopware.com/t/einkaufswelten-element-custom-emotion-component-speichern/43819/2 "2017-10-12T08:29:54Z")

</div>

Hallo Tammo,

wir haben aktuell ein ähnliches Problem.  
Konntest du&nbsp;dazu mittlerweile eine Lösung finden?

Gruß  
Patrick

---

<div class="post-metadata">

**Author:** ![kreativrudel](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/kreativrudel/32/14503_2.png) [@kreativrudel](https://forum.shopware.com/u/kreativrudel)\
**Post date:** [22. März 2019 um 16:19 UTC](https://forum.shopware.com/t/einkaufswelten-element-custom-emotion-component-speichern/43819/3 "2019-03-22T16:19:03Z")

</div>

Hallo zusammen,

hatte heute auch das Problem, dass ich einen Color Picker in einem eigenen&nbsp;Einkaufswelt Elemente benötigte. So habe ich es gelöst:

```
 // Plugin/Resources/views/emotion\_components/backend/meine-komponente.js /\*\* \* \*/ // {namespace name="backend/emotion/meine\_komponente"} //{block name="emotion\_components/backend/meine\_komponente"} Ext.define('Shopware.apps.Emotion.view.components.MeineKomponente', { extend: 'Shopware.apps.Emotion.view.components.Base', alias: 'widget.emotion-components-meine-komponente', initComponent: function () { var me = this; me.callParent(arguments); me.colorPicker = Ext.create('Shopware.form.field.ColorField', { name: 'bg\_color', fieldLabel: 'Background color', supportText: 'This value is used to set the backgrond-color of a specific element.', value: me.getForm().findField('bg\_color').getValue() }); me.colorPicker.inputField.on('change', function(field, newValue){ me.refreshStuff(field, newValue); }); me.add(me.colorPicker); }, refreshStuff: function(field, newValue) { var me = this; if (me.elementFieldset.items.items) { for(var i = 0, c = me.elementFieldset.items.items.length ; i \< c ; i++) { if (me.elementFieldset.items.items[i].name === field.name) { me.elementFieldset.items.items[i].setValue(newValue); } } } }, }); //{/block} 

```

Dann bei der Elementeninstallation:

```
 // ... $element-\>createHiddenField( ['name' =\> 'bg\_color', 'fieldLabel' =\> 'Background color', 'supportText' =\> 'This value is used to set the backgrond-color of a specific element.', 'allowBlank' =\> true,] ); // ... 

```

Viele Grüße  
Miron