# Artikel Backend um Tab erweitern

**URL:** <https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384>\
**Category:** Programmierung\
**Created:** [1. August 2018 um 15:13 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384 "2018-08-01T15:13:11Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [1. August 2018 um 15:13 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/1 "2018-08-01T15:13:11Z")

</div>

Hallo,

wie der Titel schon verrät, versuche ich gerade mit einem eigenen Plugin die Artikel-Bearbeitungs-Ansicht im Backend um einen Tab zu erweitern.

Um mir das Vorgehen dabei zu verinnerlichen hab’ ich mir das Demoplugin aus der Doku installiert:  
[Backend extensions](https://developers.shopware.com/developers-guide/backend-extension/#extending)&nbsp;

Dieses soll ja das Kunden Backend erweitern. Leider kommt jedoch ein Fehler im Backend:

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/f/f12463e0b89eb3a12d7e718f4e7fe520f7f96d62.png)

&nbsp;

Also weiß hier zufällig jemand Rat bzw. woran es hier scheitert ? Den angezeigten SyntaxError kann ich hier einfach nicht nachvollziehen.

Meine Shopware-Version ist 5.4.6.

Danke schonmal.

&nbsp;

---

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [1. August 2018 um 15:28 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/2 "2018-08-01T15:28:41Z")

</div>

Oder Gibt es vielleicht eine andere / aktuelle Extension bei der man sich das abschauen könnte ?

---

<div class="post-metadata">

**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\
**Post date:** [1. August 2018 um 15:56 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/3 "2018-08-01T15:56:03Z")

</div>

> Den angezeigten SyntaxError kann ich hier einfach nicht nachvollziehen.

Also irgendwas hast du ja scheinbar verändert. Bitte zeig uns den kompletten Quellcode, sonst können wir dir nicht helfen.

Viele Grüße&nbsp;

---

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [1. August 2018 um 16:03 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/4 "2018-08-01T16:03:56Z")

</div>

Das Plugin kann man hier runterladen; ganz unten auf der Seite.  
[Backend extensions](https://developers.shopware.com/developers-guide/backend-extension/?_ga=2.135190197.585423091.1533042087-121176557.1533042086#extending)&nbsp;

An dem Quellcode habe ich nichts geändert.  
Daher meine Verwunderung darüber, dass das (IN DER DOKU VERLINKTE !) Plugin diesen Fehler aufweist.

---

<div class="post-metadata">

**Author:** ![BestShopPossible](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@BestShopPossible](https://forum.shopware.com/u/BestShopPossible)\
**Post date:** [2. August 2018 um 07:17 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/5 "2018-08-02T07:17:04Z")

</div>

Wäre nicht das erste…

---

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [2. August 2018 um 08:43 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/6 "2018-08-02T08:43:19Z")

</div>

Scheint mir ja fast ein Core-Bug zu sein&nbsp; ![Undecided](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/undecided.png "Undecided")

Auch beim eigenen Plugin (nach Doku erstellt) taucht dieser Fehler nun auf.

Ich konnte den Fehler schon einmal ein weeenig eingrenzen…  
Sobald ich in meiner Klasse&nbsp; **ExtendArticle&nbsp;** die Funktion auskommentiere die die eigene **app.js** lädt, wird der Fehler nicht mehr ausgegeben.

Hier ein wenig Quellcode zum Nachvollziehen:  
&nbsp;

```
pluginDirectory = $pluginDirectory;
    }

    /**
     * {@inheritdoc}
     */
    public static function getSubscribedEvents() {
        return [
            'Enlight_Controller_Action_PostDispatchSecure_Backend_Article' => 'onArticlePostDispatch'
        ];
    }

    public function onArticlePostDispatch(\Enlight_Event_EventArgs $args) {

        /** @var \Shopware_Controllers_Backend_Article $controller */
        $controller = $args->getSubject();

        $view = $controller->View();
        $request = $controller->Request();

        $view->addTemplateDir($this->pluginDirectory . '/Resources/views');

// if ($request->getActionName() == 'index') {
// $view->extendsTemplate('backend/my_plugin/app.js');
// }

        if ($request->getActionName() == 'load') {
            $view->extendsTemplate('backend/my_plugin/view/detail/window.js');
        }
    }

}

```

&nbsp;

Und hier die entsprechende app.js:

```
//{block name="backend/article/application"}
// {$smarty.block.parent}
// {include file="backend/my_plugin/controller/my_own_controller.js"}
// {include file="backend/my_plugin/view/detail/my_own_tab.js"}
//{/block}

```

&nbsp;

Der controller:

```
Ext.define('Shopware.apps.MyPlugin.controller.MyOwnController', {
    
    /**
     * Override the article main controller
     * @string
     */
    override: 'Shopware.apps.Article.controller.Main',

    init: function () {
        var me = this;

        // me.callParent will execute the init function of the overridden controller
        me.callParent(arguments);
    }
});

```

&nbsp;

Und der Tab:  
&nbsp;

```
// This tab should be shown in the article module

Ext.define('Shopware.apps.MyPlugin.view.detail.MyOwnTab', {
    extend: 'Ext.container.Container',
    padding: 10,
    title: 'MyOwnTab',

    initComponent: function() {
        var me = this;

        me.items = [{
            xtype: 'label',
            html: 'Hello world'
        }];

        me.callParent(arguments);
    }

});

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [2. August 2018 um 08:45 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/7 "2018-08-02T08:45:14Z")

</div>

Und hier noch die **window.js:**  
&nbsp;

```
//{block name="backend/article/view/detail/window"}
// {$smarty.block.parent}
Ext.define('Shopware.apps.MyPlugin.view.detail.Window', {
    override: 'Shopware.apps.Article.view.detail.Window',

    createMainTabPanel: function () {
        var me = this,
            result = me.callParent();

        result.push(Ext.create('Shopware.apps.MyPlugin.view.detail.MyOwnTab'));

        return result;
    },

});
//{/block}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [2. August 2018 um 13:33 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/8 "2018-08-02T13:33:41Z")

</div>

Nobody ?!

Dann vielleicht nochmal die Frage nach einem funktionierenden Beispiel / Plugin, das genau das tut. Also die Artikel-Bearbeitung um einen Tab erweitern.

Wäre so was wohl irgendwo zu finden ?

---

<div class="post-metadata">

**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\
**Post date:** [3. August 2018 um 09:40 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/9 "2018-08-03T09:40:07Z")

</div>

Wir helfen hier doch alle freiwillig. Bitte nicht ständig doppelposten und mal etwas Geduld haben. Es ist unfair gegenüber anderen Fragestellern, die ihr Thema nicht ständig nach oben pushen mit Doppelpostings.

onTopic: So ich hab’ mir das jetzt mal im Detail angesehen. Ich hatte das gleiche Problem vor einer Ewigkeit auch mal (leider finde ich gerade den Post nicht mehr). Irgendwie scheinet Shopware gerne mal am Anfang vom ExtJs Code etwas ab. Bei Shopware steht am Anfang meistens der Lizenz Header, daher fällt dies nicht auf. (Wenn du dir mal den geladenen Request ansiehst, merkt man, dass einfach ein Teil vom Code fehlt)

Füge mal bei deinen ExtJS Scripten am Anfang einfach mal folgendes ein:

```
/**
 *
*/

```

(einfach einen leeren Kommentar).

Dann den Cache leeren und es sollte gehen.

Was genau schiefläuft weiß ich noch nicht. Ich habe gerade keine Zeit es ausführlicher zu debuggen.

Viele Grüße

---

<div class="post-metadata">

**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\
**Post date:** [3. August 2018 um 09:42 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/10 "2018-08-03T09:42:54Z")

</div>

Ha ![Grin](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/70033cde8e8ff79cfa538293ae71318d6f788423.png "Grin"), habe meinen alten Beitrag gefunden… 4 Jahre ist das jetzt schon her:

[https://forum.shopware.com/discussion/comment/89486/#Comment\_89486](https://forum.shopware.com/discussion/comment/89486/#Comment_89486)

Viele Grüße

---

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [3. August 2018 um 10:13 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/11 "2018-08-03T10:13:37Z")

</div>

Genial … aber auch irgendwie dämlich ![Grin](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/70033cde8e8ff79cfa538293ae71318d6f788423.png "Grin")… (vielleicht hat es aber auch einen guten Grund warum ExtJS den Code stripped; idk)

Das hat mein Problem tatsächlich gelöst.  
Danke&nbsp; ![Thumb-Up](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/7fcda44f782696668a3d093569d15e88105769e1.png "Thumb-Up")

&nbsp;

---

<div class="post-metadata">

**Author:** ![eMod](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@eMod](https://forum.shopware.com/u/eMod)\
**Post date:** [13. August 2018 um 15:42 UTC](https://forum.shopware.com/t/artikel-backend-um-tab-erweitern/54384/12 "2018-08-13T15:42:51Z")

</div>

Ich muss den Thread hier leider nochmal aufwärmen…

ich bin wie oben beschrieben vorgegangen um einen eigenen Tab innerhalb der Artikel Detailansicht zu generieren.  
Soweit so gut … Um den Tab zu befüllen, wird via Ajax request ein record abgefragt und das result als Liste (UL - unordered list [html]) im Tab dargestellt.

Nun soll via Click auf ein Listen-Element eine JS-Funktion ausgeführt werden.  
Allerdings ist das DOM-Element immer NULL, egal wie es selektiert wird (z.B. über document.getElementById(‘elementId’); oder Ext.get(‘elementId’)).

Meine Vermutung hier ist, dass das Skript ausgeführt wird bevor die DOM komplett geladen ist.

Das Skript wurde wie folgt implementiert:  
&nbsp;

app.js:

```
//{block name="backend/article/application" append}
// {$smarty.block.parent}
// {include file="backend/my_custom_plugin/controller/be_view_controller.js"}
//{/block}

```

&nbsp;

be-view-controller.js:

```
/**
 * 
 */
Ext.define('Shopware.apps.MyCustomPlugin.controller.BeViewController', {

    /**
     * Override the article main controller
     * @string
     */
    override: 'Shopware.apps.Article.controller.Main',

    init: function () {
        
        var me = this;
        me.callParent(arguments);
        
        var ulWrap = document.getElementById('customUlId');
        
        var ulWrap2 = Ext.get('customUlId');

        console.log(ulWrap);
        console.log(ulWrap2);
        
    },

});

```

Wie wäre hier der korrekt Weg um die Tab-Elemente im Skript “anzusprechen” ?  
Bzw. gibt es hier eine “Best-Practice” Methode für diesen Fall ?

EDIT:&nbsp; Ich mach lieber n eigenen thread draus.