emotion banner slider with banners placed side by side (banner with freely definable texts etc.)

About the Extension

Contact & Support

If you have any questions or suggestions just contact us via mail to shopware.support@digitalwert.de and we are happy to help you. A instructions for the plugin can be found at: https://shopwaredemo.digitalwert.de/media/pdf/61/3c/d7/Guide_EmotionBannerSlider.pdf (link to instruction).

Description of the plugin

The plugin "emotion banner slider with banners placed side by side (banner with freely definable texts etc.)" adds an emotion banner slider with banners placed side by side to the shopping world elements, which you can place as usual by dragging and dropping on a shopping world as often as you like. By creating and configuring the banner slider elements in a separate backend module, the banners can be reused as often as desired independent of the shopping world element.

With the emotion banner slider you can select, whether the navigation arrows should be displayed and whether the emotion banner slider should automatically rotate.

Similarly, you can customize the appearance of the navigation arrows (rectangle, triangle, circle and no background / border) for each emotion banner slider.

Furthermore, you can also set the scroll and rotation speed. Similarly, you can select the number of banners placed side by side, but the minimum width of the banners can also be set individually. The percentages for the banners placed side by side are calculated on the basis of the shopware slider function, which is also used, for example, in the sliders on the article detail page (for example, "similar articles") and on the basis of which the banners are automatically adjusted according to the resolution and be split.

The emotion banner slider currently allows up to 20 banner slider elements, which you can assign to the emotion banner slider via a selection field from the own backend module.

Within the newly created backend module "bannersliderelements" under the menu item "Content", the respective banner slider elements can be created and configured accordingly. There is no limit to the number of banner slider elements that can be created. The following settings can be defined for each banner slider element:

• the selection of the mode of the background, whether a background image or a background color should be set
• the selection of the background position for the background image
• the selection of the background size for the background image (cover, contain or auto)
• the definition of the background color
• the definition of round corners

Each of the 4 text boxes of a banner slider element offers a variety of configuration options, including:

• the definition of the full size of the text box (the text box covers 100% of the width of the emotion banner)
• the definition of the vertical position of the text box (top, middle, bottom) and the associated outer distance
• the definition of the horizontal position of the text box (left, middle, right) and the associated outer distance
• the definition of the inner distance of the text box
• the definition of whether the inner distance should be transferred to the link and not to the text box (if the content contains only this link)
• the definition of the background color and the hover background color of the text box
• the definition of the font color and the hover font color of the text box
• the definition of the width of the text box, when the contents are to extend, for example, over several lines and not over the entire width
• the definition of round corners for the text box.

The content of the up to 4 text boxes of a banner slider element can be maintained via a TinyMCE field, so that you can, for example, set the following content elements in the text boxes:

• normal text
• images
• links
• HTML elements
• headlines (h1, h2, h3, h4, h5 and h6) via the optionally activated advanced editor ("Configuration" -> "User administration" -> select a user -> check "extended editor") in the TinyMCE field and the selection field " Format"
• Videos (YouTube, Vimeo or HTML5).

Using the TinyMCE field, you can customize the content of the text boxes according to your own wishes. For example, you can center the content, format it (for example, highlight or underline it in bold or italics), set links or set the font size.

In addition, you have the opportunity to link the entire emotion banner to a self-determined target.

Informations about the plugin

(1). Developed according to the new plugin system from shopware 5.2.

(2). Compatible with PHP 7.

(3). Test for 30 days without obligation: with the trial version you can use the plugin for 30 days free of charge and in full directly in your shop.

(4). Compatible themes: this plugin is compatible with the Responsive theme from shopware and themes derived from it. When using a third party theme, which was purchased through the shopware store, the proper use of the plugin can not be guaranteed as with any other shopware plugin. 

(5). Unencrypted: the plugin is provided completely open source, so you do not need the license manager from shopware and it can therefore be used without problems without the iOnCube Loader.

(6). Own shopware blocks: the plugin provides its own shopware blocks so you be able to adapt or extend the plugin update safe in your own theme. The names of the corresponding own shopware blocks can be found in the instructions: https://shopwaredemo.digitalwert.de/media/pdf/61/3c/d7/Guide_EmotionBannerSlider.pdf .

(7). used shopping worlds modes: the best representation of our plugin you get in the shopping worlds modes "Resize / Scaling" and "Fluid / Responsive". The shopping worlds mode "Rows" is also supported by the plugin, here you also have the option to set an individual height for the emotion banner.

(8). translatable fields in the shopping world element: all technically possible fields are translatable in the shopping world element (globe icon), this includes above all the selection field for the selection of the banner.

selected configurations in the preview image of the image slider

Emotion Banner 1 (https://shopwaredemo.digitalwert.de/media/image/12/1f/df/Individualemotionbanner1.png) from image 1 in the image slider above:

• mode: Hintergrundbild
• alignment of the background image: rechts unten
• active round corners (border-radius): no
• show text box 1: yes
• fullsize text box 1: no
• vertical orientation of the text box 1: oben
• outer distance in pixels for the vertical orientation of the text box 1: 20
• horizontal orientation of the text box 1: links
• outer distance in pixels for the horizontal orientation of the text box 1: 20
• background color text box 1: #191919
• hover background color text box 1: #FFFFFF
• font color text box 1: #FFFFFF
• hover font color text box 1: #000000
• active round corners (border-radius) for text box 1: no
• content text box 1: Text oben links (mittig ausgerichtet über den TinyMCE - Editor)
• show text box 2: yes
• fullsize text box 2: no
• vertical orientation of the text box 2: oben
• outer distance in pixels for the vertical orientation of the text box 2: 20
• horizontal orientation of the text box 2: rechts
• outer distance in pixels for the horizontal orientation of the text box 2: 20
• background color text box 2: rgba(25,25,25,0.7)
• hover background color text box 2: rgba(255,255,255,0.7)
• font color text box 2: #FFFFFF
• hover font color text box 2: #000000
• active round corners (border-radius) for text box 2: no
• content text box 2: Text oben rechts (mittig ausgerichtet über den TinyMCE - Editor)
• show text box 3: yes
• fullsize text box 3: no
• vertical orientation of the text box 3: unten
• outer distance in pixels for the vertical orientation of the text box 3: 20
• horizontal orientation of the text box 3: links
• outer distance in pixels for the horizontal orientation of the text box 3: 20
• background color text box 3: rgba(25,25,25,0.7)
• hover background color text box 3: rgba(255,255,255,0.7)
• font color text box 3: #FFFFFF
• hover font color text box 3: #000000
• active round corners (border-radius) for text box 3: no
• content text box 3: Text unten links (mittig ausgerichtet über den TinyMCE - Editor)
• show text box 4: yes
• fullsize text box 4: no
• vertical orientation of the text box 4: unten
• outer distance in pixels for the vertical orientation of the text box 4: 20
• horizontal orientation of the text box 4: rechts
• outer distance in pixels for the horizontal orientation of the text box 4: 20
• background color text box 4: #191919
• hover background color text box 4: #FFFFFF
• font color text box 4: #FFFFFF
• hover font color text box 4: #000000
• active round corners (border-radius) for text box 4: no
• content text box 3: Text unten rechts (mittig ausgerichtet über den TinyMCE - Editor)

Emotion Banner 2 (https://shopwaredemo.digitalwert.de/media/image/76/3a/ca/Individualemotionbanner2.png) from image 1 in the image slider above:

• mode: Hintergrundfarbe
• active round corners (border-radius): no
• background color as hexcode: #191919
• show text box 1: yes
• fullsize text box 1: yes
• vertical orientation of the text box 1: mittig
• outer distance in pixels for the vertical orientation of the text box 1: 0
• horizontal orientation of the text box 1: mittig
• outer distance in pixels for the horizontal orientation of the text box 1: 0
• background color text box 1: rgba(239,239,239,0.7)
• font color text box 1: #000000
• active round corners (border-radius) for text box 1: no
• content text box 1: KAUF 3 ZAHL 2 (mittig ausgerichtet auf zwei Zeilen über den TinyMCE - Editor)
• show text box 2: yes
• fullsize text box 2: no
• vertical orientation of the text box 2: unten
• outer distance in pixels for the vertical orientation of the text box 2: 20
• horizontal orientation of the text box 2: rechts
• outer distance in pixels for the horizontal orientation of the text box 2: 20
• background color text box 2: #EFEFEF
• hover background color text box 2: #980a88
• font color text box 2: #000000
• hover font color text box 2: #FFFFFF
• active round corners (border-radius) for text box 2: yes
• round corners (border-radius) in pixels for text box 2: 5
• content text box 2: Mehr erfahren (mittig ausgerichtet mit Verlinkung über den TinyMCE - Editor)

Emotion Banner 3 (https://shopwaredemo.digitalwert.de/media/image/4a/df/95/Individualemotionbanner3.png) from image 1 in the image slider above:

• mode: Hintergrundfarbe
• active round corners (border-radius): no
• background color as hexcode: #980a88
• show text box 1: yes
• fullsize text box 1: no
• vertical orientation of the text box 1: oben
• outer distance in pixels for the vertical orientation of the text box 1: 20
• horizontal orientation of the text box 1: rechts
• outer distance in pixels for the horizontal orientation of the text box 1: 20
• background color text box 1: #EFEFEF
• hover background color text box 1: #191919
• font color text box 1: #000000
• hover font color text box 1: #FFFFFF
• active round corners (border-radius) for text box 1: yes
• round corners (border-radius) in pixels for text box 2: 5
• content text box 1: News: Lorem ipsum (mittig ausgerichtet mit Verlinkung über den TinyMCE - Editor)
• show text box 2: yes
• fullsize text box 2: yes
• vertical orientation of the text box 2: unten
• outer distance in pixels for the vertical orientation of the text box 2: 20
• horizontal orientation of the text box 2: mittig
• outer distance in pixels for the horizontal orientation of the text box 2: 0
• background color text box 2: rgba(25,25,25,0.7)
• font color text box 2: #FFFFFF
• width for text box 2 in: %
• width for text box 2: 93
• active round corners (border-radius) for text box 2: no
• content text box 2: Newstext (mittig ausgerichtet über den TinyMCE - Editor)

Emotion Banner 4 (https://shopwaredemo.digitalwert.de/media/image/35/d3/28/Individualemotionbanner4.png) from image 1 in the image slider above:

• mode: Hintergrundbild
• alignment of the background image: links oben
• active round corners (border-radius): no
• background color as hexcode: #980a88
• show text box 1: yes
• fullsize text box 1: no
• vertical orientation of the text box 1: oben
• outer distance in pixels for the vertical orientation of the text box 1: 20
• horizontal orientation of the text box 1: rechts
• outer distance in pixels for the horizontal orientation of the text box 1: 20
• inner distance (padding) of text box 1: 1rem
• background color text box 1: #191919
• hover background color text box 1: #980a88
• font color text box 1: #FFFFFF
• hover font color text box 1: #000000
• active round corners (border-radius) for text box 1: yes
• round corners (border-radius) in pixels for text box 1: 40
• content text box 1: Sale 14,95 € (mittig ausgerichtet über zwei Zeilen über den TinyMCE - Editor)
• show text box 2: yes
• fullsize text box 2: yes
• vertical orientation of the text box 2: unten
• outer distance in pixels for the vertical orientation of the text box 2: 20
• horizontal orientation of the text box 2: rechts
• outer distance in pixels for the horizontal orientation of the text box 2: 20
• inner distance (padding) of text box 2: 0.5rem 0.75rem 0.5rem 0.75rem
• background color text box 2: #191919
• hover background color text box 2: #980a88
• font color text box 2: #FFFFFF
• hocer font color text box 2: #FFFFFF
• active round corners (border-radius) for text box 2: yes
• round corners (border-radius) in pixels for text box 2: 5
• content text box 2: Zum Artikel (mittig ausgerichtet mit Verlinkung über den TinyMCE - Editor)