ThemeWare® 5.3.0 ist da! 🎉 Das neue Release umfasst folgende Änderungen:
Highlights
- 16 neue Iconsets mit wählbarem Stil hinzugefügt
- Neue Darstellungsarten für den Konfigurator auf der Produktdetailseite
- Neue Designs und Anordnungen für den minimalen Footer im Checkout
- Neue Designs und Anordnungen für den minimalen Header im Checkout
Änderungen
- Kompatibilität mit Shopware 6.7.14 verbessert
- Neue Buttonfarbe "Dunkel", z.B. für den Merkzettel-Button auf der Produktdetailseite
- Neue Einstellung für das Aussehen des Widerrufsbuttons
- Neue Hover-Effekte "Box erweitern" für die Buttons in Produkt-Boxen
- Barrierefreiheit des Rabatt-Badges verbessert
- Darstellung der Mengenauswahl in Produkt-Boxen verbessert
- Darstellung von Express-Kauf-Buttons wie PayPal auf der Produktdetailseite verbessert
- Hover-Effekt "Inhalt verschieben" in Produkt-Boxen verbessert
- Quickview im Listing und Checkout verbessert
- Icon-Buttons in Warenkorb, Checkout und auf der Produktdetailseite quadratisch dargestellt
- Verbesserte Thumbnail-Auswahl und schnelleres Laden der ersten Reihe im Listing
- Kompatibilitätsmodus der Top-Bar für Erweiterungen wie Shopware Commercial verbessert
- Bugfix: Externe Links in der Navigation ohne Icon und ohne "noopener noreferrer" in weiteren Sprachen
- Bugfix: Herz-Icon im Merkzettel-Button auf der Produktdetailseite saß zu tief
- Bugfix: Horizontaler Scrollbalken auf Seiten wie Warenkorb, Checkout und Kundenkonto auf kleinen Smartphones
- Bugfix: Kaufen-Button in der Listenansicht folgt den Einstellungen der Produkt-Box
- Bugfix: Leere Produkt-Tabs nach einer Bewertung, wenn die Bewertungen im Akkordeon-Element stehen
- Bugfix: Zurück-Button im minimalen Header auf kleinen Smartphones fehlerhaft dargestellt
Hinweise
- Anordnung "untereinander" im Buy-Widget greift nicht mehr bei der Kompatibilität "Standard"
- Icon-Einstellungen in den neuen Bereich "Icons" verschoben
- Twig-Templates für Icons umgebaut, eigene Anpassungen daran bitte prüfen
- Konfigurator: Darstellung und Farbeinstellungen angepasst, "Rahmen anzeigen" entfernt
- Minimaler Footer: Darstellung und Einstellungen angepasst, bitte prüf deine Konfiguration
- Minimaler Header: Darstellung und Einstellungen angepasst, bitte prüf deine Konfiguration
- Minimaler Header: "Fixiert" entfernt, Linie und Schatten jetzt über "Design"
Highlights
16 neue Iconsets mit wählbarem Stil hinzugefügt
Mit ThemeWare® 5.3.0 stehen dir 29 Iconsets zur Auswahl, 16 davon sind neu: Bootstrap Icons, Boxicons v3, Fluent UI System Icons, Font Awesome v7, Heroicons, Iconoir, Ionicons, Line Awesome, Lucide, Material Symbols, Phosphor, Simple Line Icons, Solar und Tabler, Boxicons v3 und Solar jeweils auch als Variation.
Ein Iconset tauscht die Symbole in deinem Shop aus, vom Warenkorb im Header bis zu den Pfeilen im Slider. Die neuen Sets decken fast alle Icons der Storefront ab, Simple Line Icons die gängigsten. Fehlt einem Set ein Motiv, zeichnet an dieser Stelle das Shopware-Icon, dein Shop bleibt also immer vollständig.
Die 16 neuen Iconsets im Überblick
Dazu kommen neue Einstellungen:
- Stil: automatisch so, wie das Iconset gezeichnet ist, oder gezielt Linie, Gefüllt, Duotone (Phosphor) oder Broken (Solar). Wenn du unsicher bist, bleib bei "Automatisch".
- Umfang: nur die Stellen, die ThemeWare® selbst setzt (Standard), die Essential Icons oder alle Storefront-Icons
- Strichstärke: in fünf Stufen für Lucide, Tabler, Heroicons, Iconoir und Solar
Tab "Layout" => Bereich "Icons"
Tipp: Damit ein neues Iconset überall im Shop sichtbar wird, stelle den Umfang auf "Essential Icons" oder "Alle Storefront-Icons".
Alle Iconsets und Einstellungen im Detail findest du im Handbuch: Icons und Iconsets im Bild.
- Ein Iconset tauscht die Zeichnungen hinter Shopwares Iconnamen aus. Neue Namen aus den Bibliotheken, etwa
fa-user, gibt es nicht. - Jedes getauschte Icon trägt die CSS-Klassen
twt-iconundtwt-iconset-<set>, dazu je nach tatsächlich gezeichnetem Stilis-regular,is-solid,is-duotoneoderis-broken. heartundstarbleiben in jedem Set der Umriss,heart-fillundstar-filldie gefüllte Fassung. So zeigen Merkzettel und Bewertungen ihren Zustand auch in anderen Erweiterungen weiter richtig an.
Neue Darstellungsarten für den Konfigurator auf der Produktdetailseite
Die Auswahl der Varianten, also Farben, Bilder und Texte wie Größen, kannst du jetzt in sechs Darstellungsarten gestalten: Kontur, Kontur mit Abstand, Kontur mit Fläche, Flächig, Flächig mit Unterstrich und Unterstrich. Die gewählte Darstellungsart gilt für alle drei Typen gleichzeitig und passt sich jeweils an, damit Farben, Bilder und Texte zusammen stimmig aussehen.
Alle Darstellungsarten im Vergleich
Dazu kommen neue Einstellungen:
- Rahmendicke: dünn, normal oder dick. Sie gilt für den Rahmen und für den Balken bei den Unterstrich-Varianten.
- Ecken: nicht abgerundet, abgerundete Ecken oder runde Ecken. Bei runden Ecken werden Farben und Bilder zu Kreisen und Texte zu Kapseln.
- Farbe (Innenlinie): eine feine Linie um Farben und Bilder in den Darstellungsarten ohne Rahmen, damit auch weiße Farben und freigestellte Bilder erkennbar bleiben.
Ecken: nicht abgerundet, abgerundete Ecken und runde Ecken
Außerdem zeigt jede Option beim Überfahren mit der Maus und bei der Bedienung per Tastatur ihren Namen als Tooltip, nicht verfügbare Optionen mit dem Zusatz "(Nicht verfügbar)". Die gewählte Option hebt sich auch dann deutlich ab, wenn ihre Farbe der Rahmenfarbe ähnelt.
Tab "Produktseiten" => Bereich "Konfigurator (in der Buybox)"
Tipp: Mit "Shopware-Standard" siehst du den Konfigurator unverändert wie in Shopware. Alle anderen Darstellungsarten nutzen die Einstellungen von ThemeWare®.
Neue Designs und Anordnungen für den minimalen Footer im Checkout
Im Checkout, also bei Adresse, Bestellübersicht und Abschluss, zeigt dein Shop einen schlanken Footer mit den Pflichtangaben. Den kannst du jetzt passend zum Rest deines Shops gestalten.
Minimaler Footer im Design "Fläche" mit Trennlinie
- Design: "Clean" ohne eigene Fläche oder "Fläche", jeweils wahlweise mit Linie oben
- Anordnung: "Untereinander" mit dem Widerrufsbutton über oder unter dem Service-Menü, oder "Nebeneinander" mit Service-Menü und Pflichtangaben links, Widerrufsbutton und Copyright rechts
- Trennlinie über dem Copyright und eigene Hover-Farben für die Links
Anordnung "Nebeneinander"
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)"
Tipp: Die Standardfarben sind auf die dunkle Standard-Fläche abgestimmt. Wählst du "Clean", passe die Text- und Linkfarben an.
Neue Designs und Anordnungen für den minimalen Header im Checkout
Auch der schlanke Header im Checkout lässt sich jetzt frei gestalten, damit sich deine Kunden ganz auf die Bestellung konzentrieren und deinen Shop trotzdem wiedererkennen.
Minimaler Header im Design "Fläche mit Schatten"
- Design: "Clean" ohne eigene Fläche oder "Fläche", jeweils wahlweise mit Linie oder Schatten
- Anordnung: "Standard" mit mittigem Text, "Gruppiert" mit dem Text direkt am Logo, beide auch mit farbiger Box, oder "Einfach" mit nur Logo und Button
- Logo: ein eigenes Logo für den Checkout, Breite und Höhe einstellbar. Bleibt das Feld leer, siehst du wie bisher dein Shop-Logo.
- Zurück-Button: mit Pfeil-Icon, als Button oder Button (Outline) in den Button-Farben deines Themes oder mit eigenen Farben. "Shopware (Standard)" zeigt den Button so, wie Shopware ihn ausliefert.
Anordnung "Gruppiert (Text am Logo, mit Trennlinie)"
Der Zurück-Button in allen Darstellungsarten und Buttonfarben
Tab "Header" => Bereich "Minimaler Header (im Checkout)"
- Neues Template
storefront/layout/header/header-minimal.html.twig,storefront/layout/footer/footer-minimal.html.twigwurde erweitert. - Design und Anordnung werden beim Kompilieren des Themes aufgelöst. Beim Zurück-Button gibt "Shopware (Standard)" Shopwares Block unverändert aus.
- Neue SCSS-Mixins
twt-button-style()undtwt-button-size-sm()inthemeware/abstract/mixins/_button.scss, neue Variable$twt-sticky-box-shadowfür den Schatten der Sticky-Navigation und des minimalen Headers.
Änderungen im Detail
Kompatibilität mit Shopware 6.7.14 verbessert
Shopware 6.7.14 verbessert die Barrierefreiheit in den Produkt-Boxen und bei den Produkt-Badges und trennt die Cookie-Zustimmung für Vimeo- und YouTube-Videos. ThemeWare® übernimmt diese Anpassungen.
Sichtbar wird das vor allem bei den Produkt-Videos: Gibst du im Cookie-Dialog den Eintrag "Vimeo-Video" frei, werden die Vimeo-Videos auf deinen Produktseiten darüber freigeschaltet. Beide Anbieter haben jetzt eine eigene Zustimmung.
Neue Buttonfarbe "Dunkel", z.B. für den Merkzettel-Button auf der Produktdetailseite
Neben Primär-Button, Sekundär-Button und hellem Button gibt es jetzt auch einen dunklen Button. Standardmäßig hat er dieselbe Farbe wie in Shopware. Du kannst ihn beim Merkzettel-Button auf der Produktdetailseite, beim Zurück-Button im Checkout und beim Widerrufsbutton auswählen.
Tab "Layout" => Bereich "Buttons" => Abschnitt "Farbkonfiguration"
Neue Einstellung für das Aussehen des Widerrufsbuttons
Den Widerrufsbutton kannst du jetzt überall einheitlich gestalten, in Widgets, Footer-Elementen und im Footer: als Button oder Button (Outline) in Hell, Primär, Sekundär oder Dunkel. Standardmäßig bleibt er so, wie Shopware ihn ausliefert.
Im Copyright-Footer und im Footer des Checkouts steht er standardmäßig dezent als Kontur in der Linkfarbe des Service-Menüs. Mit "vererbt (wie globale Einstellung)" übernimmt er dort die neue Einstellung.
Tab "Layout" => Bereich "Buttons" => Abschnitt "Widerrufsbutton"
Neue Hover-Effekte "Box erweitern" für die Buttons in Produkt-Boxen
Mit den drei neuen Hover-Effekten "fade in", "slide up" und "slide down" (jeweils "Box erweitern") erscheinen Kaufen-Button, Details-Button und Mengenauswahl erst, wenn deine Kunden mit der Maus über eine Produkt-Box fahren. Die Box wird dabei nach unten erweitert: Die Buttons erscheinen in einem Bereich unter der Box, der über der nächsten Reihe liegt. Nichts verschiebt sich, und Preis und Steuerhinweis bleiben immer sichtbar.
Die Buttons erscheinen unter der Box, Preis und Steuerhinweis bleiben sichtbar
"fade in" blendet den Bereich ein, bei "slide up" und "slide down" gleiten die Buttons darin zusätzlich von unten bzw. von oben an ihren Platz. Rahmen, Hintergrund und Schatten der Box werden fortgesetzt, sodass Box und Buttons wie aus einem Guss wirken.
Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Aktions-Buttons (Kaufen- / Details-Button)" => "Hover-Effekt (Kaufen-Button / Details-Button)"
Hinweis: In Produkt-Slidern haben die Effekte "Box erweitern" keine Wirkung, dort und auf Touch-Geräten bleiben die Buttons dauerhaft sichtbar. Unter dem Listing entsteht etwas zusätzlicher Abstand, damit die Buttons der letzten Reihe Platz haben.
- Neue Werte
6(fade in),7(slide up) und8(slide down) fürtwt-product-box-action-buy-btn-hover. - Der Effekt greift nur auf Geräten mit Maus (
(hover: hover) and (pointer: fine)), nur im Listing (.cms-listing-col) und nicht in der Listenansicht. - Per Tastatur klappt der Bereich über
:focus-withinauf, die Box zeigt dabei ihre Hover-Darstellung. Mitprefers-reduced-motionentfällt die Bewegung der Buttons.
Barrierefreiheit des Rabatt-Badges verbessert
Der Rabatt-Badge gibt Screenreadern jetzt den tatsächlichen Rabattwert weiter. In den Darstellungsarten mit sprechendem Text, etwa "-20 %" oder "20 % gespart", wird der Text so vorgelesen, wie er auch zu sehen ist.
Die Darstellungsart mit dem reinen Prozentzeichen behält ihre Textalternative "Rabatt", weil dort kein lesbarer Text steht.
Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Rabatt-Badge"
Darstellung der Mengenauswahl in Produkt-Boxen verbessert
Die Mengenauswahl in Produkt-Boxen bringt jetzt ihre eigene Anordnung mit, statt der Einstellung "Anordnung" der Produktseite zu folgen. Mengenauswahl und Kaufen-Button stehen damit in allen Darstellungsarten der Produkt-Box gleich, auch in der Listenansicht, die bisher ausgenommen war.
Mengenauswahl und Kaufen-Button in der Listenansicht
Wird die Produkt-Box schmal, etwa bei vielen Spalten, bleibt die Mengenauswahl als Einheit zusammen und nimmt die volle Breite ein; der Kaufen-Button rutscht dann mittig in die nächste Zeile.
Tab "Weiteres" => Bereich "Beta" => "Mengenauswahl (in Produkt-Boxen)"
Darstellung von Express-Kauf-Buttons wie PayPal auf der Produktdetailseite verbessert
Erweiterungen wie PayPal oder Amazon Pay ergänzen unter dem Kaufen-Button eigene Express-Kauf-Buttons. In der Anordnung "nebeneinander" stehen diese jetzt linksbündig unter Mengenauswahl und Kaufen-Button und sind höchstens so breit wie der Kaufen-Button maximal wird. In gewissen Konfigurationen konnten sie bisher leicht versetzt zum Kaufen-Button stehen.
In der Anordnung "untereinander" schließen die Express-Kauf-Buttons wie gewohnt bündig an den Kaufen-Button an.
Tab "Produktseiten" => Bereich "Buybox" => Abschnitt "Buy-Widget (Mengenauswahl und Kaufen-Button)" => "Anordnung"
Hover-Effekt "Inhalt verschieben" in Produkt-Boxen verbessert
Beim Hover-Effekt "slide up (Inhalt verschieben)" rutschen Bild und Text der Produkt-Box nach oben und machen Platz für die Buttons. Der Abstand zwischen Bild und Text bleibt dabei jetzt erhalten, in beiden Bild-Darstellungen der Produkt-Box.
Ist die Mengenauswahl aktiv, passt sich der Effekt jetzt auch an schmale Produkt-Boxen an: Der Kaufen-Button wird dort quadratisch, damit Mengenauswahl und Button in einer Zeile bleiben. In sehr schmalen Boxen sind die Buttons dauerhaft sichtbar. So bleiben Preis und Steuerhinweis in jeder Spaltenanzahl frei.
Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Aktions-Buttons (Kaufen- / Details-Button)" => "Hover-Effekt (Kaufen-Button / Details-Button)"
Tipp: Zeigst du Express-Buttons wie PayPal in der Produkt-Box, nutze "kein Effekt" oder einen der Effekte "Box erweitern".
Quickview im Listing und Checkout verbessert
Die Schnellansicht im Listing und das Artikel-Fenster im Warenkorb, das sich über das Bild oder die Bezeichnung einer Position öffnet, greifen in Shopware auf dieselbe Funktion zu. Damit jede Ansicht optimal zu ihrem Einsatzort passt, sind beide jetzt getrennt: Die Schnellansicht im Listing nutzt das ThemeWare®-Layout, das Artikel-Fenster im Warenkorb die Shopware-Darstellung. Du musst dafür nichts umstellen.
Gleichzeitig haben wir die Darstellung in beiden Ansichten aufgeräumt. Ein Hersteller-Logo steht jetzt über dem Produktnamen, ein Herstellername darunter. Produktname und Hersteller werden nicht mehr unterstrichen, die Produktnummer bekommt mehr Abstand, und der Kopfbereich des Fensters nimmt weniger Platz weg.
Icon-Buttons in Warenkorb, Checkout und auf der Produktdetailseite quadratisch dargestellt
Buttons, die nur ein Icon zeigen, etwa zum Entfernen einer Position, für die Mengenauswahl oder zum Hinzufügen eines Aktionscodes, sind jetzt quadratisch.
Verbesserte Thumbnail-Auswahl und schnelleres Laden der ersten Reihe im Listing
Auf Kategorie- und Suchseiten wählt der Browser die Thumbnails der Produktbilder jetzt noch genauer passend zur Darstellungsgröße aus. In gewissen Konfigurationen, etwa im einspaltigen Listing auf Smartphones, konnte bisher eine größere Datei als nötig geladen werden. Das spart Daten und beschleunigt die Seite, ohne dass die Bilder an Schärfe verlieren.
Außerdem lädt die erste Reihe der Produktbilder jetzt sofort und das erste Bild mit Vorrang, denn es ist beim Aufruf der Seite meist das größte sichtbare Element.
Du musst dafür nichts umstellen. Die verbesserte Thumbnail-Auswahl hängt an der Einstellung "Responsive Bilder verbessern", die standardmäßig aktiv ist.
Tab "Weiteres" => Bereich "Beta" => Abschnitt "Produkt-Box" => Konfiguration "Responsive Bilder verbessern"
sizesmeldet je Breakpoint eine Obergrenze aus der Spaltenanzahl (100vw / Bilder pro Reihe), in einer boxed Section ab der Container-Breite gedeckelt. Bilder ab der zweiten Reihe bekommen zusätzlichsizes="auto", aktuelle Browser messen die Breite dann selbst.- Bei
object-fit: coverwird das Seitenverhältnis des Bildes berücksichtigt (max(…, Höhe der Bild-Box × Seitenverhältnis)),autoentfällt dort. - Die erste Reihe wird mit
loading="eager"geladen, das erste Bild mitfetchpriority="high". Alle Produktbilder bekommenwidthundheightaus den Bilddaten. - Betroffen ist
storefront/component/product/card/box-standard.html.twig. Produkt-Slider und Cross-Selling behalten Shopwaressizes.
Kompatibilitätsmodus der Top-Bar für Erweiterungen wie Shopware Commercial verbessert
Mit ThemeWare® 5.2.0 kam der Wert ThemeWare® (Plugin-kompatibel) für Erweiterungen, die die Top-Bar übernehmen, etwa Shopware Commercial mit dem B2B-Kontextwechsel. Hotline, Service-Menü und die Gestaltung von ThemeWare® bleiben damit erhalten, die Inhalte der Erweiterung werden eingebettet.
Jetzt greifen in diesem Modus auch die Konfigurationen "Sprachauswahl anzeigen" und "Währungsauswahl anzeigen" der Top-Bar. Bisher brachte die Erweiterung ihre eigene Sprach- und Währungsauswahl mit, deine Einstellungen dazu hatten dann keine Wirkung. Jetzt zeigt die Top-Bar Sprach- und Währungsauswahl genau so, wie du es in ThemeWare® eingestellt hast, und der B2B-Kontextwechsel bleibt daneben sichtbar. Das gilt auch, wenn die Top-Bar in die USP-Bar verschoben ist.
Nutzt du den Wert bereits, musst du nichts umstellen.
Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Top-Bar"
- Der Inhaltsblock
layout_header_top_bar_innerwird in diesem Modus mitheader.languages.countundheader.currencies.count= 1 aufgerufen. Erweiterungen, die ihre Sprach- und Währungsauswahl daran knüpfen, lassen sie dadurch weg, andere Inhalte wie der B2B-Kontextwechsel bleiben erhalten. - Sprach- und Währungsauswahl bindet ThemeWare® direkt über
layout/header/actions/language-widget.html.twigundcurrency-widget.html.twigein, nicht über die Blöckelayout_header_top_bar_languageundlayout_header_top_bar_currency, die eine Erweiterung überschreiben kann. - Betroffen ist
storefront/layout/header/top-bar.html.twig.
Bugfix: Externe Links in der Navigation ohne Icon und ohne "noopener noreferrer" in weiteren Sprachen
Kategorien vom Typ "Link" mit einer externen Adresse wurden in weiteren Sprachen nicht als externe Links erkannt, wenn der Link nur in der Standardsprache hinterlegt war. Das hatte zwei Folgen:
- Öffnet der Link in einem neuen Tab, fehlte das Attribut
rel="noopener noreferrer". Die aufgerufene Seite konnte dadurch sehen, dass der Besucher aus deinem Shop kam. Das betraf die gesamte Top-Navigation, also Flyout, Dropdown, Flyout-Leiste, Flyout-Sidebar und Flyout-Teaser. - Im Flyout fehlte das Icon für externe Links.
Jetzt greift beides in jeder Sprache. Das Icon blendest du ein unter "Weiteres => Beta => Top-Navigation Flyout => Icon für externe Links anzeigen".
- Der Link-Typ einer Kategorie ist übersetzbar. Die Templates lesen ihn jetzt über
category.translated.linkTypeund fallen damit auf die Standardsprache zurück. - Ob der Link in einem neuen Tab öffnet, hat Shopware schon vorher sprachunabhängig ermittelt. Moderne Browser setzen bei
target="_blank"von sich ausnoopener, aber keinnoreferrer. - Betroffen sind
layout/navbar/categories.html.twigsowie Dropdown, Flyout-Leiste, Flyout-Sidebar und Flyout-Teaser unterthemeware/extensions/twt-top-navigation-*.html.twig.
Bugfix: Herz-Icon im Merkzettel-Button auf der Produktdetailseite saß zu tief
In den Darstellungsarten "Button" und "Button (Outline)" sitzt das Herz jetzt mittig neben dem Text.
Bugfix: Horizontaler Scrollbalken auf Seiten wie Warenkorb, Checkout und Kundenkonto auf kleinen Smartphones
Unter 576 px Bildschirmbreite ragte der Inhalt dieser Seiten um einen Pixel über den Rand, und der Browser zeigte einen horizontalen Scrollbalken. Das ist behoben.
Bugfix: Kaufen-Button in der Listenansicht folgt den Einstellungen der Produkt-Box
Die Darstellungsart "ThemeWare® Listenansicht (Beta)" gehört zu den Produkt-Boxen und richtet sich beim Kaufen-Button nach deren Einstellungen, wie die übrigen Darstellungsarten auch. Ist die Mengenauswahl aktiv, zeigt der Button entsprechend nur das Icon.
Tab "Kategorieseiten" => Bereich "Produkt-Box"
Bugfix: Leere Produkt-Tabs nach einer Bewertung, wenn die Bewertungen im Akkordeon-Element stehen
Zeigt dein Produktseiten-Layout die Beschreibung in den Tabs und die Bewertungen im Element "Produktbeschreibung und -bewertungen (Accordion)", blieb der Inhaltsbereich der Tabs leer, wenn die Produktseite mit der Bestätigung einer abgegebenen Bewertung aufgerufen wurde. Jetzt ist dort wie gewohnt der erste Tab geöffnet.
Stehen die Bewertungen in den Tabs, öffnet sich in diesem Fall zuverlässig der Tab "Bewertungen", und es ist immer nur ein Tab-Inhalt gleichzeitig sichtbar.
- Betroffen ist
storefront/element/cms-element-product-description-reviews.html.twig. - Nur wenn die Seite nach einer Bewertung mit
?successaufgerufen wird, geben Link und Inhalt der Beschreibung und der Bewertungen das Markup von ThemeWare® aus. In allen anderen Fällen bleibt es bei Shopwares Blöcken überparent().
Bugfix: Zurück-Button im minimalen Header auf kleinen Smartphones fehlerhaft dargestellt
Auf schmalen Smartphones wurde der Button "Zurück zum Shop" zu einem schmalen Kasten mit einem Anführungszeichen als Pfeil, der Text lief unsichtbar dahinter weiter. Jetzt zeigt der Button dort ein Pfeil-Icon. Der Text bleibt für Screenreader erhalten.
Der Zurück-Button auf dem Smartphone
Hinweise
Anordnung "untereinander" im Buy-Widget greift nicht mehr bei der Kompatibilität "Standard"
Mit der Kompatibilität "Standard" zeigt dein Shop das Buy-Widget, also Mengenauswahl und Kaufen-Button, so, wie Shopware es ausliefert. Das gilt jetzt auch für die Anordnung: Die Einstellung "untereinander" wirkt nur noch mit der Kompatibilität "ThemeWare®". So bekommst du mit "Standard" zuverlässig Shopwares Darstellung, etwa wenn eine andere Erweiterung das Kaufformular anpasst.
Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Produktseiten" => "Buy-Widget (Mengenauswahl + Warenkorb-Button)"
Das betrifft dich, wenn du "Standard" und gleichzeitig die Anordnung "untereinander" eingestellt hast: Mengenauswahl und Kaufen-Button stehen nach dem Update wieder nebeneinander. Möchtest du "untereinander" behalten, stelle die Kompatibilität auf "ThemeWare®".
Icon-Einstellungen in den neuen Bereich "Icons" verschoben
Die Einstellungen zu den Icons lagen bisher im Bereich "Typografie". Sie haben jetzt einen eigenen Bereich:
Tab "Layout" => Bereich "Icons"
Die gefüllten Varianten der bestehenden Iconsets sind keine eigenen Einträge mehr. Aus "Boxicons solid", "Boxicons solid (Variation)", "ThemeWare® One solid" und "ThemeWare® Six solid" wird das jeweilige Iconset mit dem Stil "Gefüllt". "Boxicons" heißt jetzt "Boxicons v2". Deine bisherige Auswahl wird beim Update automatisch umgestellt, du musst nichts tun.
In der Cloud Edition wird die gespeicherte Auswahl nicht umgestellt. Dein Shop zeigt trotzdem weiter dieselben Icons. Wählst du das Iconset dort neu aus, stelle bei "Stil" zusätzlich "Gefüllt" ein.
Twig-Templates für Icons umgebaut, eigene Anpassungen daran bitte prüfen
Für die neuen Iconsets haben wir die Icon-Ausgabe neu aufgebaut. Betroffen sind zwei Templates:
storefront/utilities/icon.html.twigwurde komplett neu geschrieben.storefront/themeware/twt-iconsets.html.twigwird nicht mehr verwendet und ist nur noch eine leere Datei. Jedes Iconset hat jetzt eine eigene Datei unterstorefront/themeware/iconsets/.
Hast du eines dieser Templates in einem eigenen Plugin oder Theme überschrieben oder erweitert, prüfe deine Anpassung nach dem Update.
Konfigurator: Darstellung und Farbeinstellungen angepasst, "Rahmen anzeigen" entfernt
Mit den neuen Darstellungsarten ändert sich auch der bisherige Stil. Deine gewählte Darstellungsart bleibt beim Update erhalten, sieht aber in einigen Details anders aus. Bitte wirf nach dem Update einen Blick auf eine Produktseite mit Varianten.
Tab "Produktseiten" => Bereich "Konfigurator (in der Buybox)"
| Was | Vorher | Nachher |
|---|---|---|
| Name der Darstellungsart | "ThemeWare®" | "Kontur mit Abstand", die Einstellung bleibt erhalten |
| Name beim Überfahren mit der Maus | Standard-Tooltip des Browsers | gestalteter Tooltip, auch per Tastatur |
| "Textoption" => "Rahmen anzeigen" | Text-Optionen wahlweise ohne Rahmen | entfernt, Text-Optionen haben in "Kontur mit Abstand" immer einen Rahmen |
| Hintergrundfarbe, @hover und @disabled | Standard "transparent", wirkte bei den Text-Optionen | Standard #e9ecef, @hover #d3d9df, wirkt nur noch bei "Kontur mit Fläche", "Flächig" und "Flächig mit Unterstrich" |
| Hintergrundfarbe @active und Textfarbe @active | Standard "transparent" und #2b3136, galten für die gewählte Option |
Standard Primärfarbe und #ffffff, wirken nur noch bei "Flächig" für die gewählte Text-Option |
Das betrifft dich, wenn du "Rahmen anzeigen" auf "nein" gestellt oder eine eigene Hintergrundfarbe bzw. Textfarbe @active eingetragen hast. Deine gespeicherten Werte bleiben erhalten, wirken in "Kontur mit Abstand" aber nicht mehr. Für Text-Optionen ohne Rahmen wähle "Unterstrich" oder "Flächig mit Unterstrich", für eine farbige Fläche "Kontur mit Fläche" oder "Flächig".
Minimaler Footer: Darstellung und Einstellungen angepasst, bitte prüf deine Konfiguration
Mit den neuen Designs ändert sich auch die Standard-Darstellung des Footers im Checkout. Bitte wirf nach dem Update einen Blick auf die Adress-Seite im Checkout.
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)"
| Was | Vorher | Nachher |
|---|---|---|
| Widerrufsbutton | gefüllter Primär-Button über dem Service-Menü | Kontur in der Linkfarbe des Service-Menüs, unter dem Menü |
| Leeres Service-Menü | leerer Abstand im Footer | kein Abstand |
| "Rahmenfarbe oben (Copyright)" | ohne Wirkung | heißt jetzt "Farbe der Trennlinie" und wirkt mit "Trennlinie" => "mit Linie" |
Minimaler Header: Darstellung und Einstellungen angepasst, bitte prüf deine Konfiguration
Auch der Header im Checkout sieht nach dem Update etwas anders aus. Bitte wirf einen Blick auf die Adress-Seite im Checkout.
Tab "Header" => Bereich "Minimaler Header (im Checkout)"
| Was | Vorher | Nachher |
|---|---|---|
| Text | linksbündig in der Mitte | zentriert, auf Tablets schon ab 768 px statt 992 px sichtbar |
| Logo | immer 140 px breit, auch kleinere Logos | höchstens 140 px breit (einstellbar), kleinere Logos in Originalgröße |
| Höhe | feste Höhe | Mindesthöhe, der Header wächst mit seinem Inhalt |
Hinweis: Deine gespeicherten Farben bleiben erhalten, sie stehen jetzt beim jeweiligen Baustein. Die Farben des Zurück-Buttons heißen "(Zurück-Button)" statt "(Home-Button)" und wirken bei der Buttonfarbe "individuelle Färbung", dem Standard.
Minimaler Header: "Fixiert" entfernt, Linie und Schatten jetzt über "Design"
Die Einstellung "Fixiert" hat keine Funktion mehr, der minimale Header scrollt jetzt immer mit. Du findest sie unter "Weiteres" => "Veraltet".
Mit "Fixiert" bekam der Header bisher automatisch eine Linie und einen Schatten. Beides stellst du jetzt über das Design ein: "Fläche mit Linie" oder "Fläche mit Schatten".
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Design"