Plugin Theme Struktur überschreiben und Plugins individuell anpassen

Plugin Theme Struktur überschreiben und Plugins individuell anpassen

Alexander Wolf 10. Mai 2016 21

Wie du ein Theme anpassen kannst, weißt du spätestens nach unserer Video Reihe: .

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 Erweiterte Menü von Shopware an.

Die Änderungen können wir auch beim normalen Theme per LESS und Smarty machen.

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!

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

Shopware 5 Erweitertes Menü

Das Ergebnis

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 die Dateien des Plugins im Ordner:

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

Uns interessiert wie der Views aufgebaut ist. In diesem Fall gibt es einen _public, advanced_menu Ordner 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}

Zuerst erben wir das von der Eltern Datei, damit das Menü vollständig vorhanden ist.

Danach entfernen wir die beiden Blöcke, die für die Überschrift zuständig

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ü

Jetzt kannst du alle Plugins anpassen! Du musst nur wissen welche Smarty Blocks in der Template Datei verwendet werden.

Viel Spaß beim "Plugin Umstyling".

Update

Wenn du die Grafiken die du im Backend für die Kategorie hinterlegst auch im Menü anzeigen möchtest dann kannst du dir folgenden Code anschauen:

Kurze Erklärung:

Dieser Code gehört in die Datei index.tpl die du etwas weiter oben schon angelegt hast.

Im Prinzip haben wir da alles aus dem AdvancedMenu Plugin kopiert und in Zeile 29 unser Bild hinzugefügt.

In Zeile 76 müssen wir noch den Aufruf der Funktion anpassen und emz_categories_top nutzen. Die Funktion selbst findet ihr in Zeile 8. Da muss der Name entsprechend passen.

Ist nur eine kurze Erklärung, wenn das spannend ist, kann ich einen eigenen Blog Beitrag darüber schreiben, schreibt es einfach in die Kommentare.

Hol dir unseren kostenlosen 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?

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
Shopware 5.3 - Wichtige Neuerungen auf einen Blick
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.