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.

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ü

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)

    Open

    

     

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

    Open

    

• Menü-Inhalt Breite (Auswahl):

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

    Open

    

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

    Open

    

• Ausrichtung der Menüpunkte (Auswahl):

  • Standardwert (vom Theme vorgegeben)

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

    Open

    

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

    Open

    

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

    Open

    

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

    Open

    

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

    Open

    

Styling

Menü

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

Open

Dropdown

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

Open

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:

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.

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.

Open

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.

Open

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:

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)
  
  

  Open

  

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

  Open

  

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

  Open

  

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

• 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)

    Open

    
    Open

    

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

    Open

    

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

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

    Open

    

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

    Open

    

• 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

Open

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

Open

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)

    Open

    
    Open

    

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

    Open

    

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

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

    Open

    

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

    Open

    

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