Eigene ExtJS Elemente für Komponenten erstellen

Hey, genau! Einfach auf das Event registrieren: $this-\>subscribeEvent( 'Shopware\_Controllers\_Widgets\_Emotion\_AddElement', 'onEmotionAddElement' ); Und dann kannst Du die Daten vor der Ausgabe bearbeiten: public function onEmotionAddElement(Enlight\_Event\_EventArgs $arguments) { $data = $arguments-\>getReturn(); [... your code ...] return $data; } Grüße, Phil

Moin Moin, bei mir funktioniert soweit alles. Aber wie kann ich meine Komponente wieder löschen? Habe das Plugin zu Testzwecken mehrfach installiert und jetzt steht in der Einkaufswelt und third party 3 mal meine Komponente… Bräuchte ne Methode um sie wieder innerhalb meiner Uninstall Methode zu löschen Gruß

Die neuen Komponenten bringen leider keine Möglichkeit mit, ein Einkaufswelten Element geschickt wieder zu entfernen. Hier müsstest du dein Element in der uninstall() Methode zu Fuß aus der „s_library_component“ löschen. Viele Grüße

Hallo, das Widget sollte beim Deinstallieren des Plugins automatisch von Shopware aus der Datenbank gelöscht werden. Sollte dies bei Euch nicht der Fall sein, bitte ich Euch ein Ticket mit entsprechender Beschreibung dazu in unserem Issue-Tracker anzulegen. Bitte daran denken, alle wichtigen Infos mit in das Ticket zu schreiben. - Welche Shopware Version ist im Einsatz? - Welche Plugins wurden installiert? - Welche Schritte wurden durchgeführt? - Wie kann der Fehler reproduziert werden? - usw… Sonnige Grüße, Phil

Vielen Dank! Falls es jmd interessiert, hier meine Funktion private function removeEmotionComponents() { $sql = "SELECT id FROM s\_library\_component WHERE x\_type = 'emotion-radius-widget' "; $id = Shopware()-\>Db()-\>fetchOne($sql); $sql = "DELETE FROM s\_emotion\_element WHERE componentID = '" . $id . "' "; $query = Shopware()-\>Db()-\>query($sql); $sql = "DELETE FROM s\_library\_component WHERE id = '" . $id . "' "; $query = Shopware()-\>Db()-\>query($sql); }

Hallo Shopware-Community, auch ich habe mich mal an einer eigenen ExtJS-Komponente versucht, jedoch kam bei mir im Backend bereits beim Aufruf der Einkaufswelten-Übersicht der Fehler "Unexpected Token … ". Dabei sah mein Code für mich eigentlich recht stimmig aus: (Ausschnitt Bootstrap.php) /\*\* \* install method for this plugin \* calls all needed install methods \* @access public \* @return bool \*/ public function install() { // create emotion component $component = $this-\>addEmotionComponent(); // create all needed fields for this emotion component $component = $this-\>addEmotionFields($component); return true; } /\*\* \* method to uninstall the plugin \* @access public \* @return bool \*/ public function uninstall() { return true; } /\*\* \* method to install the emotion component \* @access public \* @return object $component - the created emotion component \*/ public function addEmotionComponent() { $component = $this-\>createEmotionComponent(array( 'name' =\> 'Formular', 'xtype' =\> 'emotion-form-widget', 'template' =\> 'component\_form', 'cls' =\> 'shopjektiv-include-form' )); return $component; } /\*\* \* method to install the emotion component's fields \* @access public \* @param object $component - the emotion component the fields have to be added to \* @return object $component - the emotion component with the added fields \*/ public function addEmotionFields($component) { // create hidden field to store data $component-\>createHiddenField(array( 'name' =\> 'form\_widget\_store', 'valueType' =\> 'json', 'allowBlank' =\> true )); return $component; } (formular.js) Ext.define('Shopware.apps.Emotion.view.components.Formular', { extend: 'Shopware.apps.Emotion.view.components.Base', alias: 'widget.emotion-form-widget', /\*\* \* Initiliaze the component. \* \* @public \* @return void \*/ initComponent: function() { var me = this; me.callParent(arguments); } }); Im Backend führte das dann wie gesagt zu folgender Fehlermeldung unter SW 4.2.0 und auch SW 4.2.1: SyntaxError: Unexpected token : at http://meinedomain.de/engine/Library/ExtJs/ext-all.js?201402041227:21:5361 at Object.Ext.globalEval (http://meinedomain.de/engine/Library/ExtJs/ext-all.js?201402041227:21:5369) at Ext.Ajax.request.success (http://meinedomain.de/backend/base?file=bootstrap&loggedIn=1397747720:477:5) at Object.Ext.apply.callback (http://meinedomain.de/engine/Library/ExtJs/ext-all.js?201402041227:21:67496) at Ext.define.onComplete (http://meinedomain.de/engine/Library/ExtJs/ext-all.js?201402041227:21:422670) at Ext.define.onStateChange (http://meinedomain.de/engine/Library/ExtJs/ext-all.js?201402041227:21:422314) at XMLHttpRequest.<anonymous> (http://meinedomain.de-nserver.de/engine/Library/ExtJs/ext-all.js?201402041227:21:17406)

Dann habe ich mir wie in diesem Thread beschrieben mal die ExtJS-Dateien der Standard Shopware Einkaufswelten-Elemente angeschaut (genauer gesagt die der category_teaser.js), den Code in meine ExtJS eingefügt und angepasst. Siehe da, keine Fehlermeldung mehr. Also wohl ein Fehler in meinem Code. Ich habe dann den eingefügten Code nach und nach verringert, bis ich nur noch das Grundgerüst hatte (natürlich unter der Voraussetzung, dass auch im Backend alles wie gewünscht funktioniert). Dabei ist mir aufgefallen, dass die Fehlermeldung erst nach dem wegfallen zwei bestimmter Zeilen erscheinen.
Hier mein kompletter funktionstüchtiger Code aus meiner ExtJS-Datei:

[code]//{block name=“backend/emotion/view/components/formular”}
Ext.define(‘Shopware.apps.Emotion.view.components.Formular’, {
extend: ‘Shopware.apps.Emotion.view.components.Base’,
alias: ‘widget.emotion-form-widget’,

/**
 * Initiliaze the component.
 *
 * @public
 * @return void
 */
initComponent: function() {
    var me = this;
    me.callParent(arguments);
}

});
//{/block}[/code]

Es liegt also irgendwie an den (auskommentierten?!) Blöcken. Aber warum? Und warum konnte ich in keiner Doku was darüber lesen? Oder bin ich blind?
Ich muss zugeben, dass ich in ExtJS noch ein ziemlicher Anfänger bin also belehrt mich ruhig. :slight_smile:

LG BJunk

[quote=„BJunk“]jedoch kam bei mir im Backend bereits beim Aufruf der Einkaufswelten-Übersicht der Fehler "Unexpected Token … ". [/quote] Ich hatte genau das gleiche Problem. Und ich weiß bis heute nicht wieso, aber wenn ich einen Kommentar vor Ext.define(… setze kommt die Fehlermeldung nicht mehr. /\*\* \* ExtJS Component Test \*/ Ext.define('Shopware.apps.Emotion.view.components.Test', { [...] Wenn Ich den Kommentar über Ext.define entferne kommt sofort wieder die Unexpected Token Fehlermeldung. Wenn Ich ihn hinzufüge ist sie weg. Vielleicht hilft das dir ja auch :wink:

1 „Gefällt mir“

Danke simkli! Das hat geholfen. Für mich jedoch unverständlich ist, warum sowas nicht in der Doku erwähnt wird. Als nächsten Schritt habe ich versucht Werte für die ComboBox bereitzustellen. Laut ExtJS-Doku wäre das hier richtig gewesen: createFormManagerField: function() { var me = this, forms = Ext.create('Ext.data.Store', { fields: ["id", "name"], data: [{"id":"5","name":"Kontakformular"}] }); return me.formManagerField = Ext.create("Ext.form.field.ComboBox", { fieldLabel: "{s name=emotion/component/form\_widget/form/button\_text}Formular auswählen{/s}", store: forms, valueField: "id", displayField: "name" }); } Das hat in Shopware aber einen Syntax-Error geworfen. Ein Bekannter hat mich dann auf folgende Syntax gebracht: createFormManagerField: function() { var me = this, forms = Ext.create('Ext.data.Store', { fields: ["id", "name"], data: [{ "id":"5","name":"Kontakformular" }] }); return me.formManagerField = Ext.create("Ext.form.field.ComboBox", { fieldLabel: "{s name=emotion/component/form\_widget/form/button\_text}Formular auswählen{/s}", store: forms, valueField: "id", displayField: "name" }); } Geändert hat sich also die Position der geschweiften Klammern im Bereich, wo die ComboBox-Werte definiert werden. Da wäre ich ohne ihn aber nie im Leben drauf gekommen. Kann mir das jemand von Shopware erklären? Für mich ergibt das überhaupt keinen Sinn.

Hallo, das Verhalten mit den Klammern ist korrekt und auch so gewollt. Die Backend-Komponenten werden, wie die meisten schon richtig festgestellt haben, ebenfalls von Smarty verarbeitet. Andernfalls könnte man keine Template-Variablen oder Snippets in den Komponenten verwenden, so wie BJunk es z.B. auch bei seinm Fieldlabel macht. Bei Smarty-Befehlen folgt auf die Klammer immer direkt der entsprechende Tag. Im JavaScript Code sollte man daher darauf achten, immer einen Space nach den Klammern zu setzen, sollte man diese innerhalb einer Zeile verwenden. Die Smarty-Engine kann dann automatisch zwischen Smarty-Befehlen und normalem JS Code unterscheiden. Wenn Ihr den Parser für einen bestimmten Bereich ganz deaktivieren wollt könnt ihr auch den {literal}{/literal} Tag verwenden. Allerdings könnt Ihr dann auch keine Snippets verwenden. Sonnige Grüße, Phil

Hallo Phil, danke für deine Antwort. Mir drängen sich gerad noch zwei Fragen auf. 1. Ist es möglich, die angelegten Formulare in Shopware automatisch auszulesen und als store an die ComboBox zu hängen wie ich es mit dem Kontaktformular schon manuell getan habe? 2. Ich speichere den ausgewählten Wert in einem hidden-Field, dessen Wert mir auch vom Debug-Tool im Frontend unter der Variable $sEmotions angezeigt wird. Jedoch kann ich in meinem Einkaufswelten-Template für das Frontend nicht über $data auf den Wert zugreifen. Ist das so, weil es sich um ein Hidden-Field handelt oder habe ich vielleicht etwas übersehen? Danke schonmal im Voraus! :slight_smile:

Hallo Phil, ich habe ein kleines Problem mit dem Media Widget. Das Widget wurde problemlos installiert aber sobald ich im Einkauswelten Designer das Widget bearbeiten will passiert rein gar nichts sprich es öffnet sich kein Fenster. Was mache ich falsch? Grüße

Hallo @BJunk: Zu 1: Wenn Ihr besondere Daten aus Shopware in Eurer Konfiguration verfügbar machen wollt, könnt Ihr auch einen Remote-Store verwenden, welcher die Daten von einem Backend-Controller bezieht. Sollte noch keine passende Methode in einem der Shopware Controller bestehen, könnt Ihr auch eigene Controller über Euer Plugin erstellen. Controller registrieren ab Shopware 4.2 ExtJS Data Store mit Proxy Settings Zu 2: Die Daten sollten Dir eigentlich in $Data zur verfügung stehen. Vielleicht liegt es bei Dir nur an der Schreibweise. Versuche es mal mit einem großen „D“. @Pa_Trick: Das Widget sollte natürlich wie beschrieben funktionieren. Habe es selbst noch einmal getestet. Hilfreich wären bei solchen Fragen wie immer alle wichtigen Infos wie z.B.: - Shopware Version - Fehlermeldungen - Schritte zum Reproduzieren usw … Sonnige Grüße, Phil

1 „Gefällt mir“

Danke für die Antwort Phil, - Shopware Version 4.2.1 (Rev. 201402131706) - Fehlermeldungen( Keine) Installation erfolgte problemlos - Schritte zum Reproduzieren Deine Datei unter engine/Shopware/Plugins/Local/Backend abgelegt und unter Plugin Manager installiert Einkaufswelten aufgerufen ausgewählt externes Media Plugin hinzugefügt auf Bearbeiten klicken passiert nichts. Keine Reaktion. Ich arbeite mit dem Localhost als Server um mir das Shopware System anzueignen. Würde jetzt gerne anfangen eigene Plugins zu schreiben aber jeder Anfang ist schwer :wink: sonnige Grüße aus Berlin

1 „Gefällt mir“

Danke für das Media Widget Beispiel. Hierzu habe ich jetzt mal eine ganz blödes Problem: Ich kann das Widget nicht editieren. Weder durch Doppelklick noch durch Klick auf das Stift-Icon. Was könnte der Grund heirfür sein? Hat jemand eine Idee? siehe hier - screenshot

[quote=“Pa_Trick”] Das Widget wurde problemlos installiert aber sobald ich im Einkauswelten Designer das Widget bearbeiten will passiert rein gar nichts sprich es öffnet sich kein Fenster. Was mache ich falsch? Grüße[/quote] Hi Patrick, habe das gleiche Problem. Hast Du inzwischen eine Lösung gefunden?

Auch bei mir ist dieses Problem aufgetereten, dass ich das MediaWidget Plugin installiert habe aber das Einstellungsfenster sich nicht öffnet. Hat dazu jemand mittlerweile eine Lösung? Die Version ist 4.2.3 Plugins sind diverse installiert, viele auch selbst geschrieben (nicht von mir sondern den Kollegen hier auf der Arbeit). Vermutlich liegt es an irgendwelchen Wechselwirkungen mit anderen Plugins. Vielleicht hat ja mal jemand dieses Problem für sich lösen können und währe bereit seine Lösung hier kund zu tun.

Ich habe das selbe Problem bei dem MediaWidget. Wollte mich eigentlich bei meinem Plugin daran entlang hangeln. Gibt es inzwischen eine neue Version? Bzw. wo finde ich das Banner-Slider Widget mein Plugin soll ganz ähnlich werden. Edit: Die Console spuckt folgenden Fehler aus, wenn ich auf den Stift zum editieren klicke: Uncaught TypeError: Cannot read property ‘substring’ of undefined

Hallo, jetzt fehlt mir noch als letzte Info wie ich denn die angelegten Felder z.B. createTextfield() oder createCombo() die fieldLabels, supportText, … übersetzen kann? Hat jemand dazu einen Tipp? Gruß Frank

Hello,  Phillip… can you upload this  sample plugin again ?   now is 404 …  :confused:    I need sample how to add field in  EXTJS (Shopping worlds widget)   I have a problem with saving…

Hallo Ihr Lieben,

wir haben die Doku für das Erstellen eigener Einkaufswelten-Elemente aktualisiert.
Ihr findet eine neue Version der Doku inkl. überarbeitetem Beispiel-Plugin unter:

https://developers.shopware.com/developers-guide/custom-shopping-world-elements/

 

Sonnige Grüße,
Phil