Shopware 6 Frontend Plugin GrundgerĂŒst erstellen

Shopware 6 Frontend Plugin GrundgerĂŒst erstellen

Nicole Wolf 23. September 2019 4

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.

PS: Kennst du schon unsere Shopware 6 Demo?

 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! Wir stehen dir als zertifizierte Shopware 6 Agentur aber auch gerne jederzeit zur VerfĂŒgung!

Hast du schon unseren Vergleich zu Magento gesehen? Wir zeigen dir die unterschiede zwischen Shopware 6 und Magento: Shopware 6 vs Magento!

4 Kommentare

  • Euer Blog ist super, hier ist es immer leicht und verstĂ€ndlich erklĂ€rt. Gibt es schon einen Blog, in dem erklĂ€rt wird wie SCSS Anpassungen Update sicher abgeleitet werden.
    Gibt es bei Shopware 6 auch ein Verzeichnis wie damals das "Bare" bei Shopware 5.
  • ...Ordner gelöscht und css im Theme neu aufgebaut...
    ich werd noch ein bischen andere plugins anschauen, das diese auch im Backend erscheinen. Das doch erstmal eine Umstellung von shopware 5 auf 6.
    Ihr könnt den Komentar gerne löschen - mein Lob an eure BeitrÀge bleibt ;-)
  • Hey Frank,

    vielen Dank fĂŒr die netten Worte! Ja Shopware 6 ist eine große Umstellung, aber eine die sich lohnt, finde ich :)

    Gruß
    Alexander
  • Ich mag euren Blog und schĂ€tze eure BeitrĂ€ge rund um shopware sehr.

    Nachdem ein Umstieg auf shopware6 geplant ist hab ich das mit den Plugins ausprobiert. Mit shopware 6.0.0-ea2
    Mein jetziger Erfolg war, das im Frontend das ganze css fehlt. Im backend das plugin nicht auftaucht...
    Gut möglich, das ich einen Tippfehler hatte - aber wie mache ich das ganze dann RĂŒckgĂ€ngig -

Was denkst du?

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhÀltst unser Shopware 6 Whitepaper kostenlos!
Trag dich fĂŒr unseren Newsletter an, im Anschluss erhĂ€ltst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere DatenschutzerklÀrung.

Beliebt

Was du ĂŒber die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Logo GrĂ¶ĂŸe mit Less fĂŒr Shopware 5 anpassen
Shopware Theme: Eigenes Listing Layout erstellen
Die grĂ¶ĂŸten Fehler bei der Entwicklung eines Shopware 5 Themes
Staging Umgebung – Was ist das und warum brauchst du eine?
Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten
Plugin Themes ĂŒberschreiben und anpassen
Individuelle 404 Fehlerseite mit Shopware Einkaufswelten erstellen
4 GrĂŒnde warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst

Bessere plÀtze bei google?

Sicher Dir unser neues Shopware SEO Whitepaper kostenlos!
Trag dich fĂŒr unseren Newsletter an, im Anschluss erhĂ€ltst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere DatenschutzerklÀrung.

Entdecke unsere ebooks

Über 8mylez

✓ 18 Mitarbeiter

✓ Shopware Solution Partner

✓ 22.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

© 2020 by 8mylez GmbH //  Impressum + Datenschutz