Plugin Theme Struktur überschreiben und Plugins individuell anpassen

Plugin Theme Struktur überschreiben und Plugins individuell anpassen

Alexander Wolf 10. Mai 2016 15

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

15 Kommentare

Was denkst du?

Das Shopware eBook für Einsteiger!

Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.Zum 8mylez Store

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 Shop erstellst und verwaltest

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstellst
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie du deine Shop Geschwindigkeit optimierst
Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten
Social Media Icon mit Link im Footer
Shopware Logo aus dem Footer entfernen
Die Ups! Ein Fehler ist aufgetreten! Fehlermeldung

8mylez gehört zu

© 2016-2017