Backend-Plugin Container und Controller abgeschnitten

Shopware 5 Programmierung
1

Hi,

ich habe gestern angefangen, ein Backend-Plugin zu schreiben, um bei den Kategorien einen neuen Tab einzufügen. Ausgangspunkt war die Doku Backend extensions

Ich habe mir die Codeblöcke aus der Webseite in meine Dateien ziemlich 1:1 einkopiert, halt soweit angepasst, das in der Kategorie-App ein weiterer Tab angezeigt werden soll. Ergebnis beim Öffnen der Kategorien:

Unexpected token :

Ich habe dann das Beispiel direkt heruntergeladen und installiert. Das hat (natürlich :wink: ) funktioniert. Daraufhin habe ich mein Plugin rausgenommen und das Beispiel so umgeschrieben, das der neue Tab in der Kategorie ist. Das hat auch funktioniert. Dann habe ich den Code “aufgeräumt”, also aus meiner Sicht unnötige Kommentare und Leerzeilen etc. raus. Und siehe da: 

Unexpected Token :

Also wieder zurück zur “Kunden-Version”, auch da den Code “aufgeräumt” => gleiches Ergebnis.

Über den JavaScript-Debugger habe ich dann festgestellt, dass das hier generiert wurde:

Der my_own_controller.js und my_own_tab.js wurden also einfach oben “abgeschnitten” und so ungültiger Code erzeugt!  Undecided Sobald ich in den beiden Dateien die ursprünglichen Leerzeilen am Anfang wieder eingefügt habe, lief es wieder (und dann auch entsprechend mit meinem “eigenen” Code.

Frage:  Warum ist das so? Gibt’s da eine Regel die ich nicht sehe? Das ist ja nicht bei allen *.js und Blöcken so. Eine der Dateien braucht auch 6 Leerzeilen, die andere “nur” 3 oder 4, damit nix abgeschnitten wird. Ich vermute auch mal stark, dass das nicht so sein sollte, weil sowas macht die Backend-Plugin-Entwicklung natürlich… “spannend”

Viele Grüße,

Alex

2

Mach mal am Anfang der Datei etwa 5 Leerzeilen dann wirds funktionieren

3

Ob es das exakte Verhalten ist und für Dein Problem zutrifft: keine Ahnung  Wink

Aber schon an diversen Stellen gesehen - und war auch mehr als 1x Thema im Forum ohne echte Antworten:

JS wird über smarty zusammen gebaut. “Unter-Scripte” werden dann mit Smarty-Blöcken injected. Damit der JS aber nicht rummeckert, werden die Smarty-Blöcke als Kommentar eingeleitet, also z.B. so
shopware/Shopware.grid.Panel.js at 5.5 · shopware/shopware · GitHub

// {block name="backend/application/Shopware.grid.Panel"}

Wenn Du nun also so einen Block erweiterst (prepend), wird der Inhalt Deiner JS in den Block geschrieben, also hinter dem Doppel-Slash - und wenn Deine JS-Datei bis zum ersten Zeilenumbruch relevanten Code hat, zählt er als Kommentar, und “fehlt” dem Script.

Erklärt jetzt aber nicht, warum es mehr als eine Leerzeile sein muss - ggf. Windows-Codierung vom New-Line ?

1 „Gefällt mir“
4

@Shyim schrieb:

Mach mal am Anfang der Datei etwa 5 Leerzeilen dann wirds funktionieren

Hi, ja, wie oben schon gesagt, dann funktionierts. Die Frage war, warum, bzw. warum so viele?

@sonic seine Antwort erklärt das teilweise (also warum man  eine  Leerzeile nötig ist). Das erklärt auch die Kommentarzeichen am Ende. (Eigentlich irgendwie logisch, wenn man drüber nachdenkt :wink: )

Aber warum die (Leer-)Zeilenanzahl variiert, ist immer noch nicht ganz klar. Die Theorie mit Windows- vs. Linux-New-Line werde ich heute Abend mal testen…

5

Also, die Dateien hatten tatsächlich Windows-\r\n als Zeilentrenner. Ich habe PHPStorm so eingestellt, das er jetzt immer Linux-\n nutzt (SW läuft ja auf einem Linux-Server). Es scheint sich jetzt soweit „normalisiert“ zu haben, das in der my_own_tab.js und my_own_controller.js 2 Leerzeilen nötig sind.

  • app.js (Keine Leerzeilen oben, 1 unten)

    //{block name=„backend/category/app“}
    // {$smarty.block.parent}
    // {include file=„backend/my_plugin/controller/main/my_own_controller.js“}
    // {include file=„backend/my_plugin/view/main/my_own_tab.js“}
    //{/block}

  • my_own_controller.js (2 Leerzeilen oben)

    Ext.define(‚Shopware.apps.MyPlugin.controller.MyOwnController‘, {
    /**
    * Override the category main controller
    * @string
    */
    override: ‚Shopware.apps.Category.controller.Main‘,

      init: function () {
      var me = this;

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

    });

  • my_own_tab.js (2 Leerzeilen oben)

    Ext.define(‚Shopware.apps.MyPlugin.view.main.MyOwnTab‘, {
    extend: ‚Ext.container.Container‘,
    padding: 10,
    title: ‚MyOwnTab‘,

      initComponent: function() {
      var me = this;

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

      me.callParent(arguments);
  }

    });

Wenn man sich an diese Regel halten kann… ok. Aber mir leuchtet immer noch nicht ein, warum es mehr als eine Leerzeile braucht. Ebensowenig, warum ganz ohne Leerzeilen nur die Ext.define-Zeile abgeschnitten wird und nicht auch die extend: bzw. override:-Zeile.

Ich nehme das jetzt erstmal so hin. Funktioniert ja dann soweit. Über eine belastbare Erklärung wäre ich trotzdem noch froh :slight_smile:

6

Ich hab das mal vor 3 Monaten komplett gedebuggt. Die Templates werden included wie folgt

 

// {include file="foooooooooooooo"}

Smarty fügt im nächsten Schritt den Inhalt der Datei dort ein

// Ext.define('Foooooooooooooooo', {

Im ScriptRenderer gibt es ein Regex der Kommentare aus dem Output entfernt. Weil der Code vorne ein // hat wir er gelöscht

1 „Gefällt mir“