Plugin Theme anpassen

Plugin Theme anpassen

Alexander Wolf 10. Mai 2016 21

Plugin anpassen - Du bist mit dein Shop zufrieden, aber für die Vollständigkeit installierst du noch eben ein neues Plugin. Huch wie sieht das denn aus? - Das Plugin passt nicht zur Theme. Kein Problem, Plugin Themes kann man ganz einfach bearbeiten. Wir zeigen wie!

(Lesedauer ~ 5 Minuten)

Wie man eine Theme in Shopware anpasst ist ja bekanntlich kinderleicht. Aber die Frage ist: 

Funktioniert das auch mit Plugins?

Ja!

Wie funktioniert das?

Im Prinzip funktioniert es genauso wie auch beim normalen Theme. Die Plugins werden in unserem Theme überschrieben, d.h. wenn wir das Theme wechseln sind auch unsere Anpassungen weg. Aber in der Regel passiert das nicht so oft.

Es macht durchaus Sinn die Plugin im Theme zu überschreiben, da es immer im Zusammenhang mit unserem Theme steht und sowieso bei einem neuen Theme anders angepasst werden muss.

Damit das Ganze etwas klarer wird, passen wir das Plugin Erweiterte Menü von Shopware an. Falls das Erweiterte Menü bei euch nicht aktiviert ist, könnt ihr das ganz einfach im Plugin Manager machen. Installieren, Aktivieren, Cache leeren und fertig!

Es werden nur wenige Schritte benötigt um an unser Ziel zu kommen:

  1. Struktur anpassen mit Smarty
  2. Styling anpassen mit LESS


So schaut das Erweiterte Menü standardmäßig aus:

Shopware 5 Erweitertes Menü

Und so soll das Menü nach den Anpassungen aussehen:

Shopware 5 Erweitertes Menü Ergebnis

Was hat sich verändert?

Das Menü, welches erst angezeigt wird, sobald die Maus über einen Menüpunkt fährt, hat eine sozusagen eine Überschrift. In unserem Beispiel entfernen wir diese Überschrift, weil du durch einen Klick auf den Menüpunkt zu der Kategorie gelangst.

Außerdem ist der Hintergrund schwarz (du kannst natürlich jede Farbe wählen).

Beginnen wir mit Smarty!

Anpassen mit Smarty

Um Smarty Anpassungen machen zu können, musst du dir erst anschauen wie die Struktur des Plugins aussieht. d.h. in welcher Datei liegt welcher Code und in welchem Ordner liegt welche Datei?

Das Plugin Advanced Menu ist ein Standard Plugin von Shopware und immer mit dabei. Wir finden deshalb die Dateien des Plugins im Ordner:

/engine/Shopware/Plugins/Default/Frontend/AdvancedMenu

Uns interessiert wie der Ordner Views aufgebaut ist. In diesem Fall gibt es einen _public, advanced_menu und einen index Ordner. Wichtig: Diese Ordner liegen alle in dem Ordner frontend.

Im _public Ordner befinden sich die JavaScript und LESS Dateien. Im advanced_menu Ordner die Smarty Datei für das Menü selbst und im index Ordner der Smarty Code um das Plugin in unser Theme einzubauen.

Um also das Menü anzupassen müssen wir die Smarty Template Datei index.tpl im Ordner advanced_menu erweitern.

Dazu musst du die Ordnerstruktur des Views Ordners in deinem Theme abbilden.

Du legst einfach in dem Ordner

/themes/Frontend/DEINTHEME/frontend

den Ordner advanced_menu mit der index.tpl Datei an.

Jetzt haben wir die gleiche Ordnerstruktur und können mit der index.tpl arbeiten.

Folgenden Code packen wir in die index.tpl:

{extends file="parent:frontend/advanced_menu/index.tpl"}

{block name="frontend_plugins_advanced_menu_button_category"}{/block}

{block name="frontend_plugins_advanced_menu_button_close"}{/block}

  1. Zuerst erben wir das von der Eltern Datei, damit das Menü vollständig vorhanden ist.
  2. Danach entfernen wir die beiden Blöcke, die für die Überschrift zuständig sind.
  3. Speichern, Cache leeren und Theme kompilieren nicht vergessen!

So sieht das Ganze jetzt aus:

Menü Anpassungen Zwischenstand

Noch irgendwie nicht ganz so richtig. Den Rest können wir mit LESS anpassen und kommen dann zu dem vorgestellten Ergebnis.

Anpassen mit LESS

Bei LESS ist das Ganze etwas einfacher. Die Ordnerstruktur ist "egal". Es muss nur für dich Sinn machen. Aber du solltest dich trotzdem an ein paar Regeln halten.

Im Prinzip legen wir einfach eine neue LESS Datei in unserem _public/less Ordner an und verknüpfen diese in der all.less.

Solltest du schon kennen, falls nicht, schau dir vorher das an: Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstellst oder Video: Wie du dein erstes Shopware 5 Theme anlegst und mit LESS anpasst – Teil 2

Pro-Tipp: Leg einen Ordner _plugins an, damit du selbst immer weißt, welcher Code zu einem Plugin gehört.

Du legst in dem Ordner

/themes/Frontend/DEINTHEME/frontend/_public/src/less

den Ordner _plugins mit der Datei advanced-menu.less an.

Der Name der Datei ist wieder nur für dich wichtig, sodass du weißt um welches Plugin es sich handelt.

In unsere all.less kommt folgender Inhalt:

@import "_plugins/advanced-menu";

Damit das Menü wie vorhin vorgestellt, packen wir folgenden Code in die advanced-menu.less:

.advanced-menu{
  border-top: 1px solid @brand-primary;
  background-color: black;
  color: white;

  .button-container{
    display: none;
  }

  .menu--list-item-link {
    color: white;
  }

  .item--level-1{
    .menu--list-item-link{
      color: white;
    }
  }
}

Speicher, Cache leeren und Theme kompilieren!

Wenn du alles richtig gemacht hast, sieht dein Menü jetzt so aus:

Fertiges Menü


Fazit

Jetzt kannst du alle Plugins anpassen dir den Weg kreuzen! Du musst nur wissen, welche Smarty Blöcke verwendet werden. Danach kann auch schon direkt das Styling loslegen. Damit kann dein Shop sich von deinen Konkurrenten abheben!

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

21 Kommentare

  • Guter Artikel!
    Ich stoße immer wieder auf Euch bei der Suche nach Shopware Anpassungen. Es gibt echt wenig gute Dokumentation und Best-Pratices, da könnte Shopware echt mal mehr tun!
  • Hey Andy,

    danke für die netten Worte! Wir unterstützen Shopware da gerne ;-)

    LG
    Marc
  • Hallo Alex,

    ich bin Neu bei Shopware 5 dabei.

    Meine dringende Frage ist...
    Wo finde ich auf meinem Rechner die Shopware Ordner in denen ich mein Theme verändern kann und welches eigentlich über FTP zu finden und zu steuern wäre?

    Ich möchte in eine tiefere Bearbeitung und Anpassung gehen als die normalen Konfigurationen übers Backend... nur fehlen mir alle Shopware Ordner auf dem PC.

    Viele Grüße
  • Hey Nadine,

    das kommt in der Regel darauf an wo du die Dateien lokal (auf deinem PC) abgelegt hast.

    Wenn dein Shop schon online ist, kannst du mit einem FTP Client (z.B. FileZilla) auf die Dateien auf deinem Server zugreifen und dort bearbeiten.

    Ansonsten musst du den Shop lokal installieren, bevor du etwas anpassen bzw. "sehen" kannst. Dazu kannst du den MAMP Blog Post durchlesen: https://8mylez.com/blog/shopware-5-lokal-mamp-pro/

    Gruß
    Alexander
  • Hallo Alexander,

    danke für die gute Erklärung.

    Womit ich mich schwer tue, ist wenn Plugins im Ordner
    /engine/Shopware/Plugins/Community/Frontend/PLUGINNAME/Views/frontend/index/templatedatei.tpl
    statt in Plugin/Default stehen.
    Ich möchte einen Teil eines offenen Plugins überschreiben/austauschen, aber dies nicht bei jedem Plugin-Update neu durchführen, also dies nicht direkt im Plugin, sondern im /themes/-Ordner.

    Nehmen wir an, die Plugin-Datei beginnt mit
    {extends file="parent:frontend/index/index.tpl"}

    Dazu meine Fragen:
    In welchem Pfad muss die .tpl-Datei stehen?
    /themes/frontend/THEMENAME/frontend/plugins/PLUGINNAME/index/index.tpl
    /themes/frontend/THEMENAME/frontend/plugins/index/index.tpl
    /themes/frontend/THEMENAME/frontend/index/index.tpl
    oder ein anderer Pfad?

    Wie muss die Erweiterungs-Zeile lauten?
    {extends file="parent:frontend/plugins/PLUGINNAME/index/index.tpl"}
    {extends file="parent:frontend/plugins/index/index.tpl"}
    {extends file="parent:frontend/index/index.tpl"}
    oder anders?

    Weitere Dateien, die im Plugin nur includet werden muss ich beim überschreiben dann ja auch includen (nur den file-Namen lassen oder zu includende Datei auch in den /themes/-Pfad kopieren ) oder durch andere im /themes/-Pfad ersetzen?

    Oder gibt es da einfachere Möglichkeiten einen Block in der Datei templatedatei.tpl welche in index.tpl includet wird (keine extends-Zeile), direkt zu ersetzen?

    Mit bestem Dank schon mal
  • Hey Hartmut,

    das Plugin in deinem Theme zu überschreiben ist in jedem Fall die richtige Entscheidung!

    Im Prinzip musst du die selbe Ordnerstruktur ab dem frontend Ordner des Plugins in deinem Theme nachbauen. Im Beitrag oben siehst du, dass das AdvancedMenu Plugin in dem Views/frontend Ordner noch einen advanced_menu Ordner hat. Daher muss dieser auch im Theme angelegt werden.

    Wenn dein Plugin, welches du überschreiben willst, keinen eigenen Ordner hat sondern aus dem frontend Ordner direkt in index oder ähnlich geht, dann musst du auch nur diesen Pfad nachbauen. Wichtig ist hierbei, dass die Struktur exakt die selbe ist (ab dem frontend Ordner).

    Dasselbe gilt für den extends Code. Du gibst quasi an, welche Datei du überschreiben willst. Dabei muss entsprechend der Pfad angegeben werden, wie er auch tatsächlich existiert.

    Wenn du extends benutzt, werden auch die weiteren includierten Dateien bei dir includiert, ausser du überschreibst den Blog selbst. Ansonsten musst du diese natürlich nochmal selbst includieren.

    Möglicherweise ist unser kleines Support Paket für dich interessant: https://store.8mylez.com/service/theme-check/21/support-ticket?c=11 Dann könnten wir uns das genauer anschauen und dir eine konkrete Lösung geben.

    Gruß
    Alexander
  • Zur Info an den Author: Bei mir kam gerade hier der Fehler: "Fehler beim Aufbau einer Datenbankverbindung" beim Aufruf dieser Seite.
  • Hallo b3wii,

    vielen Dank für den Hinweis.

    Wir sind dabei den Fehler zu finden und zu beheben. Es handelt sich dabei um Fehler beim Server selbst.

    Gruß
    Alexander
  • Wie kann ich plugin-templates überschreiben, wenn unter Views kein eigenes Verzeichnis für das plugin existiert, sondern alles direkt unter index abgelegt ist ?
    (wie es bspw. bei Deinem Conversion Header der Fall ist)
  • Hallo Mirko,

    in dem Fall überschreibe ich die index.tpl und erweitere den Block frontend_index_top_bar_container.

    Wenn du das überschreiben willst, musst du nur die index.tpl im index Ordner von deinem Theme überschreiben und den Block entsprechend ersetzen.

    Bei Themes gibt es noch eine Einstellung wann die Plugin Themes geladen werden. Entweder vor und nach dem Theme selbst. https://developers.shopware.com/designers-guide/smarty/#inheritance-and-plugin-templates.

    Gruß
    Alexander
  • Hallo Alex,
    prima....vielen Dank!!
    Habe das soweit nun im Testshop umgesetzt. Habe noch folgende Frage.

    1) Ist es möglich die Bilder vor dem Katergorie text zu setzten? Zurzeit werden diese über den text angezeigt.
    2) Wird hier ein bestimmtes Bild Format bevorzugt? Also .jpg oder .png oder werden alle Formate unterstützt.

    Danke für Deine zeit :-)

    Gruß
    Josef
  • Hallo Josef,

    1) das Bild wird in Zeile 29 gesetzt, d.h. du kannst es auch unter dem Link positionieren: https://gist.github.com/8mylez/fedbcb3842b56043b6d0d668d3782293#file-index-tpl-L29

    2) Es werde alle zulässigen Formate unterstützt die du im Media Manager einbinden kannst im Backend. Generell empfehle ich da auf die Größe des Bildes zu achten, .jpg sind meistens kleiner, wenn es keinen transparenter Hintergrund sein muss.

    Gruß
    Alexander
  • Hallo Josef,

    mit unseren Blogbeiträgen möchten wir euch helfen. Aber nicht eure Arbeit übernehmen. Daher würde ich dich bitten es selbst zu versuchen!

    Dazu ist der Blog schließlich da. Wir wollen gemeinsam an euren Shopware Shops arbeiten.

    Gruß
    Alexander
  • Hallo Josef,

    das sollte kein Problem sein.

    Wie stehen die Icons zur Verfügung? Sind es http://fontawesome.io/icons/? Oder Shopware Icons?

    Oder generell nur Bilder?

    Gruß
    Alexander

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
Logo Größe anpassen mit Less für Shopware 5
Staging Umgebung – Was ist das und warum brauchst du eine?
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Shopware Logo aus dem Footer entfernen
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.