Shopware 6 Frontend Plugin Grundgerüst erstellen

Shopware 6 Frontend Plugin Grundgerüst erstellen

Nicole Wolf 23. September 2019 0

Shopware 6 ist endlich raus! 🎉 Shopware 6 ist Lokal installiert nur wo fange ich am besten an? Richtig, mit einem kleinen Beispiel Plugin. In diesem Blogpost zeige ich euch wie ihr das Grundgerüst für euer Shopware 6 Plugin aufbaut. Nach diesem Tutorial könnt ihr euch dann im Frontend austoben.

 Das Shopware 6 Grundgerüst

Zuerst einmal schauen wir uns an was wir alles brauchen. Da wäre einmal der Ordner mit dem Plugin Namen. Dann brauchen wir noch eine composer.json Datei, und die Basis Datei an sich die sich in dem src Ordner befindet. Zu dem Resources Ordner kommen wir später.


Wichtig ist erst einmal die composer.json, in dieser übergeben wir die Plugin meta Informationen des Plugins. Wir kennen die composer.json auch als plugin.xml aus Shopware 5. Dort befindet sich dann die Plugin Beschreibung, der Name, ob das Plugin mit Shopware 6 kompatibel ist und so weiter.


Nachdem wir diese Datei mit unseren Inhalten gefüllt haben benötigen wir noch die Base des Plugins. Diese befindet sich im src Ordner (EmzExamplePlugin → src → ExamplePlugin.php)


Jedes Plugin muss mit einer Basisklasse ausgestattet sein, welche für Shopware als Einstieg dient. Unabhängig davon welchen Ordnernamen ihr benutzt, ist es wichtig das die Basisklasse genau so heißt. Diese sollte sich dann individuell aus eurem Entwicklerpräfix und eurem Plugin Namen zusammensetzen. (Siehe Beispiel)

TIPP: Hast du schon unser Shopware 6 eBook gesehen? 

So jetzt haben wir alles für ein funktionierendes Plugin für Shopware 6. Einfach, nicht wahr? 😋 Das war aber noch nicht alles. Wir können jetzt ganz einfach Frontend Anpassungen im Plugin machen. Dafür kommt jetzt der Resources Ordner ins Spiel. Ich habe hier testweise auf der Detail Seite im Shop unter dem Produktnamen ein "Test" eingefügt.


In dem Resources Ordner befindet sich der views Ordner. In diesem kommen dann alle Twig Template Dateien rein.

Template Anpassungen in Twig

Ganz grob erklärt, wie man es auch schon aus Showpare 5 kennt. Wir müssen die Template Datei extenden. Und die Blöcke mit {{ parent() }} überschreiben.


Wenn alles soweit passt könnt ihr eure Frontend Plugin jetzt im Plugin Manager installieren und ansehen 😌 Am Ende solltet ihr ein Grundgerüst haben womit ihr schon Frontend Anpassungen machen könnt.

Styling und Javascript hinzufügen

Wenn ihr wissen wollt wie ihr SCSS Anpassungen machen könnt und Javascript Dateien einbinden könnt, schaut bei meinem nächsten Blogpost vorbei. 😊 Falls ihr Fragen habt, beantworte ich diese gerne unter diesem Post!

Noch keine Kommentare vorhanden.

Was denkst du?

SEO für Shopware!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen für gute Rankings in den Suchmaschinen.
Zum Store

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Freitextfelder im Shopware Frontend ausgeben
Wie du schnell und einfach Google Shopping für Shopware einrichtest
Staging Umgebung – Was ist das und warum brauchst du eine?
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Logo Größe mit Less für Shopware 5 anpassen
Shopware Kategorieseite - Eigenes Template Layout erstellen
Plugin Themes überschreiben und anpassen
© 2017 by 8mylez. Powered by Goltfisch GmbH.