Megamenü (Shopware 6)

Einleitung

Features

Installation / Update

Systemvoraussetzungen

Shopware 6.3 und alle damit einhergehenden Systemvoraussetzungen müssen erfüllt sein.

Weitere Voraussetzungen

Es werden keine Accounts zu Drittanbietern oder API-Zugänge benötigt.

Plugin-Installation

Plugin-Update

Um das Plugin zu installieren, sind folgende Schritte notwendig:

Manueller Upload

  1. Download des Plugins

  2. Im Admin Dashboard unter Einstellungen System Plugins auf den Button Upload Plugin klicken

  3. Die Datei markieren und hochladen

Aktivierung

Ist das Plugin hochgeladen muss das Plugin noch installiert & aktiviert werden. Bitte beachten Sie, dass nur installierte Plugins aktiviert werden können. Um das Plugin zu installieren, wählen Sie in der rechten Spalte (Button mit 3 grauen Punkten) den Punkt installieren aus. Nach erfolgreicher Installation können Sie das Plugin aktivieren und dann mit der weiteren Konfiguration fortfahren.

Konfiguration

Shop

Styling

Das Plugin bietet bei verschiedenen Elementen wie dem Menü oder Menü-Einträgen an, diese mit einem eigenen Styling zu versehen. Die Styling-Komponente ist bei allen Elementen gleich aufgebaut und bietet die folgenden Einstellungen:

Typographie

  • Schriftfarbe (Farbwähler): Setzt die Schriftfarbe des Elements.

  • Textausrichtung (Auswahl): Setzt die Textausrichtung des Elementes. Zur Auswahl stehen:

    • links

    • zentriert

    • rechts

    • Blocksatz

  • Schriftart (Texteingabe): Name der Schriftart(en) die verwendet werden soll. Hinweis: Einbinden von Google Fonts

  • Schriftstärke (Auswahl): Setzt die Schriftstärke des Elements.

    • Standard: Keine Änderung vornehmen. Standard des Themes wird verwendet.

    • Dünn

    • Normal

    • Fett

  • Schriftstil (Auswahl): Setzt den Schriftstil des Elements.

    • Standard: Keine Änderung vornehmen. Standard des Themes wird verwendet.

    • Kursiv: Kursive Schrift, d.h. italic Variante der Schriftart.

    • Schräg: Vom Browser programmatisch schräg gestellte Schrift

  • Schriftgröße (Texteingabe): Setzt die Größe der Schrift. Beispiele: 16px oder 1rem

  • Texttransformation (Auswahl): Setzt die Texttransformation des Elements.

    • Standard: Keine Änderung vornehmen. Standard des Themes wird verwendet.

    • Groß Geschrieben: Erzwingt die Großschreibung des Anfangsbuchstaben jedes Wortes. Beispiel: Ein Text Bei Dem Jeder Anfangsbuchstabe Großgeschrieben Wird.

    • Großbuchstaben: Der Text wird in Großbuchstaben angezeigt. Beispiel: EIN TEXT NUR MIT GROẞBUCHSTABEN.

    • Kleinbuchstaben: Der Text wird in Kleinbuchstaben angezeigt. Beispiel: ein text nur mit kleinbuchstaben.

  • Zeichenabstand (Texteingabe): Setzt den Zeichenabstand der Schrift. Beispiel: 4px oder 0.25rem

Hintergrund

  • Hintergrundfarbe (Farbwähler): Setzt die Hintergrundfarbe des Elements.

  • Hintergrundbild (Medienauswahl): Setzt ein Hintergrundbild für das Element.

  • Hintergrundbildgröße (Auswahl):

    • Cover: behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.

    • Contain: behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.

    • Automatisch:  skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.

  • Hintergrundbild Wiederholung (Auswahl):

    • wiederholen: Das Hintergrundbild wird horizontal und vertikal wiederholt.

    • horizontal wiederholen: Das Hintergrundbild wird nur horizontal wiederholt.

    • vertikal wiederholen: Das Hintergrundbild wird nur vertikal wiederholt.

    • keine Wiederholung

    • vererbt: Der Wert des Elternelements wird geerbt.

  • Hintergrundbildposition (Texteingabe): Bestimmt die Position des Hintergrundbildes. Beispiel: 50% 50% für ein  horizontal und vertikal zentriertes Bild.

Box

  • Margin (Texteingabe): Setzt den Außenabstand aller vier Seiten des Elements.

  • Padding (Texteingabe): Setzt den Innenabstand aller vier Seiten des Elements. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen.

  • Rahmenbreite (Texteingabe): Setzt die Breite des Rahmens. Beispiel: 2px

  • Rahmenstil (Auswahl):

    • keinen

    • gepunktet: eine Reihe von runden Punkten

    • gestrichelt: eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten

    • durchgehend: eine einfache, gerade, ausgefüllte Linie 

    • doppelt: zwei gerade, ausgefüllte Linien

    • Rille: ein Rahmen, der zu einem eingeritzten Effekt führt. Gegenteil von Kante

    • Kante:  Rahmen mit einem 3D-Effekt, so als ob es aus der Seite herauskommt. Gegenteil von Rille

    • innerhalb: Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Gegenteil von außerhalb

    • außerhalb: Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Gegenteil von innerhalb

    • vererbt: Der Wert des Elternelements wird geerbt.

  • Rahmenfarbe (Farbwähler): Setzt die Rahmenfarbe des Elements.

  • Rahmenradius (Texteingabe): Setzt den Eckradius des Rahmens um abgerundete Ecken darzustellen. Beispiel: 4px

  • Breite (Texteingabe): Die Breite des Elements. Beispiel: 125px

  • Höhe (Texteingabe): Die Höhe des Elements. Beispiel: 60px

Hover/Aktiv

  • Schriftfarbe (Hover) (Farbwähler)

  • Hintergrundfarbe (Farbwähler)

  • Rahmenbreite (Texteingabe)

  • Rahmenstil (Auswahl):

    • keinen

    • gepunktet

    • gestrichelt

    • durchgehend

    • doppelt

    • Rille

    • Kante

    • innerhalb

    • außerhalb

    • vererbt

  • Rahmenfarbe (Farbwähler):

Sonstiges

  • Klasse (Texteingabe): Setzt eigene CSS Klassen für das Element. Beispiel: klasse-1 klasse-2

  • Eigenes CSS (Texteingabe): Eigene CSS-Eigenschaften (z.B. display oder posittion) für dieses Element.

Bei eigenes CSS dürfen nur CSS-Eigenschaften und Werte hinzugefügt werden und KEINE eigenen Selektoren, da dieser Inhalt bei den entsprechenden Selektoren eingefügt wird! Falls sie größere Anpassungen vornehmen wollen, benutzen Sie bitte die CSS Styling Einstellung des Menüs.

Icon

Jeder Menü-Eintrag kann ein Icon haben. Die Icon-Komponente bietet die folgenden Einstellungen:

  • Icon (Texteingabe): Der Name/Schlüssel des Icons in der Shopware Icon-Font. Eine Übersicht alles Icons findet sich hier: https://www.8mylez.com/shopware-6-iconset/

  • Eigenes Icon (Medienauswahl): Setzt ein eigenes Bild, welches als Icon verwendet werden soll.

  • Icon Position (Auswahl): Gibt an, ob das Icon links oder rechts vom Text angezeigt werden soll.

    • Links

    • Rechts

  • Darstellung (Auswahl)

    • Nur Icon/Bild: Zeigt nur das Icon/Bild an und versteckt den Text des Menü-Eintrags.

    • Text + Icon/Bild: Zeigt sowohl den Text als auch das Icon/Bild des Menü-Eintrags an.

Desktop-Menü

Das Desktop-Menü kann unter Inhalte → Desktop-Menü bearbeitet werden.

Einstellungen

  • Sticky (Ja/Nein): Gibt an, ob das Menü sticky sein soll oder nicht.

  • Aktiv (Ja/Nein): Gibt an, ob das Menü aktiv sein soll oder nicht. Fall das Menü nicht aktiv ist, wird stattdessen das Shopware eigene Menü angezeigt.

  • Menü-Container Breite (Auswahl):

    • Volle Breite: Der Menü-Container erstreckt sich über die volle Bildschirmbreite.

    • Container / Boxed: Der Menü-Container erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

       

    • Inhaltsbasiert: Der Menü-Container ist so groß wie sein Inhalt es braucht, aber maximal so groß wie die maximale Inhaltsbreite (siehe: Container / Boxed Option)

  • Menü-Inhalt Breite (Auswahl):

    • Volle Breite: Der Inhalt des Menüs erstreckt sich über die gesamte Bildschirmbreite.

    • Container / Boxed: Der Inhalt des Menüs erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

  • Ausrichtung der Menüpunkte (Auswahl):

    • Standardwert (vom Theme vorgegeben)

    • Zentriert: Zentriert die Menü-Einträge innerhalb des Menü-Container.

    • Beginn des Menüs: Richtet die Menü-Einträge am linken Rand des Menü-Container aus.

    • Ende des Menüs: Richtet die Menü-Einträge am rechten Rand des Menü-Container aus.

    • Mit Zwischenraum (space between): Verteile die Elemente gleichmäßig. Das erste Element an den Start, das letzte an das Ende.

    • Mit Zwischenraum (space around): Verteile die Elemente gleichmäßig. Elemente haben gleiche Abstände um sie herum.

Die Einstellung Menü-Inhalt Breite ist nur verfügbar, wenn als Menü-Container Breite “Volle Breite” ausgewählt ist.

Styling

Menü

Die Styling Optionen, welche auf den Menü-Container angewendet werden.
Die vorhandenen Styling Optionen finden sich unter Styling.

Die Styling Optionen, welche auf den Dropdown-Container oder Dropdown Menü-Einträge angewendet werden.
Die vorhandenen Styling Optionen finden sich unter Styling.

Menüeintrag

Die Styling Optionen, welche auf die Menü-Einträge angewendet werden.
Die vorhandenen Styling Optionen finden sich unter Styling.

CSS

Individuelle CSS Anpassungen. Kann zum Beispiel verwendet werden, um Google Fonts einzubinden. Beispiel:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');

Im Schriftart Feld der Styling Optionen kann nun 'Roboto', sans-serif benutzt werden.

Neuer Menü-Eintrag

Neue Menü-Einträge können per Drag'n'Drop dem Menü hinzugefügt und platziert werden. Das Menü unterstützt die folgenden Typen/Widgets:

  • Link: Ein einfacher Link im Menü

  • Kategorien: Eine Auswahl von Kategorien die in einem Dropdown dargestellt werden. Bietet verschiedene Darstellungsmöglichkeiten (siehe Kategorie Widget)

  • Spalten: Ein Widget, welches ein Dropdown mit mehreren Spalten darstellt, welche wiederum mit Widgets befüllt werden können.

  • HTML: Ein Widget, welches es erlaubt HTML/Twig Inhalt im Menü-Eintrag und/oder im Dropdown-Inhalt zu benutzen.

Zeigt das Menü mitsamt aller Menü-Einträgen / Widgets. Kinderelemente (z.B. Spalten beim Spalten-Widget) werden eingerückt und etwas heller dargestellt, damit ersichtlich ist zu, welchem Widget sie gehören.
Die Widgets können hier bearbeitet oder gelöscht werden. Per Drag'n'Drop kann außerdem die Anordnung der Menü-Einträge geändert werden.

Mobile-Menü

– TODO: START –

Das Mobile-Menü orientiert sich und benutzt viele der Features das Standard Offcanvas-Menü von Shopware. Wie das Desktop-Menü aber unterstützt es verschiedene Widgets, um das Menü individuell zu gestalten.

 

Einstellungen

  • Aktiv (Ja/Nein): Gibt an, ob das Menü aktiv sein soll oder nicht. Fall das Menü nicht aktiv ist, wird stattdessen das Shopware eigene Menü angezeigt.

Styling

Menü

Die Styling Optionen, welche auf den Menü-Container angewendet werden.
Die vorhandenen Styling Optionen finden sich unter Styling.

Die Styling Optionen, welche auf den einfahrenden Untermenüpunkte angewendet werden.
Die vorhandenen Styling Optionen finden sich unter Styling.

Menüeintrag

Die Styling Optionen, welche auf die Menü-Einträge angewendet werden.
Die vorhandenen Styling Optionen finden sich unter Styling.

CSS

Individuelle CSS Anpassungen. Kann zum Beispiel verwendet werden, um Google Fonts einzubinden. Beispiel:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');

Im Schriftart Feld der Styling Optionen kann nun 'Roboto', sans-serif benutzt werden.

Neuer Menü-Eintrag

Neue Menü-Einträge können per Drag'n'Drop dem Menü hinzugefügt und platziert werden. Das Menü unterstützt die folgenden Typen/Widgets:

  • Link: Ein einfacher Link im Menü

  • Kategorien: Eine Auswahl von Kategorien die in einem Untermenü dargestellt werden. Bietet verschiedene Darstellungsmöglichkeiten (siehe Kategorie Widget)

  • Spalten: Ein Widget, welches ein Untermenü mit mehreren Spalten darstellt, welche wiederum mit Widgets befüllt werden können. Die “Spalten” werden dabei untereinander und nicht nebeneinander angezeigt! Es kann außerdem eingestellt werden, ob der Inhalt der Spalten direkt oder ob in einem eigenen Untermenü angezeigt werden soll.

  • HTML: Ein Widget, welches es erlaubt HTML/Twig Inhalt im Menü-Eintrag und/oder im Untermenü zu benutzen.

Zeigt das Menü mitsamt aller Menü-Einträgen / Widgets. Kinderelemente (z.B. Spalten beim Spalten-Widget) werden eingerückt und etwas heller dargestellt, damit ersichtlich ist zu, welchem Widget sie gehören.
Die Widgets können hier bearbeitet oder gelöscht werden. Per Drag'n'Drop kann außerdem die Anordnung der Menü-Einträge geändert werden.

Menü-Eintrag Widgets

Allgemein
  • Titel (Texteingabe): Der Titel des Menü-Eintrags.

  • Aktiv (Ja/Nein): Gibt an, ob der Menü-Eintrag aktiv ist oder nicht.

  • Link Typ (Auswahl):

    • Kategorie

    • Anpassbarer Link

  • Kategorie (Auswahl): Auswahl der Kategorie zu der verlinkt werden soll.

  • Verlinkt zu (Texteingabe): URL zu der verlinkt werden soll

  • Link-Ziel (Auswahl)

    • Selbes Fenster: Öffnet den Link im selben Fenster/Tab.

    • Neues Fenster: Öffnet den Link in einem neuem Tab.

  • Rechtsbündig (Ja/Nein): Falls aktiv, wird das Element an die rechte Seite des Menüs geschoben.

Kategorien

Allgemein
  • Titel (Texteingabe): Der Titel des Menü-Eintrags.

  • Aktiv (Ja/Nein): Gibt an, ob der Menü-Eintrag aktiv ist oder nicht.

  • Dropdown Breite (Auswahl):

    • Volle Breite: Der Dropdown-Container erstreckt sich über die volle Bildschirmbreite.

    • Container / Boxed: Der Dropdown-Container erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

    • Inhaltsbasiert: Der Dropdown-Container ist so groß wie sein Inhalt es braucht, aber maximal so groß wie die maximale Inhaltsbreite (siehe: Container / Boxed Option)

  • Dropdown Inhalt Breite (Auswahl): Nur bei voller Dropdown-Container Breite verfügbar!

    • Volle Breite: Der Inhalt des Dropdowns erstreckt sich über die gesamte Bildschirmbreite.

    • Container / Boxed: Der Inhalt des Dropdowns erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

  • Kategorie (Auswahl): Auswahl der Kategorie zu der verlinkt werden soll und dessen Unterkategorien dargestellt werden sollen.

  • Link-Ziel (Auswahl)

    • Selbes Fenster: Öffnet den Link im selben Fenster/Tab.

    • Neues Fenster: Öffnet den Link in einem neuem Tab.

  • Rechtsbündig (Ja/Nein): Falls aktiv, wird das Element an die rechte Seite des Menüs geschoben.

Kategorie-Einstellungen
  • Kategorie-Titel anzeigen (Ja/Nein): Gibt an, ob der Titel der ausgewählten Kategorie im Dropdown angezeigt werden soll oder nicht.

  • Kategorie-Bild anzeigen (Ja/Nein): Gibt an, ob das Kategorie-Bild im Dropdown angezeigt werden soll oder nicht.

  • Kategorie-Beschreibung anzeigen (Ja/Nein): Gibt an, ob die Kategorie-Beschreibung im Dropdown angezeigt werden soll oder nicht.

  • Kategorie-Bild-Position (Auswahl): Gibt an, ob das Kategorie-Bild entweder rechts oder links neben der Kategorie-Beschreibung angezeigt werden soll.

  • Max. Anzahl an Unterkategorien (Nummer): Legt die maximale Anzahl der anzuzeigenden Unterkategorien fest. -1 für unbegrenzt und 0 für keine.

  • Unterkategorie-Bilder anzeigen (Ja/Nein): Gibt an, ob die Bilder der Unterkategorien angezeigt werden sollen oder nicht.

  • Unterkategorie-Beschreibung anzeigen (Ja/Nein): Gibt an, ob die Unterkategorie-Beschreibungen angezeigt werden sollen oder nicht.

  • Max. Anzahl an Unter-Unterkategorien (Nummer): Legt die maximale Anzahl der anzuzeigenden Unter-Unterkategorien fest. -1 für unbegrenzt und 0 für keine.

Beispiel Simpel: Nur Kategorie-Links anzeigen

 

Beispiel Komplex: Zeige Kategorie-Informationen und Unterkategorie-Links und -Bilder

Spalten

Beim Spalten Widget befinden sich in der Sidebar zwei weitere Einträge: "Neuer Menü-Eintrag" und "Navigator", welche genau so wie im Menü auch funktionieren. Das Spalten Widget unterstützt die folgenden Menü-Widgets:

  • Link

  • HTML

  • Kategorien

Allgemein
  • Titel (Texteingabe): Der Titel des Menü-Eintrags.

  • Aktiv (Ja/Nein): Gibt an, ob der Menü-Eintrag aktiv ist oder nicht.

  • Dropdown Breite (Auswahl):

    • Volle Breite: Der Dropdown-Container erstreckt sich über die volle Bildschirmbreite.

    • Container / Boxed: Der Dropdown-Container erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

    • Inhaltsbasiert: Der Dropdown-Container ist so groß wie sein Inhalt es braucht, aber maximal so groß wie die maximale Inhaltsbreite (siehe: Container / Boxed Option)

  • Dropdown Inhalt Breite (Auswahl): Nur bei voller Dropdown-Container Breite verfügbar!

    • Volle Breite: Der Inhalt des Dropdowns erstreckt sich über die gesamte Bildschirmbreite.

    • Container / Boxed: Der Inhalt des Dropdowns erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

  • Link Typ (Auswahl):

    • Kategorie

    • Anpassbarer Link

  • Kategorie (Auswahl): Auswahl der Kategorie zu der verlinkt werden soll und dessen Unterkategorien dargestellt werden sollen.

  • Verlinkt zu (Texteingabe): URL zu der verlinkt werden soll

  • Link-Ziel (Auswahl)

    • Selbes Fenster: Öffnet den Link im selben Fenster/Tab.

    • Neues Fenster: Öffnet den Link in einem neuem Tab.

  • Rechtsbündig (Ja/Nein): Falls aktiv, wird das Element an die rechte Seite des Menüs geschoben.

Spalten

Hier werden die einzelnen mitsamt ihren eigenen Menü-Eintrags Widgets angezeigt. Zu den Einstellungen einer Spalte, wie Name oder Aktiv gelangt man über den Sidebar Punk "Navigator"..

HTML

Allgemein
  • Titel (Texteingabe): Der Titel des Menü-Eintrags.

  • Aktiv (Ja/Nein): Gibt an, ob der Menü-Eintrag aktiv ist oder nicht.

  • Dropdown Breite (Auswahl):

    • Volle Breite: Der Dropdown-Container erstreckt sich über die volle Bildschirmbreite.

    • Container / Boxed: Der Dropdown-Container erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

    • Inhaltsbasiert: Der Dropdown-Container ist so groß wie sein Inhalt es braucht, aber maximal so groß wie die maximale Inhaltsbreite (siehe: Container / Boxed Option)

  • Dropdown Inhalt Breite (Auswahl): Nur bei voller Dropdown-Container Breite verfügbar!

    • Volle Breite: Der Inhalt des Dropdowns erstreckt sich über die gesamte Bildschirmbreite.

    • Container / Boxed: Der Inhalt des Dropdowns erstreckt sich über die maximale Inhaltsbreite (Container, Inhaltsbox)

  • Link Typ (Auswahl):

    • Nur Text: Der Eintrag wird als Text und nicht als Link dargestellt

    • Kategorie

    • Anpassbarer Link

  • Kategorie (Auswahl): Auswahl der Kategorie zu der verlinkt werden soll.

  • Verlinkt zu (Texteingabe): URL zu der verlinkt werden soll

  • Link-Ziel (Auswahl)

    • Selbes Fenster: Öffnet den Link im selben Fenster/Tab.

    • Neues Fenster: Öffnet den Link in einem neuem Tab.

  • Rechtsbündig (Ja/Nein): Falls aktiv, wird das Element an die rechte Seite des Menüs geschoben.

HTML Inhalt

Eigener HTML oder Twig Inhalt, welcher anstatt dem Titel des Menüpunktes benutzt wird.

HTML Dropdown Inhalt

Eigener HTML oder Twig Inhalt, welcher innerhalb des Dropdown des Menüpunktes angezeigt wird.

ERP-System

Das Plugin erfordert keine Schnittstelle zu einem ERP-System.

Betrieb

Begriffsklärung / Glossar

Shop

ERP-System

Individualisierung

Das Plugin kann im Frontend entsprechend modifiziert werden.

Templates

Die Plugin Template Dateien, nutzen diverse Blöcke, welche genutzt werden können, um das Aussehen oder die Verhaltensweise des Megamenüs anzupassen. Die Dateien liegen im Plugin Ordner src/Resources/views/storefront/.

CSS

Das Plugin bietet bis hin zur Verwendung von Inline-CSS viele Möglichkeiten die Darstellung in der Shop-Storefront anzupassen. Änderungen, die über die Konfigurationsmöglichkeiten in der Administration hinausgehen, sind über das Template-System von Shopware in Ihrem eigenen Storefront-Template möglich.

Textblöcke

Sie können die verwendeten Textbausteine ganz einfach über die Administrationsoberfläche Ihrer Shopware-Installation anpassen. Unter Einstellungen wählen Sie im ersten Reiter “Shop” den Punkt “Textbausteine” aus, klicken dann in der rechten Spalte bei dem Textbaustein-Set, für das Sie Änderungen vornehmen wollen, auf “bearbeiten”. Danach können Sie oben in der Suche nach “s360-megamenu.” suchen und finden alle Textbausteine, die für das Plugin relevant sind.

Troubleshooting

Logs prüfen

Um herauszufinden, wo ein Problem liegt, helfen Ihnen und uns die Logs. Je nach Fehlerbild ist eines der folgenden 3 Logs dafür mehr oder weniger relevant.

Browser-Log

Das Browser-Log ist meist relevant, wenn irgendwas im Frontend des Shops sich merkwürdig verhält oder nicht reagiert. (Beispiel: Sie klicken einen Button und augenscheinlich passiert gar nichts.)

Das Browser-Log sehen Sie, wenn Sie im Browser F12 drücken und dort dann auf Konsole (oder Console) wechseln.

Shop-Log

Das Shop-Log ist immer dann interessant, wenn im Frontend unerwartete Fehlermeldungen ausgegeben werden oder das Plugin zwar auf Eingaben im Frontend reagiert, aber nicht das Ergebnis liefert, was erwartet wurde. Manchmal ergibt sich auch durch das Browser-Log, dass die Informationen eher im Shop-Log zu suchen sind.

Webserver-Log

Das Webserver-Log wird dann relevant, wenn Sie irgendwo auf einen Error 500 (= weiße Seite) stoßen.

Das Webserver-Log kann Ihnen Ihr Hoster zur Verfügung stellen.

FAQ

Wie binde ich Google Fonts ein?

Google Fonts können über die import-Regel ins CSS eingebunden werden. Dazu muss das jeweilige Code-Snippet den Sie von Google erhalten haben im CSS Feld der Styling Einstellungen eingetragen werden.

Im Schriftart Feld der Styling Optionen kann nun 'Roboto', sans-serif benutzt werden.

Wie kann man im Kategorie-Widget den Abstand der Unterkategorie-Bilder ändern?

Das Plugin nutzt einen Standard-Abstand rechts und unten für die Unterkategorie-Bilder. Dieser kann über CSS geändert werden, indem man in den Menü Styling Einstellungen im Tab CSS folgendes hinzufügt:

.s360-megamenu-sub-category { padding-right: 10px; /* Hier den Abstand rechts angeben */ padding-bottom: 10px; /* Hier den Abstand unten angeben */ }

Wie kann man im Kategorie-Widget die Anzahl an Unterkategorien pro Reihe ändern?

Das Plugin nutzt eine Spaltengröße von 25% für die Unterkategorien. Diese kann über CSS geändert werden, indem man in den Menü Styling Einstellungen im Tab CSS folgendes hinzufügt:

Changelog

v2.0.5 (Oktober 2021)

  • Bugfix: Kategorien die auf externe Links verweisen berücksichtigen

  • Kompatibilität: SW >= 6.4.5.0

v2.0.4 (August 2021)

  • Kompatibilität: SW >= 6.4.3.0

v2.0.3 (Juli 2021)

  • BUGFIX: Anpassen der $color- Variablen im Backend scss, damit sich das Plugin wieder builden lässt

v2.0.2 (Juni 2021)

  • Behebt einen Fehler der die Sticky-Funktion des Plugins beeinträchtigt

  • Anpassung der Composer JSON

  • Kompatibel >=6.4.0.0

v2.0.1 (Juni 2021)

  • Anpassung der Composer JSON

  • Kompatibilität für SW 6.4.1.x hinzugefügt

v1.1.0 (Mai 2021)

  • Bugfix: Überlappender Text im Mobile Menü

  • Change: Kompatibilität für Shopware >= 6.4, Shopware 6.3 wird nicht mehr unterstützt

v1.0.0 ()

  • Initiales Release

Support und Kontakt

siehe Support und Kontakt