Einkaufswelten Element -> custom emotion component speichern

Shopware 5 Programmierung
1

 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

 

Ich hoffe es kann wer helfen.

 

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


});

 

2

Hallo Tammo,

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

Gruß
Patrick

3

Hallo zusammen,

hatte heute auch das Problem, dass ich einen Color Picker in einem eigenen 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