ThemeWare® 3.1.0

ThemeWare® 3.1.0 für Shopware 6.6.1 ist da! 🎉 Der neue Release umfasst folgende Änderungen:

Highlights

• Konfiguration für die Breite der "Flyout-Suche" hinzugefügt
• Konfiguration für ein kompakteres Layout der "Produkt-Boxen" hinzugefügt
• Konfiguration "CSS-Klasse" für den Button im "Call-To-Action-Slide" hinzugefügt [Pro-Edition]
• Konfiguration "nofollow" zum "Ankündigungsbanner" hinzugefügt #FeatureRequest
• Konfiguration "nofollow" zum Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt #FeatureRequest
• Konfiguration "nofollow" zum Widget "Communities bzw. Social Media" hinzugefügt #FeatureRequest
• Konfiguration "Schlagschatten" im "Call-To-Action" hinzugefügt [Pro-Edition]
• Konfiguration "Schlagschatten" im "Call-To-Action-Slide" hinzugefügt [Pro-Edition]
• Konfiguration "Schlagschatten" im "Text-Slide" hinzugefügt [Pro-Edition]
• Konfiguration "Text-Ausrichtung" im "Call-To-Action-Slide" hinzugefügt [Pro-Edition]
• Konfiguration "Text-Ausrichtung" im "Text-Slide" hinzugefügt [Pro-Edition]
• Konfiguration zum Deaktivieren der Verlinkung der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt #FeatureRequest
• Konfiguration zum Deaktivieren vom CMS-Styling auf "Account"-Seiten hinzugefügt
• Konfiguration zum Deaktivieren vom CMS-Styling auf "Checkout"-Seiten hinzugefügt
• Konfiguration zum Deaktivieren vom CMS-Styling auf "Login"-Seiten hinzugefügt
• Verschiedene Verbesserungen im Bereich Pagespeed und Accessibility
• Zusätzliche Textbausteine für URLs der Links im Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt

Änderungen

• Kompatibilität mit Shopware 6.6.1.0 verbessert
• CMS-Block/-Element "Individueller Code (HTML/CSS/JS)" verbessert [Pro-Edition]
• Darstellung verschiedener Buttons verbessert
• Darstellung verschiedener Elemente vom "Wunschzettel" verbessert
• Die "Rabatt-Badge" nutzt nun landesspezifische Dezimaltrennzeichen #FeatureRequest
• Die Option "keine" der Konfiguration "HTML-Tag" fügt nun keine Formatierung mehr hinzu [Pro-Edition] #FeatureRequest
• Kleinere Template-Verbesserungen in verschiedenen CMS-Elementen [Pro-Edition]
• Kleinere Verbesserungen in der Theme-Konfiguration
• Lazy-Loading für Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt
• Lazy-Loading für Bilder in CMS-Elementen hinzugefügt [Pro-Edition]
• Lazy-Loading für Versand- und Zahlungsanbieter-Logos hinzugefügt
• Lighthouse-Verbesserungen im Footer
• Lighthouse-Verbesserungen im "Hero-Slider" [Pro-Edition]
• Neue Option "Standard" zur Konfiguration "HTML-Tag" hinzugefügt [Pro-Edition]
• Position der Zahlungs-/Versandarten wird jetzt in den Widgets berücksichtigt #FeatureRequest
• Responsives Verhalten der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" verbessert
• Template-Dateien vom Widget "Auszeichnungen, Siegel oder Zertifikate" aktualisiert
• Textbausteine im Widget "Auszeichnungen, Siegel oder Zertifikate" aktualisiert
• Twig "string quotation" überarbeitet
• URL-Encoding vom Link "Weitere Produkte" im Hersteller-Tab verbessert
• Verbesserungen (HTML und CSS) der Überschriften in verschiedenen CMS-Elementen [Pro]
• Vorschau vom CMS-Element "Bild & Text überlagernd" verbessert [Pro-Edition]
• Bugfix: "Teilen-Links", "Vorteile" und "Zahlungsanbieter-Logos" in der Buybox werden nur noch auf Produktseiten angezeigt
• Bugfix: Button vom "Call-To-Action" korrigiert [Pro-Edition]
• Bugfix: Darstellung vom Hersteller in Produkt-Boxen wurde korrigiert
• Bugfix: Konfiguration der "Eingabefeld-Suche" verbessert
• Bugfix: Konfiguration vom "Hero-Banner" korrigiert [Pro-Edition]
• Bugfix: SCSS-Fehler im Storefront-Watcher behoben
• Bugfix: Verschiedene Icons für Firefox-Browser optimiert

Hinweise

• Bitte nutze nun die neuen "title"-Textbausteine im Widget "Auszeichnungen, Siegel oder Zertifikate"
• Der Link vom "Ankündigungsbanner" ist nun "nofollow"
• Die "Flyout-Suche" hat neue Konfigurationsfelder für die Breite erhalten
• Links der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" sind nun "nofollow"
• Links der Logos im Widget "Communities bzw. Social Media" sind nun "nofollow"
• Prüfe deine Template-Anpassungen

---

Highlights

Konfiguration für die Breite der "Flyout-Suche" hinzugefügt

Die Breite der "Flyout-Suche" basierte bis dato auf der allgemeinen Konfiguration der "Input-Suche". Mit diesem Update erhält die "Flyout-Suche" eine eigene Konfiguration.

Du kannst nun konfigurieren, ob die Suche "Full-width" oder "Full-width-boxed" angezeigt wird. Innerhalb dieser allgemeinen Konfiguration kannst du noch eine spezifisch "maximale Breite" für das Eingabefeld definieren.

Konfiguration für ein kompakteres Layout der "Produkt-Boxen" hinzugefügt

Mit ThemeWare® 3.1 haben wir eine "Beta"-Konfiguration hinzugefügt mit welcher ein kompaktes Layout für Produkt-Boxen ausgewählt werden kann.

In diesem Layout werden diverse Elemente der Produkt-Boxen "resettet", es kann daher sein, dass diese Funktion nicht mit allen Erweiterungen Dritter harmoniert. Aus diesem Grund ist die Funktion noch in einer Beta-/Testphase. Teste Sie gerne einmal, wenn du magst.

Konfiguration "CSS-Klasse" für den Button im "Call-To-Action-Slide" hinzugefügt [Pro-Edition]

Eine Konfiguration für eine individuelle "CSS-Klasse" vom Button im "Call-To-Action-Slide" wurde hinzugefügt.

Konfiguration "nofollow" zum "Ankündigungsbanner" hinzugefügt #FeatureRequest

Verbesserungsvorschläge bezüglich einer "nofollow"-Konfiguration für bestimmte Elemente mit externen Links wurden umgesetzt. Der Link vom "Ankündigungsbanner" wird nun mit "nofollow" versehen.

Konfiguration "nofollow" zum Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt #FeatureRequest

Verbesserungsvorschläge bezüglich einer "nofollow"-Konfiguration für bestimmte Elemente mit externen Links wurden umgesetzt. Links der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate"-Widget werden nun mit "nofollow" versehen.

Konfiguration "nofollow" zum Widget "Communities bzw. Social Media" hinzugefügt #FeatureRequest

Verbesserungsvorschläge bezüglich einer "nofollow"-Konfiguration für bestimmte Elemente mit externen Links wurden umgesetzt. Links der Logos im "Communities bzw. Social Media"-Widget werden nun mit "nofollow" versehen.

Konfiguration "Schlagschatten" im "Call-To-Action" hinzugefügt [Pro-Edition]

Eine Konfiguration für einen "Schlagschatten" wurde zum "Call-To-Action" hinzugefügt.

Konfiguration "Schlagschatten" im "Call-To-Action-Slide" hinzugefügt [Pro-Edition]

Eine Konfiguration für einen "Schlagschatten" wurde zum "Call-To-Action-Slide" hinzugefügt.

Konfiguration "Schlagschatten" im "Text-Slide" hinzugefügt [Pro-Edition]

Eine Konfiguration für einen "Schlagschatten" wurde zum "Text-Slide" hinzugefügt.

Konfiguration "Text-Ausrichtung" im "Call-To-Action-Slide" hinzugefügt [Pro-Edition]

Eine Konfiguration für die "Text-Ausrichtung" wurde zum "Call-To-Action-Slide" hinzugefügt.

Konfiguration "Text-Ausrichtung" im "Text-Slide" hinzugefügt [Pro-Edition]

Eine Konfiguration für die "Text-Ausrichtung" wurde zum "Text-Slide" hinzugefügt.

Konfiguration zum Deaktivieren der Verlinkung der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt #FeatureRequest

Da sich URL-Felder im Shopware 6 Theme-Manager nicht mehr leeren lassen, wurde für jedes Bild im Widget "Auszeichnungen, Siegel oder Zertifikate" eine separate Konfiguration zum Deaktivieren der Verlinkung hinzugefügt.

Konfiguration zum Deaktivieren vom CMS-Styling auf "Account"-Seiten hinzugefügt

Eine Konfiguration zum Deaktivieren vom CMS-Styling auf "Account"-Seiten wurde hinzugefügt.

Konfiguration zum Deaktivieren vom CMS-Styling auf "Checkout"-Seiten hinzugefügt

Eine Konfiguration zum Deaktivieren vom CMS-Styling auf "Checkout"-Seiten wurde hinzugefügt.

Konfiguration zum Deaktivieren vom CMS-Styling auf "Login"-Seiten hinzugefügt

Eine Konfiguration zum Deaktivieren vom CMS-Styling auf "Login"-Seiten wurde hinzugefügt.

Zusätzliche Textbausteine für URLs der Links im Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt

Als alternative zur URL-Konfiguration für die Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" wurde ein separater URL-Textbaustein für jedes Bild ergänzt. Du kannst nun für jedes Bild auswählen ob die URL-Konfiguration oder der Textbaustein verwendet werden soll.

---

Änderungen im Detail

Kompatibilität mit Shopware 6.6.1.0 verbessert

Mit dem Update 3.1.0 wurde die Kompatibilität von ThemeWare® mit Shopware 6.6.1.0 verbessert. Dies betrifft die neue "Produktvideo"-Funktion, Änderungen an der Top-Bar und diverse Template-Änderungen.

CMS-Block/-Element "Individueller Code (HTML/CSS/JS)" verbessert [Pro-Edition]

Mit diesem Update wurde die CMS-Erweiterung "Individueller Code (HTML/CSS/JS)" verbessert. Dies betrifft die Funktionalität und Darstellung in der Administration.

Darstellung verschiedener Buttons verbessert

Die Darstellung verschiedener Buttons (z.B. Details-Button in Produktboxen) wurde verbessert.

Darstellung verschiedener Elemente vom "Wunschzettel" verbessert

Die Darstellung verschiedener Elemente auf dem "Wunschzettel" wurde verbessert.

Die "Rabatt-Badge" nutzt nun landesspezifische Dezimaltrennzeichen #FeatureRequest

Die "Rabatt-Badge" nutzt nun landesspezifische Dezimaltrennzeichen.

Die Option "keine" der Konfiguration "HTML-Tag" fügt nun keine Formatierung mehr hinzu [Pro-Edition] #FeatureRequest

Ein Verbesserungsvorschlag für die Option "keine" der Konfiguration "HTML-Tag" wurde mit diesem Update umgesetzt. Die Option "keine" fügt nun keine Formatierung mehr dem entsprechenden HTML-Element hinzu. Diese Änderung betrifft den "Text-Teaser", den "Text-Teaser (verziert)" und den "Parallax-Banner".

Möchtest du in diesen Elementen weiterhin das Standard-Styling nutzen, verwende in den entsprechenden CMS-Elementen die neue Option "Standard" in der Konfiguration "HTML-Tag".

Möchtest du deine Elemente nicht anpassen, kannst du die Standard-Formatierung auch mit folgendem CSS-Code anwenden:

// Text-Teaser
.twt-text-teaser-title { font-size: 20px !important; }

// Text-Teaser (verziert)
.twt-text-teaser-decorated-title { font-size: 20px !important; }

// Parallax-Banner
.twt-parallax-banner-title { font-size: 20px !important; }

Kleinere Template-Verbesserungen in verschiedenen CMS-Elementen [Pro-Edition]

Wir haben kleinere Template-Verbesserungen an den Storefront-Templates verschiedener CMS-Elemente vorgenommen. Diese sind aber nicht relevant für etwaige Template-Anpassungen.

Kleinere Verbesserungen in der Theme-Konfiguration

Auch in diesem Update gibt es wieder Verbesserungen in der Theme-Konfiguration.

Lazy-Loading für Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt

Attribut loading="lazy" den Bildern im Widget "Auszeichnungen, Siegel oder Zertifikate" hinzugefügt.

Lazy-Loading für Bilder in CMS-Elementen hinzugefügt [Pro-Edition]

Attribut loading="lazy" den Bildern in verschiedenen CMS-Elementen hinzugefügt.

Lazy-Loading für Versand- und Zahlungsanbieter-Logos hinzugefügt

Attribut loading="lazy" für Versand- und Zahlungsanbieter-Logos in den entsprechenden Widgets hinzugefügt.

Lighthouse-Verbesserungen im Footer

Attribut role="listitem" den verschiedenen Footer-Elementen hinzugefügt.

Lighthouse-Verbesserungen im "Hero-Slider" [Pro-Edition]

Attribut aria-label den Pfeilen der Hero-Slider hinzugefügt.

Neue Option "Standard" zur Konfiguration "HTML-Tag" hinzugefügt [Pro-Edition]

Wie oben beschrieben, fügt die Option "keine" der Konfiguration "HTML-Tag" nun keine Formatierung mehr dem entsprechenden HTML-Element hinzu. Die "alte" Standard-Formatierung der Option "keine" kannst du nun über die Option "Standard" anwenden.

Position der Zahlungs-/Versandarten wird jetzt in den Widgets berücksichtigt #FeatureRequest

Die konfigurierbare Position der Zahlungs-/Versandarten wird jetzt bei den Logos in den entsprechenden Widgets berücksichtigt. Die Einstellung der Position kannst du in den Shopware-Einstellungen ändern.

Responsives Verhalten der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" verbessert

Die Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" passen ihre Größe in kleineren Viewports besser an.

Bilder ohne Link sind nun, der Einheitlichkeit halber, mit deinem span-Container umschlossen.

Template-Dateien vom Widget "Auszeichnungen, Siegel oder Zertifikate" aktualisiert

Im Zuge der neuen Konfigurationsmöglichkeiten im Widget "Auszeichnungen, Siegel oder Zertifikate" wurden entsprechende Template-Änderungen vorgenommen.

Textbausteine im Widget "Auszeichnungen, Siegel oder Zertifikate" aktualisiert

Im Widget "Auszeichnungen, Siegel oder Zertifikate" gibt es nun zusätzlich zu den URLs in der Theme-Konfiguration alternative Textbausteine für URLs. Darüber hinaus wurden die Textbausteine des Title-Attributs der Bilder durch neue Textbausteine ersetzt.

Twig "string quotation" überarbeitet

In Shopware 6.6.1.0 wurde "string quotation" in diversen Twig-Dateien überarbeitet. ThemeWare® wurde diesbezüglich ebenfalls angepasst.

URL-Encoding vom Link "Weitere Produkte" im Hersteller-Tab verbessert

Leerzeichen im Link "Weitere Produkte" im Hersteller-Tab sollten nun besser kodiert werden.

Verbesserungen (HTML und CSS) der Überschriften in verschiedenen CMS-Elementen [Pro]

In diesem Update wurden Überschriften/Titel in verschiedenen CMS-Elementen verbessert. Der HTML-Aufbau wurde vereinheitlicht (Überschriften haben nun span-Elemente) und unnötige CSS-Styles wurden entfernt.

Vorschau vom CMS-Element "Bild & Text überlagernd" verbessert [Pro-Edition]

Die Vorschau vom Layout "Umgekehrt" des CMS-Elements "Bild & Text überlagernd" im Erlebniswelt-Editor wurde verbessert.

Bugfix: "Teilen-Links", "Vorteile" und "Zahlungsanbieter-Logos" in der Buybox werden nur noch auf Produktseiten angezeigt

Ein Fehler wurde behoben wodurch die "Teilen-Links", "Vorteile" und "Zahlungsanbieter-Logos" in der Buybox auch auf Landingpages angezeigt wurden.

Bugfix: Button vom "Call-To-Action" korrigiert [Pro-Edition]

Ein Fehler in der URL vom Button im "Call-To-Action" CMS-Element wurde korrigiert.

Bugfix: Darstellung vom Hersteller in Produkt-Boxen wurde korrigiert

Die Darstellung vom Hersteller in Produkt-Boxen wurde korrigiert. Es wird nun ein Platzhalter angezeigt wenn ein Produkt keinen Hersteller hat, damit die Produkt-Boxen eine einheitliche Größe haben.

Bugfix: Konfiguration der "Eingabefeld-Suche" verbessert

In seltenen Fällen hat die Konfiguration der Breite vom Eingabefeld der Suche im Header nicht korrekt funktioniert. Dies sollte mit diesem Update nun besser funktionieren.

Bugfix: Konfiguration vom "Hero-Banner" korrigiert [Pro-Edition]

Ein Fehler wurde behoben durch welchen die Konfiguration vom neuen "Hero-Banner" nicht geöffnet werden konnte.

Bugfix: SCSS-Fehler im Storefront-Watcher behoben

Ein SCSS-Fehler im Storefront-Watcher wurde behoben.

Bugfix: Verschiedene Icons für Firefox-Browser optimiert

Verschiedene Icons waren im Firefox-Browser leicht verschoben. Dies wurde in diesem Update optimiert.

---

Hinweise

Bitte nutze nun die neuen "title"-Textbausteine im Widget "Auszeichnungen, Siegel oder Zertifikate"

Es gibt neue Textbausteine für das Title-Attribut der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate". Die alten Textbausteine sollten übergangsweise noch angezeigt werden, wechsle dennoch sobald wie möglich auf die neuen Textbausteine.

• twt.widget.awards.customImages.title1 => twt.widget.awards.customImage1.title
• twt.widget.awards.customImages.title2 => twt.widget.awards.customImage2.title
• twt.widget.awards.customImages.title3 => twt.widget.awards.customImage3.title
• twt.widget.awards.customImages.title4 => twt.widget.awards.customImage4.title
• twt.widget.awards.customImages.title5 => twt.widget.awards.customImage5.title
• twt.widget.awards.customImages.title6 => twt.widget.awards.customImage6.title

Der Link vom "Ankündigungsbanner" ist nun "nofollow"

Der Link vom "Ankündigungsbanner" wird nun standardmäßig mit "nofollow" versehen. Du kannst dies mit der entsprechenden Konfiguration wieder ändern.

• Tab "Erweiterungen" => Bereich "Ankündigungsbanner (im Header)" => Abschnitt "Basiskonfiguration" => Link-Relation "nofollow"

Die "Flyout-Suche" hat neue Konfigurationsfelder für die Breite erhalten

Nutzt du die Darstellungsart "Flyout-Suche" im Header, prüfe bitte die neue Konfiguration. (siehe oben)

Links der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate" sind nun "nofollow"

Die Links der Bilder im Widget "Auszeichnungen, Siegel oder Zertifikate"-Widget werden nun standardmäßig mit "nofollow" versehen. Du kannst dies mit der entsprechenden Konfiguration wieder ändern.

• Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate" => Abschnitt "Benutzerdefiniertes Bild 1" => Link-Relation "nofollow"
• Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate" => Abschnitt "Benutzerdefiniertes Bild 2" => Link-Relation "nofollow"
• usw.

Links der Logos im "Communities bzw. Social Media" sind nun "nofollow"

Die Links der Logos im "Communities bzw. Social Media"-Widget werden nun standardmäßig mit "nofollow" versehen. Du kannst dies mit der entsprechenden Konfiguration wieder ändern.

• Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Basiskonfiguration" => Link-Relation "nofollow"

Prüfe deine Template-Anpassungen

Wie du oben schon gelesen hast, wurden quasi alle Template-Dateien geringfügig angepasst. Erwähnenswert sind hier die base.html.twig (views\storefront), die Storefront-Dateien der CMS-Elemente (views\storefront\element), die Footer-Elemente (views\storefront\themeware\footer-elements) und die Widgets (views\storefront\themeware\widgets).

Größere Änderungen betreffen die folgenden Dateien:

• views\storefront\component\product\card\box-image.html.twig
• views\storefront\component\product\card\box-minimal.html.twig
• views\storefront\component\product\card\box-standard.html.twig
• views\storefront\element\cms-element-twt-text-teaser-decorated.html.twig
• views\storefront\layout\header\top-bar.html.twig
• views\storefront\themeware\includes\twt-announcement-banner-include.html.twig
• views\storefront\themeware\widgets\twt-awards-include.html.twig
• views\storefront\themeware\widgets\twt-communities-include.html.twig

---

Soweit zu den Änderungen in ThemeWare® 3.1 für Shopware 6.6.1.

Viele Grüße, Sebastian und das Team von ThemeWare®