Sidebar rechts Admin Artikeldetailseite erweitern

Ich würde gern für mein eigenes Plugin die Übersicht der Artikeldetailseite erweitern. Dazu hatte ich vor in die rechte Sidbar einen weitere Accordion Reiter einzufügen. Leider hab ich dazu keinerlei Infos gefunden. Weis hier jemand Rat oder hat ein Stück Code zum Verständnis? Danke

unter templates/_default/backend/article/view/detail/sidebar.js: createElements: function() { var me = this; return [{ xtype: 'article-sidebar-option', shopStore: me.shopStore, article: me.article, animCollapse: Ext.isChrome, animate: Ext.isChrome }, { xtype: 'article-sidebar-link', article: me.article, animCollapse: Ext.isChrome, animate: Ext.isChrome }, { xtype: 'article-sidebar-accessory', article: me.article, gridStore: me.article.getAccessory(), animCollapse: Ext.isChrome, animate: Ext.isChrome }, { xtype: 'article-sidebar-similar', article: me.article, gridStore: me.article.getSimilar(), animCollapse: Ext.isChrome, animate: Ext.isChrome }]; } kannst du in nem eigenem Plugin per override noch ein weiteres element hinzufügen und unter templates/_default/backend/article/view/detail/sidebar/ findest du die dazugehörigen elemente.

Danke für die Antwort. Ja, das hab ich schon gesehen und auch probiert, aber leider wird der Reiter nicht angezeigt. Insofern hat mir das nicht wirklich weitergebracht. Ich denke ich hab einen anderen groben Fehler gemacht. Daher die Frage nach einem Stück Code um zu sehen wo mein Fehler liegt. meine Sidebar.js //{namespace name="backend/MeinPlugin/view/main"} //{block name="backend/meinplugin/view/detail/sidebar" append} Ext.define('Shopware.apps.MeinPlugin.view.detail.Sidebar', { override : 'Shopware.apps.Article.view.detail.Sidebar', initComponent: function() { var me = this; var newTab = new Ext.Panel({ layout: 'fit', html: 'New Tab', title: 'New Tab', closable: true }); me.add(me.newTab); me.callParent(arguments); } }); // {/block} Dies ist mein letzter Versuch gewesen überhaupt eine Ausgabe und einen Reiter zu erzeugen. Es geht erstmal grundsätzlich darum Reiter bei den Artikeln anlegen zu können. Wo liegt mein Fehler? Einen Auszug aus der Bootstrap kann ich auch liefern falls das weiter helfen würde.

der block Name darf nicht auf dein Plugin zeigen, sondern auf article/view/Detail/sidebar. wenn dann noch nicht klappt wär ein Auszug aus der bootstrap hilfreich

1 Like

Super das funktioniert jetzt. Allerdings überschreibe ich die Standard Tabs und sehe nun nur mein eigenes Tab. //{namespace name="backend/meinplugin/view/main"} //{block name="backend/article/view/detail/sidebar"} Ext.define('Shopware.apps.Ebay.view.detail.Sidebar', { override : 'Shopware.apps.Article.view.detail.Sidebar', /\*\* \* The initComponent template method is an important initialization step for a Component. \* It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. \* The initComponent method of the class being created is called first, \* with each initComponent method up the hierarchy to Ext.Component being called thereafter. \* This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. \* The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called. \* \* @return void \*/ initComponent:function () { var me = this; me.items = me.createElements(); me.callParent(arguments); }, /\*\* \* Creates the elements for the sidebar container. \* @return array \*/ createElements: function() { var me = this; return [{ xtype: 'article-sidebar-meinplugin', article: me.article, animCollapse: Ext.isChrome, animate: Ext.isChrome }]; } }); // {/block} irgendwie klar. Nun hab ich einiges mit add() probiert jedoch ohne Erfolg. Hast du dazu evt auch eine Idee, wie ich das add() korrekt verwende?

du musst per calloverridden den return value der originalfunktion holen, dann kannst du per items.push deinen Reiter hinzufügen. Ich post dir morgen nen codeschnippsel dazu, PC is schon aus und nur fix mobil online :slight_smile: Edit: //{namespace name="backend/meinplugin/view/main"} //{block name="backend/article/view/detail/sidebar"} Ext.define('Shopware.apps.Ebay.view.detail.Sidebar', { override : 'Shopware.apps.Article.view.detail.Sidebar', /\*\* \* Creates the elements for the sidebar container. \* @return array \*/ createElements: function() { var me = this, elements = me.callOverridden(arguments); var myplugin = [{ xtype: 'article-sidebar-meinplugin', article: me.article, animCollapse: Ext.isChrome, animate: Ext.isChrome }]; elements.items.push(myplugin); return elements; } }); // {/block} so in der richtung :wink:

Nochmals danke für deinen Tipp und deinen Code. Hab das eingebaut und es wird ein Tab mehr angezeigt allerdings ohne Titel und Content. Die Info zur elements.items.push(myplugin); funktioniert nicht ganz und hab das geändert auf elements.push(myplugin); Jetzt erscheint der Reiter, aber wie gesagt ohne Titel und Inhalt. Zumindest bin jetzt auf dem richtigen Weg. Warte dann mal gespannt auf deinen Code Schnipsel. :slight_smile:

den title und inhalt musst du in templates/_default/backend/article/view/detail/sidebar/meinplugin.js definieren :wink:

Ja die hab ich auch und da steht folgendes drin. //{namespace name=backend/article/view/main} //{block name="backend/article/view/detail/sidebar/meinplugin"} Ext.define('Shopware.apps.Article.view.detail.sidebar.MeinPlugin', { /\*\* \* Define that the billing field set is an extension of the Ext.form.FieldSet \* @string \*/ extend:'Ext.form.Panel', /\*\* \* List of short aliases for class names. Most useful for defining xtypes for widgets. \* @string \*/ alias:'widget.article-sidebar-meinplugin', /\*\* \* Set css class for this component \* @string \*/ cls: Ext.baseCSSPrefix + 'article-sidebar-meinplugin', /\*\* \* Contains all snippets for the view component \* @object \*/ snippets:{ title:'{s name=detail/sidebar/meinplugin/title}Mein Plugin{/s}', }, bodyPadding: 10, autoScroll: true, /\*\* \* Helper property which contains the name of the add event which fired when the user \* clicks the button of the form panel \*/ addEvent: 'addMeinPluginArticle', /\*\* \* The initComponent template method is an important initialization step for a Component. \* It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. \* The initComponent method of the class being created is called first, \* with each initComponent method up the hierarchy to Ext.Component being called thereafter. \* This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. \* The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called. \* \* @return void \*/ initComponent:function () { var me = this; me.title = me.snippets.title; me.items = me.createElements(); me.callParent(arguments); }, /\*\* \* Creates the elements for the similar article panel. \* @return array \*/ createElements: function() { var me = this; me.noticeContainer = me.createNoticeContainer(); return [me.noticeContainer]; }, /\*\* \* Creates the notice container for the similar articles panel. \* @return Ext.container.Container \*/ createNoticeContainer: function() { var me = this; return Ext.create('Ext.container.Container', { cls: Ext.baseCSSPrefix + 'global-notice-text', html: "Text Text Text" }); }, }); //{/block}

addEvent brauchst du ja scheinbar nicht, wenn dus nicht registrierst und createElements und CreateNoticeContainer kannst du zusammenfassen und das komma hinter createnoticecontainer ist überflüssig //{namespace name=backend/article/view/main} //{block name="backend/article/view/detail/sidebar/meinplugin"} Ext.define('Shopware.apps.Article.view.detail.sidebar.MeinPlugin', { /\*\* \* Define that the billing field set is an extension of the Ext.form.FieldSet \* @string \*/ extend:'Ext.form.Panel', /\*\* \* List of short aliases for class names. Most useful for defining xtypes for widgets. \* @string \*/ alias:'widget.article-sidebar-meinplugin', /\*\* \* Set css class for this component \* @string \*/ cls: Ext.baseCSSPrefix + 'article-sidebar-meinplugin', /\*\* \* Contains all snippets for the view component \* @object \*/ snippets:{ title:'{s name=detail/sidebar/meinplugin/title}Mein Plugin{/s}', }, bodyPadding: 10, autoScroll: true, /\*\* \* The initComponent template method is an important initialization step for a Component. \* It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. \* The initComponent method of the class being created is called first, \* with each initComponent method up the hierarchy to Ext.Component being called thereafter. \* This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. \* The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called. \* \* @return void \*/ initComponent:function () { var me = this; me.title = me.snippets.title; me.items = me.createElements(); me.callParent(arguments); }, /\*\* \* Creates the elements for the similar article panel. \* @return array \*/ createElements: function() { var me = this; return Ext.create('Ext.container.Container', { cls: Ext.baseCSSPrefix + 'global-notice-text', html: "Text Text Text" }); } }); //{/block} falls es immer noch nicht geht müsste FireBug was ausspucken :slight_smile:

Also ich hab das so abgeändert wie du geschrieben hattest. Der Container ist nach wie vor leer und Firebug ist still. Evt. sollte ich erwähnen, dass ich das Benchmark Plugin nicht installiert habe, da es bei mir PHP Fehler wirft. Ich hab nur Log,Debug und Benchmark aktiv. Evt liegt es daran, bin aber nicht sicher, da es in firephp ausgaben gibt.

mach mal in createelemnts ein console.log(me) dann merkst ob die Funktion über haupt aufgerufen wird.

Ja, da kommt was. Gut das funktioniert. Jetzt hab ich mal getestet was passiert wenn ich die Reihenfolge ändere in der createElements() So erscheint mein Reiter mit Titel und Content, zusätzlich ist ein weiterer Reiter da, der aber leer ist. elements = me.createTab(); elements.push(me.callOverridden(arguments)); Wenn ich die Reihenfolge wieder ändere zu elements = me.callOverridden(arguments); elements.push( me.createTab()); Erscheinen die standart Reiter plus ein leerer. Ich denke irgendwo wird da noch etwas überschrieben, bzw nicht korrekt übergeben… ???

kannst du mal deine js files aus dem ordner view als attachment zur Verfügung stellen? also brauch nicht controller js files etc :slight_smile:

Klar, ich hab mal mein ganzes Plugin hochgeladen bzw. Die Auszüge die für das Tab verantwortlich sein sollten. Evt. haben andere ebenfalls mal das selbe Problem … Ich glaub ich kann hier keine Attachments anhängen ???

stimmt o.O kannst es ja als zip auf deinem webspace packen und den link posten :wink:

Ich habs mal auf einen File Uploader gelegt und das ganze als Plugin zusammengestellt. Evt. kann das ja später noch jemand gebrauchen. MeinPlugin.rar

Hi! Vermutlich ist es schon gelöst, aber in deinem aktuellen Code überschreibst du den bestehenden Block du solltes dein Object anhängen: //{block name="backend/article/view/detail/sidebar" append}

Vielen Dank für den Hinweis. Tatsächlich ist es so das immer noch nicht funktioniert. Ich hab deine Ergänzung lokal hinzugefügt aber es läuft einfach nicht. Vielleicht fallen dir noch mehr Fehler von mir auf. Ich würde wenn es denn mal funktioniert den richtigen Code hier posten. Danke dennoch für deine Ergänzung. Ich denke das wird einige Interessieren leider geht mein Beispiel hier noch nicht. :frowning: