Emotion Banner Slider mit nebeneinander platzierten Bannern (Banner mit frei definierbaren Texten)

Über die Erweiterung

Kontakt & Support

Treten Sie bei Fragen oder Anregungen einfach mit uns über die E-Mail shopware.support@digitalwert.de in Kontakt und wir helfen Ihnen gern weiter. Eine Anleitung zum Plugin finden Sie unter: https://shopwaredemo.digitalwert.de/media/pdf/22/ae/ab/Anleitung_EmotionBannerSlider.pdf (Link zur Anleitung).

Beschreibung des Plugins

Das Plugin "Emotion Banner Slider mit nebeneinander platzierten Bannern (Banner mit frei definierbaren Texten uvm.)" fügt einen individuellen Emotion Banner Slider mit nebeneinander platzierten Bannern zu den Einkaufswelten - Elementen hinzu, den man wie gewohnt per Drag und Drop auf einer Einkaufswelt beliebig oft platzieren kann. Durch die Erstellung und Konfiguration der Banner Slider Elemente in einem eigenen Backend - Modul können die Banner unabhängig vom Einkaufswelten - Element beliebig oft einem Banner Slider zugewiesen und somit wiederverwendet werden.

Beim Emotion Banner Slider kann man unter anderem auswählen, ob die Navigationspfeile angezeigt werden sollen und ob der Emotion Banner Slider automatisch rotieren soll.

Ebenso kann man das Aussehen der Navigationspfeile (Rechteck, Dreieck, Kreis und ohne Hintergrund / Rahmen) bei jedem Emotion Banner Slider individuell festlegen.

Des Weiteren kann man die Scroll- und Rotationsgeschwindigkeit festlegen. Ebenso kann man die Anzahl nebeneinander platzierter Banner auswählen, die Mindestbreite der Banner kann aber auch individuell festgelegt werden. Die Berechnung der Prozentangabe für die nebeneinander platzierten Banner erfolgt auf Grundlage der Shopware - Slider - Funktion, die beispielsweise auch bei den Slidern auf der Artikel - Detailseite (beispielsweise "Ähnliche Artikel") genutzt wird und anhand der die Banner entsprechend der Auflösung automatisch angepasst und aufgeteilt werden.

Der Emotion Banner Slider ermöglicht derzeit bis zu 20 Bannersliderelemente, die Sie über ein Auswahlfeld dem Emotion Banner Slider zuordnen können.

Innerhalb des neu erstellten Backend-Moduls "Bannersliderelemente" unter dem Menüpunkt "Inhalte" können die jeweiligen Bannersliderelemente erstellt und entsprechend konfiguriert werden. Folgende Einstellungen können dabei je Bannersliderelement festgelegt werden:

• die Auswahl des Modus des Hintergrunds, also ob ein Hintergrundbild oder eine Hintergrundfarbe festgelegt werden soll
• die Auswahl der Hintergrundposition für das Hintergrundbild
• die Auswahl der Hintergrundabmessung für das Hintergrundbild (contain, cover oder auto)
• die Festlegung der Hintergrundfarbe
• die Festlegung von runden Ecken

Bei jeder der 4 Textboxen stehen dabei eine Vielzahl an Konfigurationsmöglichkeiten zur Verfügung, dazu gehören:

• die Festlegung der Vollflächigkeit der Textbox (die Textbox erstreckt sich somit über 100% der Breite)
• die Festlegung der vertikalen Position der Textbox (oben, mittig, unten) und des dazugehörigen Außenabstandes
• die Festlegung der horizontalen Position der Textbox (links, mittig, rechts) und des dazugehörigen Außenabstandes
• die Festlegung des Innenabstandes der Textbox
• die Festlegung, ob der Innenabstand auf den Link und nicht auf die Textbox übertragen werden soll (wenn der Inhalt nur diesen Link enthält)
• die Festlegung der Hintergrundfarbe und der Hover-Hintergrundfarbe der Textbox
• die Festlegung der Schriftfarbe und der Hover-Schriftfarbe der Textbox
• die Festlegung der Breite der Textbox, wenn sich der Inhalt beispielsweise über mehrere Zeilen und nicht über die komplette Fläche erstrecken soll
• die Festlegung von runden Ecken für die Textbox.

Der Inhalt der bis zu 4 Textboxen eines Bannersliderelements kann über ein TinyMCE - Feld gepflegt werden, sodass Sie beispielsweise folgende Inhaltselemente in den Textboxen hinterlegen können:  

• normalen Text
• Bilder
• Links
• HTML-Elemente
• Überschriften (h1, h2, h3, h4, h5 und h6) über den optional aktivierbaren Erweiterten Editor ("Einstellungen" -> "Benutzerverwaltung" -> Benutzer auswählen -> Haken bei "Erweiterter Editor" setzen) beim TinyMCE - Feld beim Auswahlfeld "Vorlage"
• Videos (YouTube, Vimeo oder HTML5).

Ebenso kann man über das TinyMCE - Feld beispielsweise den Inhalt zentrieren, formatieren (beispielsweise fett oder kursiv markieren oder unterstreichen) oder auch Links setzen oder die Schriftgröße festlegen.  

Zusätzlich hat man die Möglichkeit, das komplette Bannersliderelement auf ein selbst festlegbares Ziel zu verlinken.

Hinweise zum Plugin

(1). Entwickelt nach dem neuen Pluginsystem ab Shopware 5.2.

(2). Kompatibel mit PHP 7.

(3). 30 Tage unverbindlich testen: mit der Testversion können Sie das Plugin 30 Tage kostenfrei und in vollem Umfang direkt in Ihrem Shop einsetzen.

(4). Kompatible Themes: dieses Plugin ist zu dem Responsiven Theme von Shopware und zu Themes, die von diesem abgeleitet werden, kompatibel. Bei der Nutzung eines Drittanbieter - Themes, das über den Shopware Store erworben wurde, kann der ordnungsgemäße Einsatz des Plugins wie bei jedem anderen Shopware - Plugin nicht garantiert werden.

(5). Unverschlüsselt: das Plugin wird komplett quelloffen bereitgestellt, Sie benötigen also auch nicht den Lizenz Manager von Shopware und es kann somit problemlos ohne den iOnCube Loader genutzt werden.

(6). Eigene Shopware - Blöcke: das Plugin stellt eigene Shopware – Blöcke bereit, um das Plugin updatesicher im eigenen Theme anpassen oder erweitern zu können. Die Namen der entsprechenden eigenen Shopware - Blöcke finden Sie in der Anleitung: https://shopwaredemo.digitalwert.de/media/pdf/22/ae/ab/Anleitung_EmotionBannerSlider.pdf .

Vorgenommene Konfigurationen im Vorschaubild der Banner Slider Elemente

Emotion Banner 1 ( https://shopwaredemo.digitalwert.de/media/image/12/1f/df/Individualemotionbanner1.png ) aus Bild 1 im Bild Slider oben:

• Modus: 0 - Hintergrundbild
• Ausrichtung des Hintergrundbildes: 8 - rechts unten
• Runde Ecken (border-radius) aktiv: Nein
• Textbox 1
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 0 - oben
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 0 - links
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Hintergrundfarbe: #191919
• Hover-Hintergrundfarbe: #FFFFFF
• Schriftfarbe: #FFFFFF
• Hover-Schriftfarbe: #000000
• Runde Ecken (border-radius) aktiv: Nein
• Inhalt: Text oben links (mittig ausgerichtet über den TinyMCE - Editor)
• Textbox 2
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 0 - oben
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 2 - rechts
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Hintergrundfarbe: rgba(25,25,25,0.7)
• Hover-Hintergrundfarbe: rgba(255,255,255,0.7)
• Schriftfarbe: #FFFFFF
• Hover-Schriftfarbe: #000000
• Runde Ecken (border-radius) aktiv: Nein
• Inhalt: Text oben rechts (mittig ausgerichtet über den TinyMCE - Editor)
• Textbox 3
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 2 - unten
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 0 - links
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Hintergrundfarbe: rgba(25,25,25,0.7)
• Hover-Hintergrundfarbe: rgba(255,255,255,0.7)
• Schriftfarbe: #FFFFFF
• Hover-Schriftfarbe: #000000
• Runde Ecken (border-radius) aktiv: Nein
• Inhalt: Text unten links (mittig ausgerichtet über den TinyMCE - Editor)
• Textbox 4
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 2 - unten
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 2 - rechts
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Hintergrundfarbe: #191919
• Hover-Hintergrundfarbe: #FFFFFF
• Schriftfarbe: #FFFFFF
• Hover-Schriftfarbe: #000000
• Runde Ecken (border-radius) aktiv: Nein
• Inhalt: Text unten rechts (mittig ausgerichtet über den TinyMCE - Editor)

Emotion Banner 2 ( https://shopwaredemo.digitalwert.de/media/image/76/3a/ca/Individualemotionbanner2.png ) aus Bild 1 im Bild Slider oben:

• Modus: 1 - Hintergrundfarbe
• Runde Ecken (border-radius) aktiv: Nein
• Hintergrundfarbe: #191919
• Textbox 1
• Anzeigen: Ja
• Vollflächig: Ja
• Vertikale Ausrichtung: 1 - mittig
• Außenabstand in Pixeln für die vertikale Ausrichtung: 0
• Horizontale Ausrichtung: 1 - mittig
• Außenabstand in Pixeln für die horizontale Ausrichtung: 0
• Hintergrundfarbe: rgba(239,239,239,0.7)
• Schriftfarbe: #000000
• Runde Ecken (border-radius) aktiv: Nein
• Inhalt: KAUF 3 ZAHL 2 (mittig ausgerichtet auf zwei Zeilen über den TinyMCE - Editor)
• Textbox 2
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 2 - unten
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 2 - rechts
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Hintergrundfarbe: #EFEFEF
• Hover-Hintergrundfarbe: #980a88
• Schriftfarbe: #000000
• Hover-Schriftfarbe: #FFFFFF
• Runde Ecken (border-radius) aktiv: Ja
• Runde Ecken (border-radius) in Pixeln: 5
• Inhalt: Mehr erfahren (mittig ausgerichtet mit Verlinkung über den TinyMCE - Editor)

Emotion Banner 3 ( https://shopwaredemo.digitalwert.de/media/image/4a/df/95/Individualemotionbanner3.png ) aus Bild 3 im Bild Slider oben:

• Modus: 1 - Hintergrundfarbe
• Runde Ecken (border-radius) aktiv: Nein
• Hintergrundfarbe: #980a88
• Textbox 1
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 0 - oben
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 2 - rechts
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Hintergrundfarbe: #EFEFEF
• Hover-Hintergrundfarbe: #191919
• Schriftfarbe: #000000
• Hover-Schriftfarbe: #FFFFFF
• Runde Ecken (border-radius) aktiv: Ja
• Runde Ecken (border-radius) in Pixeln: 5
• Inhalt: News: Lorem ipsum (mittig ausgerichtet mit Verlinkung über den TinyMCE - Editor)
• Textbox 2
• Anzeigen: Ja
• Vollflächig: Ja
• Vertikale Ausrichtung: 2 - unten
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 1 - mittig
• Außenabstand in Pixeln für die horizontale Ausrichtung: 0
• Hintergrundfarbe: rgba(25,25,25,0.7)
• Schriftfarbe: #FFFFFF
• Breite in: 1 - %
• Breite: 92
• Runde Ecken (border-radius) aktiv: Nein
• Inhalt: Newstext (mittig ausgerichtet über den TinyMCE - Editor)

Emotion Banner 4 ( https://shopwaredemo.digitalwert.de/media/image/35/d3/28/Individualemotionbanner4.png ) aus Bild 3 im Bild Slider oben:

• Modus: 0 - Hintergrundbild
• Ausrichtung des Hintergrundbildes: 0 - links oben
• Runde Ecken (border-radius) aktiv: Nein
• Textbox 1
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 0 - oben
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 2 - rechts
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Innenabstand (padding): 1rem
• Hintergrundfarbe: #191919
• Hover-Hintergrundfarbe: #980a88
• Schriftfarbe: #FFFFFF
• Hover-Schriftfarbe: #FFFFFF
• Runde Ecken (border-radius) aktiv: Ja
• Runde Ecken (border-radius) in Pixeln: 40
• Inhalt: Sale 14,95 € (mittig ausgerichtet über zwei Zeilen über den TinyMCE - Editor)
• Textbox 2
• Anzeigen: Ja
• Vollflächig: Nein
• Vertikale Ausrichtung: 2 - unten
• Außenabstand in Pixeln für die vertikale Ausrichtung: 20
• Horizontale Ausrichtung: 2 - rechts
• Außenabstand in Pixeln für die horizontale Ausrichtung: 20
• Innenabstand (padding): 0.5rem 0.75rem 0.5rem 0.75rem
• Hintergrundfarbe: #191919
• Hover-Hintergrundfarbe: #980a88
• Schriftfarbe: #FFFFFF
• Hover-Schriftfarbe: #FFFFFF
• Runde Ecken (border-radius) aktiv: Ja
• Runde Ecken (border-radius) in Pixeln: 5
• Inhalt: Zum Artikel (mittig ausgerichtet mit Verlinkung über den TinyMCE - Editor)