ThemeWare® 5.3.1

ThemeWare® 5.3.1 ist da! 🎉 Das neue Release umfasst folgende Änderungen:

Highlights

• Neue Animationen für das Hover-Bild in Produkt-Boxen
• Hover-Bild in Produkt-Boxen jetzt auch auf Smartphones und Tablets Feature-Request

Änderungen

• Kompatibilität mit Shopware 6.7.15 verbessert
• Neue Darstellungsart "integriert" für den Senden-Button des Newsletter-Widgets
• Neue Darstellungsart "integriert" für den Such-Button im Header
• Neue Darstellungsart "Pfeil (ohne Fläche)" für die Navigationspfeile der Slider
• Neue Hover-Farben für den Such-Button im Header
• Neue Konfiguration für den Abstand zwischen den Produkten im Produkt-Slider
• Neue Konfiguration für den Schatten der Elemente auf dem Produktbild
• Neue Konfiguration für den Schatten der Navigationspfeile der Slider
• Neue Konfiguration für die vertikale Position der Navigationspfeile im Produkt-Slider
• Neue Option: Navigationspfeile im Hero-Slider übernehmen die Konfiguration der Slider-Pfeile
• Anzeige des Cookie-Hinweises in den Modal-Darstellungen verbessert
• Barrierefreiheit der Überschriften im Footer verbessert
• Hover-Bild in Produkt-Boxen jetzt auch in der Listenansicht
• Hover-Effekte "Deckkraft reduzieren" und "Bild vergrößern" in Produkt-Boxen verfeinert
• Layout-Typ "volle Breite (randlos)" des Produktbilds jetzt auch in der Listenansicht
• Navigationspfeile im Produkt-Slider mit Überlauf verbessert
• "Produkte nach Abverkaufende abschwächen" jetzt auch in der Listenansicht
• Bugfix: Ausverkauft-Badge und Abschwächung gelten jetzt nur noch für Produkte ohne Varianten
• Bugfix: Hinweis zu den gesetzlichen Gewährleistungsrechten öffnet sich jetzt auch in One-Page-Checkout-Plugins
• Bugfix: Link zur Hersteller-Webseite funktioniert jetzt auch bei Webadressen, die mit www beginnen
• Bugfix: Screenreader lesen den Warenkorb-Button im Header jetzt vollständig vor
• Bugfix: Zahlen und Pfeile in der Paginierung sitzen jetzt mittig

Hinweise

• Cookie-Hinweis: Hülle "twt-cookie-permission-overlay-backdrop" der Modal-Darstellungen entfernt, eigene CSS-Anpassungen daran bitte prüfen
• Hover-Bild: neue Standard-Animation "überblenden mit Zoom" und Umschalter auf Touch-Geräten, bitte prüf deine Konfiguration
• Produkt-Box: Merkzettel- und Quickview-Button haben jetzt einen dezenten Schatten wie die Badges, einstellbar unter "Schatten (Elemente auf dem Produktbild)"
• Such-Button im Header färbt sich beim Hover jetzt in der Primärfarbe ein, bitte prüf deine Konfiguration

---

Highlights

Neue Animationen für das Hover-Bild in Produkt-Boxen

Mit dem Hover-Effekt "Hover-Bild (Zusatzfeld)" wechselt das Produktbild beim Überfahren mit der Maus zu einem zweiten Bild, zum Beispiel der Rückseite oder einem Detail. Wie dieser Wechsel aussieht, bestimmst du jetzt mit der neuen Einstellung "Animation (Hover-Bild)":

• überblenden: Das Cover-Bild blendet aus, das Hover-Bild blendet ein.
• überblenden mit Zoom: Wie überblenden, das Hover-Bild zoomt dabei sanft auf seine Größe. Das ist die neue Standard-Animation.
• aufdecken (seitlich): Eine Kante wandert von links nach rechts durch das Bild und legt das Hover-Bild frei.
• aufdecken (von unten): Wie seitlich, nur von unten nach oben.
• schieben: Das Hover-Bild schiebt das Cover-Bild seitlich hinaus.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild" => "Animation (Hover-Bild)"

Hover-Bild in Produkt-Boxen jetzt auch auf Smartphones und Tablets Feature-Request

Auf Basis eines Feature Requests zeigen die Produkt-Boxen das Hover-Bild jetzt auch auf Smartphones und Tablets. Dort gibt es keine Maus, die über ein Bild fahren kann. Damit deine Kunden das Hover-Bild trotzdem sehen, erscheint dort unter dem Produktbild eine Zeile mit zwei Punkten. Ein Tipp darauf wechselt zum Hover-Bild und wieder zurück, der gefüllte Punkt zeigt das aktuelle Bild. Ein Tipp auf das Bild selbst öffnet wie gewohnt die Produktseite.

Die Punkte erscheinen nur auf Touch-Geräten und nur bei Produkten, bei denen ein Hover-Bild gepflegt ist. Am Rechner mit Maus bleibt alles wie bisher. Das funktioniert im Listing, in der Listenansicht, im Kompakt-Modus und in Produkt-Slidern.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild" => "Hover-Bild auf Touch-Geräten"

---

Änderungen im Detail

Kompatibilität mit Shopware 6.7.15 verbessert

Ab Shopware 6.7.15 kann der Datenschutzhinweis unter Formularen zusätzlich auf die gesetzlichen Gewährleistungsrechte und die AGB verweisen. Bei der Newsletter-Anmeldung blendet Shopware diese Angaben aus, ThemeWare® übernimmt das für seine Newsletter-Formulare. Die Anpassung funktioniert mit Shopware 6.7.14 und 6.7.15.

Neue Darstellungsart "integriert" für den Such-Button im Header

Der Such-Button kann jetzt als runde Fläche innerhalb des Eingabefelds sitzen, statt rechts daran anzuschließen. Das Eingabefeld läuft dahinter weiter, seine Ecken folgen der Einstellung "Ecken". Gilt für die Darstellungsarten "Eingabefeld" und "Global-Suche".

Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration" => "Darstellungsart (Button)"

Neue Darstellungsart "integriert" für den Senden-Button des Newsletter-Widgets

Wie beim Such-Button im Header kann der Senden-Button des Newsletter-Widgets jetzt innerhalb des Eingabefelds sitzen, statt rechts daran anzuschließen. Das Eingabefeld läuft dahinter weiter, seine Ecken folgen der Einstellung "Ecken". Die Farben kommen wie bisher aus der Farbkonfiguration des Widgets.

Tab "Widgets" => Bereich "Newsletter" => Abschnitt "Basiskonfiguration" => "Darstellungsart (Button)"

Neue Darstellungsart "Pfeil (ohne Fläche)" für die Navigationspfeile der Slider

Neben "Rechteck" und "Quadrat/Kreis" gibt es für die Navigationspfeile jetzt die Darstellungsart "Pfeil (ohne Fläche)". Dabei ist nur das Pfeil-Icon zu sehen, Hintergrund, Rahmen und Schatten entfallen, auch wenn Farben dafür eingestellt sind. Die Einstellung gibt es global für alle Slider und einzeln für Bild-, Galerie- und Produkt-Slider.

Tab "Inhalt" => Bereich "Slider" => Abschnitt "Pfeile-Navigation" => "Darstellungsart"

Neue Hover-Farben für den Such-Button im Header

Für den Such-Button im Header lassen sich jetzt eigene Farben beim Überfahren mit der Maus festlegen: Hintergrund, Rahmen und Icon. Standardmäßig färben sich Hintergrund und Rahmen in einer abgedunkelten Primärfarbe, das Icon wird weiß. In den Varianten füllt sich der Button mit der Primärfarbe.

Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration" => "Hintergrundfarbe (Button) @hover", "Rahmenfarbe (Button) @hover", "Iconfarbe (Button) @hover"

Neue Konfiguration für den Abstand zwischen den Produkten im Produkt-Slider

Der Abstand zwischen den Produkt-Boxen im Produkt-Slider lässt sich jetzt einstellen. Standardmäßig bleibt es bei 30 Pixeln wie bisher. Mit einem kleineren Wert wirkt der Slider dichter, und es passen mehr Produkte nebeneinander.

Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Basiskonfiguration" => "Abstand zwischen den Produkten"

Neue Konfiguration für den Schatten der Elemente auf dem Produktbild

Alle Elemente auf dem Produktbild der Produkt-Box bekommen jetzt einen gemeinsamen Schatten: Badges, Merkzettel- und Quickview-Button sowie die Bewertung auf dem Bild. Zur Wahl stehen "kein", "dezent" und "deutlich", die Buttons werden beim Überfahren mit der Maus eine Stufe kräftiger.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild" => "Schatten (Elemente auf dem Produktbild)"

Neue Konfiguration für den Schatten der Navigationspfeile der Slider

Die Navigationspfeile der Slider können jetzt einen Schatten bekommen, "dezent" oder "deutlich". Beim Überfahren mit der Maus wird er eine Stufe kräftiger. So heben sich die Pfeile auch auf hellen Bildern gut ab. Der Schatten wirkt bei den Darstellungsarten "Rechteck" und "Quadrat/Kreis".

Tab "Inhalt" => Bereich "Slider" => Abschnitt "Pfeile-Navigation" => "Schatten"

Neue Konfiguration für die vertikale Position der Navigationspfeile im Produkt-Slider

Die Navigationspfeile im Produkt-Slider sitzen auf halber Höhe der Produkt-Box. Steht unter dem Bild viel Text, landen sie damit weit unten im Bild. Mit der neuen Einstellung rücken sie in Stufen von 50 % auf bis zu 30 % nach oben, zum Beispiel auf die Mitte des Produktbilds.

Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Basiskonfiguration" => "Vertikale Position (Navigationspfeile)"

Neue Option: Navigationspfeile im Hero-Slider übernehmen die Konfiguration der Slider-Pfeile

Der Hero-Slider hat eigene, weiße Pfeile ohne Fläche. Mit der neuen Option "inherit (Theme-Konfiguration)" übernimmt er stattdessen die Pfeil-Konfiguration der übrigen Slider: Darstellungsart, Farben, Ecken und Schatten. So sehen alle Slider im Shop einheitlich aus. Standardmäßig bleibt der Hero-Slider wie bisher.

Tab "Inhalt" => Bereich "Slider" => Abschnitt "ThemeWare® 'Hero-Slider' Pro" => "Navigationspfeile im Hero-Slider"

Anzeige des Cookie-Hinweises in den Modal-Darstellungen verbessert

In gewissen Konfigurationen erschien der Cookie-Hinweis in den Modal-Darstellungen mit Overlay erst nach einem Seitenwechsel. Jetzt wird das Modal über denselben Weg eingeblendet wie der Banner, sodass der Hinweis zuverlässig beim ersten Besuch erscheint.

Außerdem springt der Tastaturfokus beim Öffnen direkt in den Hinweis. Mit dem ersten Tabdruck erreichen deine Kunden den Link und die Buttons.

Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration" => "Darstellungsart"

Barrierefreiheit der Überschriften im Footer verbessert

Screenreader erkennen die Spaltenüberschriften im Footer jetzt als Überschriften. So können sich deine Kunden mit Screenreader schneller im Footer zurechtfinden und direkt zu einer Spalte springen, zum Beispiel zur Hotline oder zum Newsletter. Optisch ändert sich nichts. Für Profis: Die Überschriften der Footer-Elemente haben jetzt role="heading" und aria-level="2", wie bei Shopware ab 6.7.15.

Hover-Bild in Produkt-Boxen jetzt auch in der Listenansicht

In der Listenansicht erscheint das Hover-Bild jetzt wie in den anderen Darstellungen der Produkt-Box.

Hover-Effekte "Deckkraft reduzieren" und "Bild vergrößern" in Produkt-Boxen verfeinert

Beide Hover-Effekte wirken jetzt ruhiger und moderner. "Bild vergrößern" zoomt das Produktbild auf 108 % und läuft dabei sanft aus, "Deckkraft reduzieren" nimmt das Bild auf 80 % zurück. Ist in den Systemeinstellungen "Bewegung reduzieren" aktiv, entfällt der Zoom.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild" => "Hover-Effekt"

Layout-Typ "volle Breite (randlos)" des Produktbilds jetzt auch in der Listenansicht

Mit dem Layout-Typ "volle Breite (randlos)" liegt das Produktbild jetzt auch in der Listenansicht direkt am Rand der Produkt-Box, genau wie in den übrigen Darstellungen. Dafür hat die Produkt-Box der Listenansicht jetzt denselben Innenabstand wie die anderen Produkt-Boxen.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild" => "Layout-Typ"

Navigationspfeile im Produkt-Slider mit Überlauf verbessert

Ist eine Darstellungsart mit Überlauf aktiv, sitzen die Navigationspfeile jetzt auf der Kante zwischen dem letzten vollständig sichtbaren und dem angeschnittenen Produkt und ragen leicht darüber hinaus. Das zeigt deutlicher, dass es weitergeht. Auf kleineren Bildschirmen bleiben die Pfeile innerhalb des sichtbaren Bereichs. Bei der Darstellungsart "Pfeil (ohne Fläche)" sind die Pfeile nur leicht eingerückt. Gilt für die Element-Einstellung "innen" der Navigationspfeile und auch für die CSS-Klassen für einzelne CMS-Blöcke.

Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Design" => "Darstellungsart"

"Produkte nach Abverkaufende abschwächen" jetzt auch in der Listenansicht

Ausverkaufte Abverkaufsprodukte werden jetzt auch in der Listenansicht abgeschwächt, genau wie im Listing und in Produkt-Slidern.

Tab "Weiteres" => Bereich "Beta" => Abschnitt "Produkt-Box" => "Produkte nach Abverkaufende abschwächen"

Bugfix: Ausverkauft-Badge und Abschwächung gelten jetzt nur noch für Produkte ohne Varianten

Bei Variantenprodukten steht eine Produkt-Box im Listing oft für mehrere Varianten, kennt aber nur den Lagerbestand einer davon. Dadurch konnte ein Produkt als ausverkauft gekennzeichnet werden, obwohl andere Varianten noch lieferbar waren. Das Ausverkauft-Badge und die abgeschwächte Darstellung gelten deshalb jetzt nur noch für Produkte ohne Varianten.

Bugfix: Hinweis zu den gesetzlichen Gewährleistungsrechten öffnet sich jetzt auch in One-Page-Checkout-Plugins

Mit One-Page-Checkout-Plugins, zum Beispiel "One Page Checkout" von PremSoft, öffnet sich der Link zu den gesetzlichen Gewährleistungsrechten auf der Bestellbestätigung jetzt wieder zuverlässig. Für Profis: Das Fenster wird jetzt am Ende der Seite ausgegeben (Block base_pseudo_modal) und ist damit unabhängig vom Aufbau des Checkouts.

Bugfix: Link zur Hersteller-Webseite funktioniert jetzt auch bei Webadressen, die mit www beginnen

Ist beim Hersteller die Webseite nur als www-Adresse gepflegt, zum Beispiel www.hersteller.de, führt der Link "Hersteller-Webseite" jetzt zuverlässig zur Webseite des Herstellers. ThemeWare® ergänzt den fehlenden Anfang der Adresse dabei automatisch, genau wie Shopware. Außerdem nutzt der Link jetzt die übersetzte Webseite des Herstellers, und ohne gepflegte Webseite erscheint er gar nicht erst.

Tab "Produktseiten" => Bereich "Hersteller (in Tabs)" => Abschnitt "Weiterführende Hersteller-Links" => "Link "Hersteller-Webseite" anzeigen"

Bugfix: Screenreader lesen den Warenkorb-Button im Header jetzt vollständig vor

Screenreader lesen beim Warenkorb-Button im Header jetzt wieder die Anzahl der Artikel und den Gesamtbetrag vor.

Vielen Dank für den Hinweis.

Bugfix: Zahlen und Pfeile in der Paginierung sitzen jetzt mittig

Seit Shopware 6.7.13 saßen Seitenzahlen und Pfeile in der Darstellungsart "Buttons" zu weit oben in den Buttons, in der Darstellungsart "Navigation" die Pfeile etwas zu tief. Beides steht jetzt genau mittig.

Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Basiskonfiguration" => "Darstellungsart"

---

Hinweise

Cookie-Hinweis: Hülle "twt-cookie-permission-overlay-backdrop" der Modal-Darstellungen entfernt, eigene CSS-Anpassungen daran bitte prüfen

In den Modal-Darstellungen lag der Cookie-Hinweis bisher in einer eigenen Hülle mit der Klasse twt-cookie-permission-overlay-backdrop. Diese Hülle gibt es nicht mehr: Der Container .cookie-permission-container ist jetzt selbst der Hintergrund, die Box darin (.row) das Modal.

Hover-Bild: neue Standard-Animation "überblenden mit Zoom" und Umschalter auf Touch-Geräten, bitte prüf deine Konfiguration

Nutzt dein Shop den Hover-Effekt mit Hover-Bild, siehst du nach dem Update zwei Neuerungen: Das Bild wechselt mit der Animation "überblenden mit Zoom", und auf Smartphones und Tablets erscheint unter Produkten mit Hover-Bild die Zeile mit den zwei Punkten. Die Option im Hover-Effekt heißt jetzt "Hover-Bild (Zusatzfeld)".

Produkt-Box: Merkzettel- und Quickview-Button haben jetzt einen dezenten Schatten wie die Badges, einstellbar unter "Schatten (Elemente auf dem Produktbild)"

Die Badges in der Produkt-Box hatten schon immer einen dezenten Schatten. Mit der neuen Einstellung für alle Elemente auf dem Produktbild bekommen Merkzettel- und Quickview-Button denselben Schatten, damit alles einheitlich wirkt.

Such-Button im Header färbt sich beim Hover jetzt in der Primärfarbe ein, bitte prüf deine Konfiguration

Bisher wurde der Such-Button im Header beim Hover nur blasser. Jetzt nutzt er die neuen Hover-Farben: Ohne eigene Einstellung färben sich Fläche und Rahmen in einer abgedunkelten Primärfarbe, das Icon wird weiß. Das gilt für die Darstellungsarten "Eingabefeld", "Flyout-Suche" und "Global-Suche", die Vollbildsuche bleibt unverändert.

Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration" => "Hintergrundfarbe (Button) @hover", "Rahmenfarbe (Button) @hover", "Iconfarbe (Button) @hover"