ThemeWare® 3.0

In diesem Beitrag findest du Informationen zu Änderungen in ThemeWare® 3.0. Mehr Informationen zu Shopware 6.6 findest du in einem separaten Beitrag.

---

Versionen und Kompatibilität

Mit ThemeWare® 3.0 haben wir eine neue Major-Version von ThemeWare® veröffentlicht. Abgesehen von den "Breaking changes" in Shopware 6.6, die ThemeWare® 2.x und 3.x grundlegend unterscheiden, hoffen wir so auch, die Zuordnung der kompatiblen ThemeWare® und Shopware-Versionen zu vereinfachen:

ThemeWare® für Shopware 6

• ThemeWare® 1.x für Shopware 6.4.x
• ThemeWare® 2.x für Shopware 6.5.x
• ThemeWare® 3.x für Shopware 6.6.x

Für Shopware 6.6 wird ThemeWare® 3.x benötigt. Nutzt du Shopware 6.5, ist ThemeWare® 2.x die richtige Version für deinen Shop.

• ThemeWare® 3.x ist kompatibel mit Shopware 6.6 und nicht mit Shopware 6.5
• ThemeWare® 2.x ist kompatibel mit Shopware 6.5 und nicht mit Shopware 6.6

---

ThemeWare® Update

Das ThemeWare® Update unterscheidet sich im Grunde genommen nicht von bisherigen Updates. Besonders ist lediglich der Umstand, dass du für ThemeWare® 3.x Shopware 6.6 benötigst.

Führst du das ThemeWare® Update im Rahmen eines Updates von Shopware 6.5 auf Shopware 6.6 durch, beachte bitte unseren begleitenden News-Artikel zu "Shopware 6.6".

Nach dem Update

Prüfe deinen Shop auf JavaScript-Fehler

In Shopware 6.6 wurde der Bereich Storefront-JavaScript erneut umgekrempelt. Viele Fehler in der Storefront entstehen tatsächlich durch JavaScript-Fehler. Prüfe daher alle Erweiterungen (Plugins/Apps), ob diese kompatibel mit Shopware 6.6 sind und fehlerfrei funktionieren. Aktiviere die jeweiligen Erweiterungen erst, wenn du sicher bist, dass beides der Fall ist.

Prüfe deine individuellen Anpassungen

Auch im Bereich Twig und SCSS gab es Änderungen in Shopware 6.6. Stelle sicher, dass du etwaige Änderungen auch in deine individuellen Anpassungen übernimmst.

Nutzt du individuellen HTML-/CSS-Code (z.B. in Erlebniswelten), prüfe diesen ebenfalls auf etwaige Änderungen.

Schritte zur Fehlereingrenzung bzw. Fehlerbehebung

1. Leere sowohl den Shopware-Cache, als auch den Browser-Cache einmal vollständig.
2. Aktualisiere alle Erweiterungen in deinem Shop auf die neueste bzw. eine kompatible Version.
3. Prüfe ob der Fehler auch im Standard-Theme von Shopware auftritt.
4. Deaktiviere alle Erweiterungen in deinem Shop, um zu prüfen, ob diese Fehler verursachen.
5. Deaktiviere alle individuellen Anpassungen, um zu prüfen, ob diese Fehler verursachen.
6. Deaktiviere den ThemeWare® "Experten-Modus" um zu prüfen ob dein individueller Code Fehler verursacht.
7. Entferne sonstigen individuellen Code (HTML, CSS etc.), um zu prüfen, ob dieser Fehler verursacht.

---

ThemeWare® 3.0

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

Highlights

• Kompatibilität mit Shopware 6.6 hergestellt
• CMS-Block "Zwei Spalten, 3-9 (auf Handys getauscht)" hinzugefügt #FeatureRequest
• CMS-Block "Zwei Spalten, 4-8 (auf Handys getauscht)" hinzugefügt #FeatureRequest
• CMS-Block "Zwei Spalten, 5-7 (auf Handys getauscht)" hinzugefügt #FeatureRequest
• CMS-Block "Zwei Spalten, 7-5 (auf Handys getauscht)" hinzugefügt #FeatureRequest
• CMS-Block "Zwei Spalten, 8-4 (auf Handys getauscht)" hinzugefügt #FeatureRequest
• CMS-Block "Zwei Spalten, 9-3 (auf Handys getauscht)" hinzugefügt #FeatureRequest
• CMS-Block/-Element "Individueller Code (HTML/CSS/JS)" hinzugefügt [Pro-Edition] #FeatureRequest
• CMS-Element "Hero-Banner" hinzugefügt [Pro-Edition]
• CMS-Element "Parallax-Banner" hinzugefügt [Pro-Edition]
• Konfiguration für den HTML-Tag vom Untertitel im "Text-Teaser" hinzugefügt [Pro-Edition]
• Konfigurationsfelder für "CSS-Klassen" zu diversen CMS-Elementen hinzugefügt [Pro-Edition]

Änderungen

• Kleinerer Verbesserungen in der Theme-Konfiguration [Pro-Edition]
• Konfiguration für einen Parallax-Effekt im "Image-Banner" hinzugefügt [Pro-Edition] #FeatureRequest
• Shopware 6.6: Asynchrones JavaScript mit dynamischen Importen in der Storefront ermöglicht
• Shopware 6.6: Alle CMS-Blöcke zu Vue 3 migriert [Pro-Edition]
• Shopware 6.6: Alle CMS-Elemente zu Vue 3 migriert [Pro-Edition]
• Shopware 6.6: Breadcrumb-Anpassungen in Shopware 6.6 übernommen
• Shopware 6.6: Entfernung der all.js aus der Storefront berücksichtigt
• Shopware 6.6: SCSS-Änderungen in Shopware 6.6 übernommen
• Shopware 6.6: Twig-Anpassungen in Shopware 6.6 übernommen
• Shopware 6.6: Verbesserte Theme-Konfiguration aktualisiert [Pro-Edition]
• Einige Twig-Blöcke hinzugefügt oder umbenannt
• Links in CMS-Elementen sind zur besseren Erkennbarkeit nun unterstrichen [Pro-Edition] #FeatureRequest
• Veralteter SCSS- und Twig-Code wurde entfernt
• Verbesserte Konfiguration aller CMS-Elemente [Pro-Edition]
• Verbessertes Styling der Konfiguration von CMS-Elementen [Pro-Edition]
• Vorschau einiger CMS-Elemente verbessert [Pro-Edition]
• Bugfix: CSS-Spaltenabstandsklasssen in CMS-Spaltenblöcken korrigiert [Cloud-Edition]
• Bugfix: Layout "Umgekehrt" vom CMS-Element "Bild & Text überlagernd" korrigiert [Pro-Edition]

Hinweise

• Die "klassische" Produktseite wurde in Shopware 6.6 durch das Standard-CMS-Layout ersetzt.
• Die "klassische" Breadcrumb wurde in Shopware 6.6 durch die CMS-Breadcrumb ersetzt.

---

Highlights

Kompatibilität mit Shopware 6.6 hergestellt

ThemeWare® 3.0 ist kompatible mit Shopware 6.6. Alle nötigen Änderungen wurden entsprechend umgesetzt und getestet.

CMS-Block "Zwei Spalten, 3-9 (auf Handys getauscht)" hinzugefügt #FeatureRequest

Ein Verbesserungsvorschlag bezüglich weiterer zweispaltiger CMS-Blöcke, deren Anordnung in mobilen Viewports getauscht wird, wurde umgesetzt.

CMS-Block "Zwei Spalten, 4-8 (auf Handys getauscht)" hinzugefügt #FeatureRequest

Ein Verbesserungsvorschlag bezüglich weiterer zweispaltiger CMS-Blöcke, deren Anordnung in mobilen Viewports getauscht wird, wurde umgesetzt.

CMS-Block "Zwei Spalten, 5-7 (auf Handys getauscht)" hinzugefügt #FeatureRequest

Ein Verbesserungsvorschlag bezüglich weiterer zweispaltiger CMS-Blöcke, deren Anordnung in mobilen Viewports getauscht wird, wurde umgesetzt.

CMS-Block "Zwei Spalten, 7-5 (auf Handys getauscht)" hinzugefügt #FeatureRequest

Ein Verbesserungsvorschlag bezüglich weiterer zweispaltiger CMS-Blöcke, deren Anordnung in mobilen Viewports getauscht wird, wurde umgesetzt.

CMS-Block "Zwei Spalten, 8-4 (auf Handys getauscht)" hinzugefügt #FeatureRequest

Ein Verbesserungsvorschlag bezüglich weiterer zweispaltiger CMS-Blöcke, deren Anordnung in mobilen Viewports getauscht wird, wurde umgesetzt.

CMS-Block "Zwei Spalten, 9-3 (auf Handys getauscht)" hinzugefügt #FeatureRequest

Ein Verbesserungsvorschlag bezüglich weiterer zweispaltiger CMS-Blöcke, deren Anordnung in mobilen Viewports getauscht wird, wurde umgesetzt.

CMS-Block/-Element "Individueller Code (HTML/CSS/JS)" hinzugefügt [Pro-Edition] #FeatureRequest

Mit dieser neuen CMS-Erweiterung der ThemeWare® Pro-Edition kannst du deinen Erlebniswelten "individuellen Code" hinzufügen. Diese Erweiterung richtet sich an Profis bzw. erfahrene Anwender und ist noch in der Testphase.

CMS-Element "Parallax-Banner" hinzugefügt [Pro-Edition]

Der "Parallax-Banner" für die ThemeWare® Pro-Edition ist ein neues CMS-Element, welches zwischen dem "Image-Banner" und dem neuen "Hero-Banner" angesiedelt ist. Der "Parallax-Banner" entstand aus dem Verbesserungsvorschlag einen "Parallax-Effekt" im "Image-Banner" zu ermöglichen. Der "Parallax-Effekt" wird durch ein neu entwickeltes JavaScript-Plugin gesteuert und wirkt besonders gut mit überlagernden Text.

CMS-Element "Hero-Banner" hinzugefügt [Pro-Edition]

Wer einen Banner mit noch mehr Konfigurationsmöglichkeiten wünscht, wird vom neuen "Hero-Banner" in der Pro-Edition begeistert sein. Dieser bietet noch mehr Gestaltungsmöglichkeiten und ist extrem konfigurierbar, ähnlich wie der "Call-To-Action"-Teaser.

Konfiguration für den HTML-Tag vom Untertitel im "Text-Teaser" hinzugefügt [Pro-Edition]

Der HTML-Tag bzw. die entsprechende CSS-Klasse kann jetzt auch für den "Untertitel" im "Text-Teaser" konfiguriert werden.

Konfigurationsfelder für "CSS-Klassen" zu diversen CMS-Elementen hinzugefügt [Pro-Edition]

Im Rahmen der Vereinheitlichung der CMS-Konfiguration aller CMS-Elemente wurden Konfigurationsfelder für "CSS-Klassen" in weiteren CMS-Elementen ergänzt.

---

Änderungen im Detail

Kleinerer Verbesserungen in der Theme-Konfiguration [Pro-Edition]

Wie in jedem größeren Update gibt es auch in ThemeWare® 3.0 wieder Verbesserungen in der Theme-Konfiguration.

Konfiguration für einen Parallax-Effekt im "Image-Banner" hinzugefügt [Pro-Edition] #FeatureRequest

Der Parallax-Effekt gehört zu den meistgefragten Effekten. Dieser Effekt erzeugt den Eindruck von Tiefe. Mit dem neuen "Parallax-Banner" haben wir dafür ein neues JavaScript-Plugin entwickelt. Du kannst diesen Effekt auch im "Image-Banner" aktivieren.

Shopware 6.6: Asynchrones JavaScript mit dynamischen Importen in der Storefront ermöglicht

Durch die Einführung asynchronen Ladens von JavaScript und die Ermöglichung dynamischer Importe soll die Performance der Storefront in Shopware 6.6 erhöht werden. Die ThemeWare® JavaScript-Plugins wurden diesbezüglich angepasst.

Shopware 6.6: Alle CMS-Blöcke zu Vue 3 migriert [Pro-Edition]

Alle Erweiterungen, welche die Administration über das Plugin-System verändern, müssen überarbeitet werden, da Shopware mit Version 6.6 von Vue.js 2 auf Vue.js 3 wechselt. Dies betrifft unter anderem die CMS-Blöcke der ThemeWare® Pro-Edition.

Shopware 6.6: Alle CMS-Elemente zu Vue 3 migriert [Pro-Edition]

Alle Erweiterungen, welche die Administration über das Plugin-System verändern, müssen überarbeitet werden, da Shopware mit Version 6.6 von Vue.js 2 auf Vue.js 3 wechselt. Dies betrifft unter anderem die CMS-Elemente der ThemeWare® Pro-Edition.

Shopware 6.6: Breadcrumb-Anpassungen in Shopware 6.6 übernommen

Die "klassische" Breadcrumb wurde in Shopware 6.6 abgeschafft. Nun wird auf allen Seiten die CMS-Breadcrumb genutzt.

Shopware 6.6: Entfernung der all.js aus der Storefront berücksichtigt

Anstatt alle JavaScript-Plugins synchron zu importieren, bietet Shopware 6.6 einen asynchronen Ansatz an. Die ThemeWare® JavaScript-Plugin-Struktur wurde diesbezüglich angepasst.

Shopware 6.6: SCSS-Änderungen in Shopware 6.6 übernommen

SCSS-Änderungen in Shopware 6.6 wurden in ThemeWare® 3.0 berücksichtigt.

Shopware 6.6: Twig-Anpassungen in Shopware 6.6 übernommen

Twig-Änderungen in Shopware 6.6 wurden in ThemeWare® 3.0 berücksichtigt.

Shopware 6.6: Verbesserte Theme-Konfiguration aktualisiert [Pro-Edition]

Anpassungen in der Administration bzw. der Theme-Konfiguration wurden von Vue.js 2 auf Vue.js 3 migriert. Dies betrifft die ThemeWare® Pro-Edition.

Einige Twig-Blöcke hinzugefügt oder umbenannt

In einigen Template-Dateien wurden Twig-Blöcke ergänzt, beispielsweise um Icons. Zudem wurden folgende Twig-Blöcke umbenannt:

• views\storefront\themeware\footer-elements\twt-payment.html.twig
  • twt_layout_footer_payment_logos > twt_layout_footer_payment_icons
• views\storefront\themeware\footer-elements\twt-paymentshipping.html.twig
  • twt_layout_footer_paymentshipping_logos > twt_layout_footer_paymentshipping_icons
• views\storefront\themeware\footer-elements\twt-shipping.html.twig
  • twt_layout_footer_shipping_logos > twt_layout_footer_shipping_icons

Links in CMS-Elementen sind zur besseren Erkennbarkeit nun unterstrichen [Pro-Edition] #FeatureRequest

Links in Texten einiger CMS-Elemente sind zur besseren Erkennbarkeit nun unterstrichen.

Veralteter SCSS- und Twig-Code wurde entfernt

Mit ThemeWare® 3.0 wurden veraltete Dateien sowie veralteter SCSS- und Twig-Code entfernt. Zudem wurden an verschiedenen Stellen neue "Dreprecated"-Hinweise im Hinblick auf Shopware 6.7 ergänzt.

Verbesserte Konfiguration aller CMS-Elemente [Pro-Edition]

Die Konfiguration aller CMS-Elemente wurde verbessert. Dies betrifft die Gliederung, Gruppierung und Anordnung von Konfigurationsfeldern, neue und aktualisierte Hilfe-Texte sowie einige neue Konfigurationsfelder, um verschiedene Elemente zu vereinheitlichen.

Verbessertes Styling der Konfiguration von CMS-Elementen [Pro-Edition]

Die Darstellung der Konfiguration aller CMS-Elemente der Pro-Edition wurde unter anderem im Hinblick auf Übersichtlichkeit und Kompaktheit überarbeitet.

Vorschau einiger CMS-Elemente verbessert [Pro-Edition]

Die Vorschau einiger CMS-Elemente im Erlebniswelt-Editor von Shopware wurde verbessert. Dazu gehört unter anderem die Darstellung von Links in Texten.

Bugfix: CSS-Spaltenabstandsklasssen in CMS-Spaltenblöcken korrigiert [Cloud-Edition]

Die Storefront Template-Dateien der CMS-Spaltenblöcke wurden korrigiert damit die CSS-Spaltenabstandsklasssen wieder funktionieren.

Bugfix: Layout "Umgekehrt" vom CMS-Element "Bild & Text überlagernd" korrigiert [Pro-Edition]

Ein Fehler im CMS-Element "Bild & Text überlagernd" wurde korrigiert damit das Layout "Umgekehrt" korrekt funktioniert.

---

Hinweise

Die "klassische" Produktseite wurde in Shopware 6.6 durch das Standard-CMS-Layout ersetzt.

Die "klassische" (Nicht-CMS-) Produktseite wurde in Shopware 6.6 abgeschafft. Nun wird stets das Standard-CMS-Layout genutzt. Entsprechende Änderungen wurden in ThemeWare® 3.0 berücksichtigt.

Die "klassische" Breadcrumb wurde in Shopware 6.6 durch die CMS-Breadcrumb ersetzt.

Die "klassische" (Nicht-CMS-) Breadcrumb wurde in Shopware 6.6 abgeschafft. Nun wird auf allen Seiten die CMS-Breadcrumb genutzt. Entsprechende Änderungen wurden in ThemeWare® 3.0 berücksichtigt.

---

Schlusswort

Soweit zu den Änderungen in ThemeWare® 3.0 für Shopware 6.6. Die Migration für Shopware 6.6 war wieder sehr viel Arbeit, die letzten Wochen mit Änderungen an über 400 Dateien.

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