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

**URL:** <https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370>\
**Category:** Programmierung\
**Created:** [25. September 2023 um 16:45 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370 "2023-09-25T16:45:10Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![NikolajRuppert](https://avatars.discourse-cdn.com/v4/letter/n/7ab992/32.png) [@NikolajRuppert](https://forum.shopware.com/u/NikolajRuppert)\
**Post date:** [25. September 2023 um 16:45 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/1 "2023-09-25T16:45:10Z")

</div>

Hallo Zusammen,

ich versuche anhand von diesen Tutorials:  
[Add custom module](https://developer.shopware.com/docs/guides/plugins/plugins/administration/add-custom-module.html)  
[Add custom component](https://developer.shopware.com/docs/guides/plugins/plugins/administration/add-custom-component.html)  
[Add menu entry](https://developer.shopware.com/docs/guides/plugins/plugins/administration/add-menu-entry.html) und  
[Add custom route](https://developer.shopware.com/docs/guides/plugins/plugins/administration/add-custom-route.html)

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](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/f/2/f2f8bd5719e68e3ff61fbdfc741fa6c3d955a938.png)

main.js:  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/8/e/8e01a45ca5c7a3b89c570a6449e3412eabbbee2d.png)

index.js des „component“  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/0/6/06191c7a775960a3719221138343c593f70e8b07.png)

index.js des „module“:  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/9/1/91638039ffc03c999e282a8012f26396b82a848e.png)

Vielen Dank im Voraus,

Nikolaj

---

<div class="post-metadata">

**Author:** ![NikolajRuppert](https://avatars.discourse-cdn.com/v4/letter/n/7ab992/32.png) [@NikolajRuppert](https://forum.shopware.com/u/NikolajRuppert)\
**Post date:** [27. September 2023 um 09:04 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/2 "2023-09-27T09:04:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NikolajRuppert](https://avatars.discourse-cdn.com/v4/letter/n/7ab992/32.png) [@NikolajRuppert](https://forum.shopware.com/u/NikolajRuppert)\
**Post date:** [28. September 2023 um 09:52 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/3 "2023-09-28T09:52:14Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/6/c/6c1276ebf53b08178d5685ec27566600bc1babda.png)

Es ist jedoch wahrscheinlich nicht die Lösung, wie es von Shopware gedacht wurde, denn in der Doku ([Add custom component](https://developer.shopware.com/docs/guides/plugins/plugins/administration/add-custom-component.html)) 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

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [29. September 2023 um 03:33 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/4 "2023-09-29T03:33:41Z")

</div>

Was meinst du mit Page-Variante?

---

<div class="post-metadata">

**Author:** ![NikolajRuppert](https://avatars.discourse-cdn.com/v4/letter/n/7ab992/32.png) [@NikolajRuppert](https://forum.shopware.com/u/NikolajRuppert)\
**Post date:** [29. September 2023 um 08:25 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/5 "2023-09-29T08:25:59Z")

</div>

Hallo Alex,

damit meine ich Folgendes.  
In [Add custom component](https://developer.shopware.com/docs/guides/plugins/plugins/administration/add-custom-component.html#overview) gibt es diesen Abschnitt:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/6/a/6afb1c740e0c1ea8003b6868a236ddd595ebc687.png)

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

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [29. September 2023 um 09:14 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/6 "2023-09-29T09:14:57Z")

</div>

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:

> **[Add custom route | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/plugins/administration/add-custom-route.html)**
>
> Documentation for Shopware developers

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

```plaintext
/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:

> <https://github.com/shopware/platform/tree/trunk/src/Administration/Resources/app/administration/src/module/sw-login>
>
> //github.com/shopware/platform/tree/trunk/src/Administration/Resources/app/administration/src/module/sw-login

---

<div class="post-metadata">

**Author:** ![NikolajRuppert](https://avatars.discourse-cdn.com/v4/letter/n/7ab992/32.png) [@NikolajRuppert](https://forum.shopware.com/u/NikolajRuppert)\
**Post date:** [5. Oktober 2023 um 18:33 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/7 "2023-10-05T18:33:26Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![NikolajRuppert](https://avatars.discourse-cdn.com/v4/letter/n/7ab992/32.png) [@NikolajRuppert](https://forum.shopware.com/u/NikolajRuppert)\
**Post date:** [5. Oktober 2023 um 19:06 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/8 "2023-10-05T19:06:52Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [9. Oktober 2023 um 10:22 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/9 "2023-10-09T10:22:51Z")

</div>

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

In der `main.js` importierst du das Haupt-Modul

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

```

und dort dann die pages oder cms-Module

```js
// 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.

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [8. November 2023 um 10:23 UTC](https://forum.shopware.com/t/administration-eigenes-modul-mit-eigenem-component-ueber-routes-navigation-verknuepfen/101370/10 "2023-11-08T10:23:31Z")

</div>

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