Hallo liebe Community,
sorry das ich den Beitrag wieder raus krame. Aber: Der Link ist down. Kann jemand die fertige Media Extension nochmal hochladen?
Ich habe momentan genau das selbe Problem.
Liebe Grüße
Marvin
Hi Marvin,
im letzten Beitrag von Philipp findest du unter dem Link auch ein Beispiel Plugin.
Viele Grüße aus Schöppingen
Michael Telgmann
Hey Michael,
ja dort ist ein Beispiel Plugin. Leider hat das die Mediatheken Anbindung nicht mehr.
Liebe Grüße
Marvin
Es geht mir eigentlich nur um diese Funktionalität. Die Anbindung an die Mediathek.
Hallo liebe Community,
auf Grund der großen Nachfrage möchte ich mir heute die Zeit nehmen, um Euch mit weiteren Infos zum Erstellen eigener ExtJS Komponenten zu versorgen. Die Umsetzung eigener Komponenten für die Einkaufswelten-Elemente ist in der Tat nicht ganz einfach und erfordert einige Kenntnisse im Bereich Shopware und ExtJS.
Um Euch beim Start unter die Arme zu greifen habe ich Euch ein komeplettes Beispiel-Plugin mit ausreichend Dokumentation und Kommentaren erstellt. Dieses steht ab sofort in dem Wiki-Artikel als Download zur Verfügung. Oder für alle Schnellklicker:
Download Media Widget Example Plugin
Am interessantesten ist wohl für die meisten unter Euch der Media-Manager. Daher habe ich diesen auch für das Beispiel-Plugin verwendet. Um auf Eure Fragen einzugehen möchte ich Euch einige Bereiche hier noch einzelnd erläutern.
Beim Erstellen des Elementes ist es wichtig, dass der xtype für unsere ExtJS Komponente definiert wird:
return $this->createEmotionComponent(array( ‚name‘ => ‚Media Widget‘, ‚xtype‘ => ‚emotion-media-widget‘, ‚template‘ => ‚emotion_media‘, ‚cls‘ => ‚emotion-media-widget‘, ‚description‘ => ‚An emotion element example plugin with custom ExtJS component.‘ ));
Wie bereits in dem Wiki-Artikel beschrieben verwenden wir zur Vereinfachung ein „hidden input“ Feld zum Speichern der Daten unserer Custom-Komponente. Dieses können wir ganz einfach über die neuen Helper-Funktionen erstellen:
$this->component->createHiddenField(array( ‚name‘ => ‚media_widget_store‘, ‚allowBlank‘ => true ));
Um unsere Daten später aufbereiten zu können, registrieren wir uns auf des neue Filter-Event:
$this->subscribeEvent( ‚Shopware_Controllers_Widgets_Emotion_AddElement‘, ‚onEmotionAddElement‘ );
Tipp: In unserer ExtJS Komponente können wir ein eigenes Fieldset erstellen. Dadurch werden unsere eigenen Felder nicht einfach unter die anderen Felder angehängt sondern in einem schönen eigenen Bereich dargestellt:
return me.widgetFieldset = Ext.create(‚Ext.form.FieldSet‘, { title: ‚{s name=emotion/component/media_widget/fieldset/title}Media Widget Settings{/s}‘, layout: ‚anchor‘, defaults: { anchor: ‚100%‘ }, items: [me.mediaManagerField] });
Unserem Fieldset können wir eigene Felder zuweisen. Wie zum Beispiel ein Media-Manager Feld:
return me.mediaManagerField = Ext.create(‚Shopware.form.field.MediaSelection‘, { buttonText: ‚{s name=emotion/component/media_widget/media/button_text}Select a file{/s}‘, listeners: { scope: this, selectMedia: me.onMediaSelection } });
Wie Ihr sehen könnt, definieren wir einen Event-Listener auf unserem Feld um die Medienauswahl des Benutzers zu verarbeiten. Wenn das Event geworfen wird, schreiben wir die Daten in unser zuvor erstelltes Hidden-Input als JSON String.
me.mediaManagerStoreField.setValue(Ext.JSON.encode(cache));
Dadurch können die Daten mit unseren anderen Konfigurationsfeldern gespeichert werden. In unserem Plugin haben wir uns ja bereits auf das Filter-Event registriert und können nun in unserem Event-Handler den JSON String auslesen und die Daten für unser Template aufbereiten:
$files = json_decode($data[‚media_widget_store‘], true);
In unserem Template stehen uns nun alle Daten in der Smarty Variable $Data zur Verfügung.
Ich hoffe damit konnte ich einige Eurer Fragen beantworten und Euch den Start mit Euren eigenen ExtJS Komponenten erleichtern. Die Code-Snippets sind natürlich nur einzelne Auszüge aus dem Beispiel-Plugin. Für den vollständigen Code ladet Euch am besten das Beispiel-Plugin herunter. Das Vimeo-Widget aus dem Tutorial steht nun ebenfalls als Download zur Verfügung.
Viel Spass beim Coden wünscht Euch
Phil
Hi,
im alten Artikel findest du auch noch ein paar Beispiele. Allerdings sind die so nicht 1zu1 auf Shopware 5.2 übertragbar:
Viele Grüße aus Schöppingen
Michael Telgmann
Hey Michael,
Vielen Dank! Auf der Seite hab ich den Downloadlink gefunden.
Für alle die ebenfalls die Extension suchen und den toten Link angeklickt haben: http://community.shopware.com/files/downloads/mediawidget-14591598.zip
Liebe Grüße
Marvin