ThemeWare® 5.5.0

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

Highlights

• Topseller lassen sich im Listing jetzt mit Rahmen, Verlauf, Hintergrundfarbe und Leuchten hervorheben

Änderungen

• Abgeschwächte Produkt-Boxen sind jetzt auch für Screenreader als ausverkauft gekennzeichnet
• Das Abschwächen von Produkt-Boxen nach Abverkaufende lässt sich jetzt auch für Varianten aktivieren Feature-Request
• Der Abstand der Elemente auf dem Produktbild lässt sich jetzt einstellen
• Der Lagerbestand in den Produkt-Spezifikationen lässt sich jetzt auch bei 0 anzeigen
• Die Ausverkauft-Badge lässt sich jetzt auch bei Varianten im Listing anzeigen Feature-Request
• Die Buttons "In den Warenkorb" und "Details" in der Listenansicht sind jetzt kompakter
• Die individuelle Ankündigung hat jetzt auch auf der Seite "Zahlung abschließen" Abstand zur Überschrift
• Die Produkt-Bewertung mit dem Inhalt "Zahl" zeigt ohne Bewertungen jetzt "0" und lässt sich auch dekoriert darstellen
• Die Produkt-Box lässt sich jetzt auch ohne Rahmen darstellen
• Die Storefront ist robuster gegenüber angepassten Templates und Erweiterungen
• Formulare im ThemeWare® CMS-Styling haben jetzt rundum gleichmäßigen Abstand zum Rahmen
• Formularfelder lassen sich jetzt auch ohne Rahmen darstellen, und die Mengenauswahl (-/+) hat eigene Einstellungen
• Vorbereitung auf Shopware 6.8: Das Theme bindet seine Services jetzt per PHP statt XML ein Pro
• Vorbereitung auf Shopware 6.8: Das Theme ermittelt die Sprache jetzt ohne die Sprachen des Verkaufskanals
• Vorbereitung auf Shopware 6.8: Das Theme erzeugt Kategorie-Links jetzt ohne die Twig-Funktion category_url
• Vorbereitung auf Shopware 6.8: Das Theme legt Zusatzfelder jetzt über die neue Shopware-Methode an
• Vorbereitung auf Shopware 6.8: Das Theme meldet seinen Cookie jetzt per Event statt per Cookie-Provider an Pro
• Vorbereitung auf Shopware 6.8: Das Theme stylt Seiten jetzt über die neue Shopware-Methode
• Vorbereitung auf Shopware 6.8: Der veraltete Twig-Filter spaceless wurde entfernt
• Vorbereitung auf Shopware 6.8: Die veralteten JavaScript-Helper DomAccess und Iterator wurden entfernt
• Bugfix: Die Listenansicht zeigt die Mengenauswahl jetzt nur noch, wenn sie aktiviert ist
• Bugfix: Die Top-Navigation markiert die aktive Kategorie jetzt auch mit aktivem HTTP-Cache zuverlässig
• Bugfix: Herstellerlogos im SVG-Format werden im Hersteller-Tab jetzt auch auf größeren Bildschirmen angezeigt
• Bugfix: Mit aktiviertem Erlebniswelt-Header bleibt der Smartphone-Header jetzt auch in gewissen Breiten beim Scrollen oben

Hinweise

• Eigene Zusatzfelder in den Zusatzfeld-Sets von ThemeWare® liegen nach dem Update in einem eigenen Set Pro
• Die Konfiguration zum Abschwächen von Produkt-Boxen nach Abverkaufende hat einen neuen Platz in der Theme-Konfiguration
• Eigenes CSS mit der Klasse twt-is-sold bitte prüfen, das leere Element vor der Produkt-Box entfällt

---

Highlights

Topseller lassen sich im Listing jetzt mit Rahmen, Verlauf, Hintergrundfarbe und Leuchten hervorheben

Produkte, die du in Shopware mit "Produkt hervorheben" markierst, fallen im Listing jetzt sofort auf. Im neuen Block Kategorieseiten => Produkt-Box 'Topseller' wählst du einen Rahmen in deiner Rahmenfarbe, einen Rahmen mit Verlauf oder einen Verlauf, der sich langsam um die Box dreht. Dazu kannst du eine eigene Hintergrundfarbe und ein Leuchten rund um die Box aktivieren. Beim Hover wechseln Rahmen, Leuchten und Hintergrund in ihre @hover-Farben.

Die Hervorhebung wirkt in der Kategorie, in der Listenansicht und in Produkt-Slidern, auch wenn das Topseller-Badge ausgeblendet ist. Jede ThemeWare®-Variante bringt passende Farben mit, du kannst sie aber frei anpassen. Ist auf dem Gerät "Bewegung reduzieren" eingestellt, steht der Verlauf still. Mehr dazu im Handbuch.

---

Änderungen im Detail

Abgeschwächte Produkt-Boxen sind jetzt auch für Screenreader als ausverkauft gekennzeichnet

Ist "Produkt-Box nach Abverkaufende abschwächen" aktiv und die Ausverkauft-Badge ausgeblendet, war bisher nur optisch erkennbar, dass ein Produkt ausverkauft ist. Die Produkt-Box enthält jetzt zusätzlich den Hinweis "Ausverkauft" für Screenreader. So erfahren auch Nutzer mit Screenreader, warum ein Produkt abgeschwächt ist.

Das Abschwächen von Produkt-Boxen nach Abverkaufende lässt sich jetzt auch für Varianten aktivieren Feature-Request

Bisher wurden nur Produkte ohne Varianten nach Abverkaufende abgeschwächt, weil eine Produkt-Box für mehrere Varianten stehen kann. Mit der neuen Konfiguration "Abschwächen bei Varianten" werden auf Wunsch auch Varianten abgeschwächt: Ist die angezeigte Variante ausverkauft, wird die Box abgeschwächt, auch wenn andere Varianten noch verfügbar sind. Boxen, die das Hauptprodukt zeigen, bleiben ausgenommen. Du findest die Konfiguration unter Kategorieseiten => Produkt-Box => Abschwächen => Abschwächen bei Varianten. Die Funktion ist noch in der Beta-Phase.

Der Abstand der Elemente auf dem Produktbild lässt sich jetzt einstellen

Badges, Merkzettel- und Quickview-Button sowie die Bewertung auf dem Bild halten einen gemeinsamen Abstand zum Bildrand. Den kannst du jetzt einstellen: "automatisch" wie bisher (16px bei Bildern in voller Breite, sonst 8px), "groß" (16px), "mittel" (8px) oder "klein" (4px). Ein kleinerer Abstand passt zum Beispiel zu eckigen Badges oder zu Bildern ohne eigene Hintergrundfläche, bei denen die Elemente sonst zu weit eingerückt wirken. Du findest die Konfiguration unter Kategorieseiten => Produkt-Box => Produktbild => Abstand (Elemente auf dem Produktbild).

Der Lagerbestand in den Produkt-Spezifikationen lässt sich jetzt auch bei 0 anzeigen

Für "Lagerbestand anzeigen" und "Verfügbaren Bestand anzeigen" gibt es den neuen Wert "immer anzeigen". Damit erscheint der Bestand auch, wenn er bei 0 liegt, so wie beim Lagerbestand-Badge im Modus "Lagerbestand immer anzeigen". Mit "anzeigen" wird der Bestand weiterhin nur gezeigt, solange er größer als 0 ist. Du findest die Konfiguration unter Produktseiten => Produkt-Spezifikationen (in der Buybox) => Abschnitt: Lieferbarkeit.

Die Ausverkauft-Badge lässt sich jetzt auch bei Varianten im Listing anzeigen Feature-Request

Bisher zeigte das Listing die Ausverkauft-Badge nur bei Produkten ohne Varianten. Mit der neuen Konfiguration "Ausverkauft-Badge bei Varianten" erscheint sie auf Wunsch auch bei Varianten: Ist die angezeigte Variante ausverkauft, bekommt die Box die Badge, auch wenn andere Varianten noch verfügbar sind. Boxen, die das Hauptprodukt zeigen, bleiben ausgenommen. Du findest die Konfiguration unter Kategorieseiten => Produkt-Badges (in der Produkt-Box) => Badge: Ausverkauft-Badge => Ausverkauft-Badge bei Varianten. Die Funktion ist noch in der Beta-Phase.

Die Buttons "In den Warenkorb" und "Details" in der Listenansicht sind jetzt kompakter

In der Listenansicht waren die Buttons "In den Warenkorb" und "Details" bis zu 360px breit und wirkten neben dem Produkttext sehr lang. Sie sind jetzt höchstens 240px breit. Die Mengenauswahl behält ihre Breite.

Die individuelle Ankündigung hat jetzt auch auf der Seite "Zahlung abschließen" Abstand zur Überschrift

Über die Seite "Zahlung abschließen" können Kunden die Zahlungsart einer bestehenden Bestellung ändern, z. B. nach einer abgebrochenen Zahlung. Zeigst du die individuelle Ankündigung im Checkout an, erscheint sie auch dort. Bisher stieß sie auf dieser Seite direkt an die Überschrift. Jetzt hat sie denselben Abstand wie beim Bestellabschluss, und dort ist der Abstand zur Überschrift zudem etwas größer geworden.

Die Produkt-Bewertung mit dem Inhalt "Zahl" zeigt ohne Bewertungen jetzt "0" und lässt sich auch dekoriert darstellen

Zeigt die Produkt-Box die Bewertung als Zahl, steht bei Produkten ohne Bewertungen jetzt "0" statt "0,0". Sobald es Bewertungen gibt, erscheint der Durchschnitt wie gewohnt mit einer Nachkommastelle, zum Beispiel "4,5". Außerdem flankiert die Darstellungsart "Dekoriert" jetzt auch die Zahl mit Linien, nicht nur die Sterne. Die Einstellungen findest du unter Kategorieseiten => Produkt-Box => Produkt-Bewertung.

Die Produkt-Box lässt sich jetzt auch ohne Rahmen darstellen

Neben "Rahmenfarbe" und "Schlagschatten" gibt es für die Darstellungsart der Produkt-Box den neuen Wert "Clean". Die Box hat dann weder Rahmen noch Schatten und hebt sich nur über ihre Hintergrundfarbe ab, die Rahmenfarben wirken nicht. Das passt zu einem cleanen Listing. Du findest die Konfiguration unter Kategorieseiten => Produkt-Box => Design => Darstellungsart.

Formulare im ThemeWare® CMS-Styling haben jetzt rundum gleichmäßigen Abstand zum Rahmen

Fügst du in einer Erlebniswelt den Shopware-Block "Formular" ein, z. B. für ein Kontakt- oder Newsletterformular, hat er in gewissen Konfigurationen des ThemeWare® CMS-Stylings jetzt auch links und rechts 20px Abstand zum Rahmen, genau wie oben und unten. Die Felder reichen so nicht mehr bis an den Rand der Box. Hast du am Block einen eigenen Abstand eingestellt, bleibt dieser unverändert.

Die Storefront ist robuster gegenüber angepassten Templates und Erweiterungen

Passt du Templates per Twig an oder überschreibt eine Erweiterung Teile des Shops, arbeiten die Funktionen des Themes jetzt auch dann zuverlässig, wenn ein erwartetes Element fehlt oder anders aufgebaut ist. Das betrifft unter anderem den Ankündigungs-Banner, den Countdown-Banner, den Hero-Slider, das Floating-Widget und die Sticky Top-Navigation. Außerdem lässt sich der Ankündigungs-Banner jetzt auch schließen, wenn der Browser das Speichern von Website-Daten blockiert. Er erscheint dann beim nächsten Seitenaufruf wieder.

Formularfelder lassen sich jetzt auch ohne Rahmen darstellen, und die Mengenauswahl (-/+) hat eigene Einstellungen

Für die Darstellungsart der Formularfelder gibt es neben "Standard" und "unterstrichen" den neuen Wert "Clean". Eingabe- und Auswahlfelder erscheinen dann als farbige Fläche ohne Rahmen und heben sich nur über ihre Hintergrundfarben ab. Neu ist außerdem die "Hintergrundfarbe @hover", damit Formularfelder beim Überfahren mit der Maus sichtbar reagieren.

Die Mengenauswahl (-/+) hat einen eigenen Abschnitt bekommen: Hintergrund- und Icon-Farbe der Buttons, jeweils auch @hover, sowie die neue Einstellung "Trennung". Mit "getrennt" zeigt die Darstellungsart "Standard" Linien zwischen Buttons und Eingabefeld, "Clean" und "unterstrichen" einen kleinen Abstand. Die Einstellungen gelten überall, wo eine Mengenauswahl erscheint: Produktseite, Quickview, Produkt-Box und Warenkorb.

Zudem haben Formularfelder einen etwas kräftigeren Hintergrund und einen besser lesbaren Platzhalter, Auswahlfelder sind so hoch wie Eingabefelder, und Textfarbe und Schriftgröße des Labels stehen jetzt im eigenen Abschnitt "Label". Du findest alles unter Layout => Formulare.

Vorbereitung auf Shopware 6.8: Das Theme bindet seine Services jetzt per PHP statt XML ein Pro

Shopware 6.8 lädt keine XML-Dateien für Services und Routen mehr. ThemeWare® registriert seine Services (z. B. die Daten der Erlebniswelt-Elemente, die Cookie-Einstellungen und die News im Theme-Manager) und Routen deshalb jetzt in PHP-Dateien, wie es Shopware vorsieht. Das funktioniert auch in allen 6.7-Versionen, im Shop ändert sich nichts.

Vorbereitung auf Shopware 6.8: Das Theme ermittelt die Sprache jetzt ohne die Sprachen des Verkaufskanals

Ab Shopware 6.8 stehen die Sprachen des Verkaufskanals im Shop nicht mehr zur Verfügung. Einige Elemente hätten dann immer die englische Variante gezeigt, z. B. das SSL-Siegel ("Pay safely" statt "Sicher bezahlen"). ThemeWare® ermittelt die Sprache für das SSL-Siegel, die Bewertungen, das Rabatt-Badge, das Social Proofing, die Produkteigenschaften und die Zahlenformate jetzt so wie Shopware selbst. Das funktioniert auch in allen 6.7-Versionen, im Shop ändert sich nichts.

Vorbereitung auf Shopware 6.8: Das Theme erzeugt Kategorie-Links jetzt ohne die Twig-Funktion category_url

Shopware 6.8 entfernt die Twig-Funktion category_url. ThemeWare® erzeugt die Links der Kategorie in den Produkteigenschaften und der Kategorie-Teaser (Pro-Edition) jetzt so, wie Shopware es vorsieht. Das funktioniert auch in allen 6.7-Versionen, die Links und das Öffnen in einem neuen Tab bleiben gleich.

Vorbereitung auf Shopware 6.8: Das Theme legt Zusatzfelder jetzt über die neue Shopware-Methode an

Shopware legt Zusatzfelder seit 6.7.13 über eine eigene Datei an, die bisherige Definition im App-Manifest entfällt mit 6.8. ThemeWare® nutzt diese Datei jetzt für die Pro- und die Cloud-Edition gemeinsam. Bestehende Zusatzfelder und ihre Inhalte bleiben beim Update erhalten. In der Cloud-Edition sind die Hilfetexte der Zusatzfelder jetzt genauso formatiert wie in der Pro-Edition.

Vorbereitung auf Shopware 6.8: Das Theme meldet seinen Cookie jetzt per Event statt per Cookie-Provider an Pro

Shopware 6.8 entfernt die bisherige Schnittstelle, über die Erweiterungen eigene Cookies in den Cookie-Einstellungen anmelden (Cookie-Provider). ThemeWare® trägt seinen Cookie "Local Storage" unter "Komfortfunktionen" deshalb jetzt über das Event ein, das Shopware dafür vorsieht. Das funktioniert auch in allen 6.7-Versionen, die Cookie-Einstellungen im Shop bleiben gleich.

Vorbereitung auf Shopware 6.8: Das Theme stylt Seiten jetzt über die neue Shopware-Methode

Shopware entfernt mit 6.8 die Body-Klassen is-ctl-* und is-act-*. ThemeWare® gestaltet Konto, Login, Registrierung, Checkout, Startseite, Kategorien, Produktseite, Suche und Merkzettel jetzt über die Klassen is-active-route-*, die Shopware schon heute ausgibt. Im Shop ändert sich nichts.

Vorbereitung auf Shopware 6.8: Der veraltete Twig-Filter spaceless wurde entfernt

Shopware 6.8 aktualisiert Twig auf Version 4, dort entfällt der veraltete Filter spaceless. Wo er für die Darstellung nötig war, z. B. bei den Sprach- und Währungs-Buttons in der Top-Bar oder den Produkt-Badges, übernehmen das jetzt Twig selbst bzw. CSS. Zudem haben die Buttons für Sprache, Währung und Servicemenü in der USP-Bar (z. B. im Theme Modern) jetzt dieselben Abstände wie in der Top-Bar.

Vorbereitung auf Shopware 6.8: Die veralteten JavaScript-Helper DomAccess und Iterator wurden entfernt

Shopware 6.8 entfernt die JavaScript-Helper DomAccess und Iterator und empfiehlt stattdessen die nativen Methoden des Browsers. ThemeWare® nutzt diese jetzt im Sticky-Header, in der Top-Navigation, im Ankündigungs-Banner, im Parallax-Banner und bei den Scroll-Animationen. Im Shop ändert sich nichts.

Bugfix: Die Listenansicht zeigt die Mengenauswahl jetzt nur noch, wenn sie aktiviert ist

Die Listenansicht zeigte die Mengenauswahl in gewissen Konfigurationen auch dann, wenn sie unter Weiteres => Beta => Mengenauswahl (in Produkt-Boxen) nicht aktiviert war. Jetzt verhält sie sich wie das Raster: Ohne Mengenauswahl erscheint der normale Button "In den Warenkorb".

Bugfix: Die Top-Navigation markiert die aktive Kategorie jetzt auch mit aktivem HTTP-Cache zuverlässig

Mit aktivem HTTP-Cache konnte die Top-Navigation in gewissen Fällen eine andere Kategorie als die aktuelle hervorheben, weil der Header zwischen den Seiten zwischengespeichert wird. ThemeWare® ermittelt den Pfad der aktiven Kategorie jetzt bei jedem Seitenaufruf neu, so wie Shopware selbst. Das bereitet zugleich auf Shopware 6.8 vor.

Bugfix: Herstellerlogos im SVG-Format werden im Hersteller-Tab jetzt auch auf größeren Bildschirmen angezeigt

SVG-Logos, die keine eigene Breite und Höhe mitbringen, waren im Hersteller-Tab der Produktseite ab Tablet-Breite nicht zu sehen. Sie erscheinen jetzt in derselben Größe wie andere Herstellerlogos. Logos im PNG- oder JPG-Format bleiben unverändert.

Bugfix: Mit aktiviertem Erlebniswelt-Header bleibt der Smartphone-Header jetzt auch in gewissen Breiten beim Scrollen oben

Auf Smartphones überlagert der Erlebniswelt-Header die Erlebniswelt bewusst nicht, dort gilt der normale Smartphone-Header. Dieser bleibt jetzt auch in Breiten knapp unter 576px beim Scrollen oben am Bildschirmrand, wie in allen anderen Smartphone-Breiten.

---

Hinweise

Eigene Zusatzfelder in den Zusatzfeld-Sets von ThemeWare® liegen nach dem Update in einem eigenen Set Pro

Mit der Umstellung auf die neue Shopware-Methode gleicht Shopware die Zusatzfeld-Sets von ThemeWare® bei jedem Update mit der Auslieferung ab und entfernt dabei alle Felder, die nicht dazugehören. Damit deine eigenen Felder in diesen Sets nicht verloren gehen, verschiebt das Update sie vorher in ein eigenes Set, z.B. "Eigene Felder Produkte". Feldnamen und gespeicherte Werte bleiben gleich. Was in welchem Fall passiert und wie du ein entferntes Feld wiederherstellst, findest du im Handbuch.

Die Konfiguration zum Abschwächen von Produkt-Boxen nach Abverkaufende hat einen neuen Platz in der Theme-Konfiguration

Die Konfiguration "Produkt-Box nach Abverkaufende abschwächen" (vorher "Produkte nach Abverkaufende abschwächen") und ihre Darstellungsart stehen nicht mehr unter Weiteres => Beta => Produkt-Box, sondern unter Kategorieseiten => Produkt-Box => Abschwächen. Deine Einstellungen bleiben erhalten.

Eigenes CSS mit der Klasse twt-is-sold bitte prüfen, das leere Element vor der Produkt-Box entfällt

Bisher stand vor jeder abgeschwächten Produkt-Box ein leeres Element mit der Klasse twt-is-sold, das CSS sprach die Box über .twt-is-sold + .product-box an. Die Kennzeichnung sitzt jetzt in der Produkt-Box selbst, abgeschwächt wird über .product-box:has(.twt-is-sold). Nutzt du in eigenem CSS den Selektor .twt-is-sold + .product-box, stelle ihn bitte auf .product-box:has(.twt-is-sold) um.