Einleitung

Grobe Beschreibung, wofür das Plugin gut ist.

Features

Stichpunkt-Liste der 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

Vorgehen bei Erstinstallation

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

Hintergrund

Box

Hover/Aktiv

Sonstiges

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:

Desktop-Menü

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

Einstellungen

note

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

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.

Dropdown

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:

Navigator

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.

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

Einstellungen

Styling

Menü

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

Dropdown

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:

Navigator

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

Link

Allgemein
note

Die Einstellung Kategorie ist nur verfügbar, wenn als Link Typ “Kategorie” ausgewählt ist. Ebenso ist die Einstellung Verlinkt zu nur bei Linkt Typ “Anpassbarer Link” verfügbar.

Die Einstellung Kategorie ist nur verfügbar, wenn als Link Typ “Kategorie” ausgewählt ist. Ebenso ist die Einstellung Verlinkt zu nur bei Linkt Typ “Anpassbarer Link” verfügbar.

Kategorien

Allgemein
note

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

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

Kategorie-Einstellungen

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:

Allgemein
note

Die Einstellung Kategorie ist nur verfügbar, wenn als Link Typ “Kategorie” ausgewählt ist. Ebenso ist die Einstellung Verlinkt zu nur bei Link Typ “Anpassbarer Link” verfügbar.

Die Einstellung Kategorie ist nur verfügbar, wenn als Link Typ “Kategorie” ausgewählt ist. Ebenso ist die Einstellung Verlinkt zu nur bei Link Typ “Anpassbarer Link” verfügbar.

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
note

Die Einstellung Kategorie ist nur verfügbar, wenn als Link Typ “Kategorie” ausgewählt ist. Ebenso ist die Einstellung Verlinkt zu nur bei Linkt Typ “Anpassbarer Link” verfügbar.

Die Einstellung Kategorie ist nur verfügbar, wenn als Link Typ “Kategorie” ausgewählt ist. Ebenso ist die Einstellung Verlinkt zu nur bei Linkt Typ “Anpassbarer Link” verfügbar.

note

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

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

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

Dieser Bereich beschreibt den Umgang mit dem Plugin im Alltag.

Begriffsklärung / Glossar

Falls das Plugin bestimmte Begrifflichkeiten für die Beschreibung des Betriebs benötigt, sollten diese hier geklärt werden.

Shop

Beschreibung des Betriebs im Shop (z.B. Backend-Übersichten, Aktionen, die dort durchführbar sind, etc.)

ERP-System

Ggf. Beschreibung, wie im ERP-System mit dem Plugin umzugehen ist.

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/.

Wenn Sie Änderungen in den eigenen Dateien des Plugins durchführen, werden diese bei einem Update unwiderruflich überschrieben!

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.

Wenn Sie Änderungen in den eigenen Dateien des Plugins durchführen, werden diese bei einem Update unwiderruflich überschrieben!

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

Dieser Abschnitt soll dem Kunden ermöglichen, vielleicht schon allein Probleme lösen zu könne. Wo findet er Logs, worauf sollte er achten?

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.

Achtung: Editieren Sie die Config-Datei des Shops nur, wenn Sie wissen, was Sie tun! Fehlerhafte Anpassungen hier können Ihren Shop unerreichbar oder (verschlüsselte) Daten unbrauchbar machen. Im Zweifelsfall sollten Sie Ihren Hoster oder Servicepartner um Hilfe fragen.

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:

.s360-megamenu-sub-category {
    -ms-flex-preferred-size: 25%; /* Hier die Größe der Spalte angeben */
    flex-basis: 25%; /* Hier die Größe der Spalte angeben */
}

Changelog

v2.0.5 (Oktober 2021)

v2.0.4 (August 2021)

v2.0.3 (Juli 2021)

v2.0.2 (Juni 2021)

v2.0.1 (Juni 2021)

v1.1.0 (Mai 2021)

v1.0.0 (Monat Jahr)

Support und Kontakt

siehe Support und Kontakt