Administration: Eigenes Modul, mit eigenem Component über Routes/Navigation verknüpfen

Hallo Zusammen,

ich versuche anhand von diesen Tutorials:
Add custom module
Add custom component
Add menu entry und
Add custom route

ein Modul in der Administration zu erstellen, das zu einer statischen „Hello World“ Page führt. Ich kriege es hin, dass ein Menüeintrag an der entsprechenden Stelle im Admin-Bereich angezeigt wird, aber beim Anklicken werde ich auf eine komplett leere Seite geführt. Kann mir bitte jemand sagen, was ich falsch mache? Sourcen:
image

main.js:
image

index.js des „component“
image

index.js des „module“:
image

Vielen Dank im Voraus,

Nikolaj

1 „Gefällt mir“

Hallo Zusammen,

ich habe leider noch keine Antwort auf meine Frage erhalten.
Bei SW5 gab es reichlich Beispielplugins. Ein Beispielplugin für die obere Frage nehme ich auch sehr gerne.

Kann jemand helfen?

Danke und Gruß,

Nikolaj

Nach unzähligem Herumwursteln an „Routes“ „Navigation“ und „import“ habe ich meine „Hello World“-Ausgabe bekommen.

Hier die Version der Modul-index.js, mit der es letztendlich funktioniert hat:
image

Es ist jedoch wahrscheinlich nicht die Lösung, wie es von Shopware gedacht wurde, denn in der Doku (Add custom component) wird eine Lösung mit „Page“ angedeutet und nicht mit einer losen Komponente, wie hier beschrieben. Die Page-Variante habe ich aber nicht hinbekommen. Wenn jemand noch diese zeigen könnte wäre ich dankbar.

Grüße, Nikolaj

Was meinst du mit Page-Variante?

Hallo Alex,

damit meine ich Folgendes.
In Add custom component gibt es diesen Abschnitt:

Also soll die neue Komponente als eine „Page“ oder als allgemeine „Component“ eingesetzt werden. Die Doku geht auf den zweiten Fall ein, nicht aber auf den Ersten.

Grüße,
Nikolaj

Der Unterschied ist ja nur die empfohlene Ordnerstruktur und die Page(s).
Wenn es eine einfache Komponente ist, die nur in anderen Modulen eingesetzt wird, dann hat sie keine Pages. Wenn es aber eine eigene Adminpage gibt, dann kommt halt noch Ordnerstruktur/Dateien und die Routes hinzu:

Die Pages sind ja dann auch nur wieder jeweils eine Component.
Also im Prinzip ist der Aufbau so:

/module
  /my-module
      index.js
      /page
          /my-module-page-create
              index.js
              my-module-page-create.html.twig
          /my-module-page-detail
              index.js
              my-module-page-detail.html.twig
          /my-module-page-index
              index.js
              my-module-page-index.html.twig

In der Dokumentation waren bis vor kurzem eigentlich auch immer einige komplette Fallbeispiele. Keine Ahnung warum die rausgenommen wurden. Schau dir am besten die Shopware Module an. Die können aber auch gerne mal erschlagend sein, weil die teils recht umfangreich sind. Was einfaches für den Anfang ist z.B. der Login:

1 „Gefällt mir“

Hallo Alex,

vielen Dank für deine ausführliche Antwort! Ich habe sie leider verpasst, deshalb kommt die Antwort erst jetzt.

Ja, so wie in deiner Dartstellung, war auch mein erster Ansatz. Ich konnte jedoch nie die „Index“-Page zur Anzeige bringen. Meine Vermutung damals war, weil ich meine Page nicht richtig in der main.js importiert habe. Wie genau macht man das? Es muss ja das Modul importiert werden, also so:

import "./module/my-module";

Man könnte meinen, dadurch dass die Pages in dem Modul-Ordner enthalten sind, muss man sie nicht importieren, aber da meine Index-Page nicht erscheint, denke ich müssen die Pages eben doch importiert werden. Oder?

Danke und Gruß,
Nikolaj

Hallo Alex,

ich habe es jetzt nochmal ausprobiert und es scheint zu klappen. Gefehlt hat tatsächlich der Import in der main.js

Also angewendet auf deine Dartstellung oben, sieht meine main.js so aus:

import "./module/my-module";
import "./module/my-module/page/my-module-page-index";

Mag sein, dass es logisch ist und ich weiß nicht genau was bei mir damals nicht gestimmt hat, aber das hätte man ruhig in der Doku erwähnen können.
Mein aktuelles Verständnis bezüglich der Importe in der main.js ist, dass alle Verzeichnisse, die eine index.js beinhalten, müssen in der main.js als import auftauchen. Ich kann mich aber irren.

Danke und Gruß,
Nikolaj

Ja, jedes js-Modul muss auch immer importiert werden.

In der main.js importierst du das Haupt-Modul

import './module/my-module/index.js'

und dort dann die pages oder cms-Module

// eigene pages
import './page/create';
import './page/detail';
import './page/list';

// CMS-Elemente
import './component';
import './config';
import './preview';

Die Ordnerstruktur ist dabei dir überlassen, Hauptsache die Module werden importiert. Theoretisch kannst du aber auch alles in der main.js importieren.

1 „Gefällt mir“

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.