ThemeWare® 2.0

In diesem Beitrag findest du Informationen zum Update von und auf ThemeWare® 2.0.

Shopware hat mit dem Update auf Version 6.5 – wie schon beim Update auf Version 6.4 – sehr umfangreiche und grundlegende Änderungen vorgenommen.

ThemeWare® 2.0

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

Versionen und Kompatibilität

ThemeWare® 1.x ist für Shopware 6.4 verfügbar. Für Shopware 6.5 wird ThemeWare® 2.x benötigt.

ThemeWare® für Shopware 6.4 und 6.5

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

Bootstrap v5

Die größte Neuerung für Themes bzw. etwaige individuelle Anpassungen ist der Wechsel von Bootstrap 4 auf Bootstrap 5 in Shopware 6.5. Da die Shopware 6 Storefront vollständig auf dem Bootstrap Framework basiert, ist dies eine nicht unerhebliche Änderung.

Durch das Update auf Bootstrap 5 mussten Theme- und Plugin-Hersteller umfangreiche Anpassungen an Template-, SCSS- und JS-Dateien vornehmen. Dies gilt so natürlich auch für ThemeWare®.

Wir haben alle Dateien von ThemeWare® geprüft und nahezu jede Datei überarbeitet. Du musst dich daher um nichts kümmern außer um etwaige individuelle Anpassungen oder individuellen HTML-/CSS-Code.

---

ThemeWare® Update

Kommen wir nun zum eigentlichen Shopware-/ThemeWare®-Update.

Wichtig bei individuellen Anpassungen:

Nutzt du individuellen HTML-/CSS-Code in deinen Erlebniswelten oder hast du individuelle Anpassungen per HTML/Twig und/oder CSS/SCSS gemacht bzw. machen lassen, prüfe und aktualisiere diese, damit Sie nicht zu Fehlern führen!

1. Update

Das Shopware-Update ist eigentlich recht einfach. Wichtig ist es aber die nötigen Schritte in der richtigen Reihenfolge durchzuführen.

Shopware und ThemeWare® updaten

1. Deaktiviere ThemeWare® vor dem Shopware 6.5 Update
   • Tipp: Weise deinem Verkaufskanal, bzw. allen Verkaufskanälen die ThemeWare® nutzen vorab das Standard-Theme von Shopware zu, andernfalls lässt sich ein Theme nicht deaktivieren.
2. Führe das Shopware-Update auf Version 6.5 durch
3. Aktualisiere danach ThemeWare® auf Version 2.x
4. Aktiviere ThemeWare® erst wenn das Update auf ThemeWare® 2.x erfolgreich war
5. Leere den Shopware-Cache nach dem Update einmal vollständig

2. Konfiguration prüfen

Prüfe die Konfiguration auf verwaiste Konfigurationsfelder

Mit dem Update werden unnötige Konfigurationsfelder entfernt. Wurden diese bereits einmal geändert, verbleiben diese als "verwaiste" Konfigurationsfelder in der Theme-Konfiguration.

Findest du Konfigurationsfelder im Tab "Allgemein", kannst du die Konfiguration ganz einfach bereinigen.

3. Storefront prüfen

Prüfe deinen Shop auf JavaScript-Fehler

jQuery ist nicht mehr Bestandteil von Bootstrap 5 und damit nicht mehr automatisch Bestandteil der Shopware 6.5 Storefront. Wenn Erweiterungen nicht kompatibel mit Shopware 6.5 bzw. JS-Plugins von Erweiterungen nicht migriert wurden, kann es zu JavaScript Fehlern kommen.

Bis wir die aufwendigen Header-Plugins vollständig migriert haben, ist jQuery für ThemeWare® noch nötig. Darum ist jQuery 3.5.1 slim nun – bis auf Weiteres – in ThemeWare® 2.0 integriert.

Prüfe deine individuellen Anpassungen

Durch die umfangreichen Änderungen in Shopware 6.5 gab es in den meisten Template-/SCSS-/JS-Dateien Änderungen. Stelle sicher, dass du etwaige Änderungen von Shopware bzw. von ThemeWare® auch auf deine individuelle Anpassungen überträgst.

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

Schritte zur Fehlerbehebung:

1. Aktualisiere alle Erweiterungen in deinem Shop auf die neuste bzw. eine kompatible Version
2. Prüfe ob du jQuery in ThemeWare® aktiviert hast
3. Deaktiviere alle Erweiterungen in deinem Shop um den Fehler einzugrenzen
4. Deaktiviere alle individuellen Anpassungen um zu prüfen ob diese Fehler verursachen
5. Entferne etwaigen individuellen HTML-/CSS-Code in Erlebniswelten um zu prüfen ob diese Fehler verursachen
6. Deaktiviere gegebenenfalls die folgenden Theme-Features um Fehler einzugrenzen:
   • Erlebniswelt-Header
   • Full-Width Sticky-Header
   • Sticky Top-Navigation

---

Änderungen

Neben den umfangreichen Änderungen welche die Bootstrap 5 Migration mit sich gebracht hat, gibt es auch einige weitere Verbesserungen und neue Features in ThemeWare® 2.0.

Bootstrap 5 Migration

CSS-Abstandsklassen auf Bootstrap 5 aktualisiert bzw. Konfiguration für CSS-Abstandsklassen aktualisiert

Beim Update von Bootstrap 4 auf Bootstrap 5 (ab Shopware 6.5) wurden einige Klassen umbenannt um logische Eigenschaftennamen anstelle von Richtungsnamen zu verwenden.

Damit einhergehend gibt es auch neue CSS-Abstandsklassen in ThemeWare® (z.B. twt-p-3 für ein padding: 30px).

Ab Shopware 6.5 hast du in ThemeWare® daher die Möglichkeit zu wählen ob du die alte Bootstrap 4 oder die neue Bootstrap 5 Schreibweise nutzen möchtest. Die neue Schreibweise ist mit ThemeWare® 2.0 die Standard-Einstellung.

Konfiguration und Styling von Tabellen auf Bootstrap 5 aktualisiert

Tabellen wurden in Bootstrap 5 umgekrempelt. Selbstverständlich haben wir diese Änderungen in ThemeWare® berücksichtigt.

Konfiguration zum Laden von jQuery hinzugefügt

jQuery ist nicht mehr Bestandteil von Bootstrap 5 und damit nicht mehr automatisch Bestandteil der Shopware 6.5 Storefront. Bis die aufwendigen Header-Plugins vollständig migriert wurden ist jQuery noch nötig für ThemeWare®. Darum ist jQuery 3.5.1 slim nun – bis auf Weiteres – in ThemeWare® 2.0 integriert.

Sonstige Migrationen

• Darstellung der Paginierung aktualisiert
• Darstellung vom "Ankündigungsbanner" aktualisiert
• Hell getönte Badges und Labels aktualisiert
• Hero-Slider auf Bootstrap 5 aktualisiert [Pro-Edition]
• Newsletter-Widget im Footer aktualisiert

Shopware 6.5 Anpassungen

Footer-Service-Menü im Header ermöglicht bzw. Footer-Service-Menü in der Offcanvas-Navigation ermöglicht

Shopware hat das Service-Menü im Header entfernt. Dieses wird jetzt nur noch als "Footer-Service-Navigation" im Footer angezeigt.

Die Darstellung dieser Navigation als Service-Menü im Header ist in ThemeWare® auch in Shopware 6.5 möglich.

Vorschau von CMS-Blöcken und CMS-Elementen aktualisiert [Pro-Edition]

Die Vorschau von einigen CMS-Blöcken und CMS-Elementen wurde aktualisiert und verbessert. Dies bezieht sich auf die Vorschau-Thumbnails von Blöcken und Elementen als auch auf die Live-Vorschau von Konfigurationen im Erlebniswelt-Editor.

Folgende Blöcke/Elemente wurden optimiert:

• Hover-Box
• Unterkategorie-Navigation (Sidebar)
• Button-Teaser
• Text-Teaser
• Text-Teaser (Verziert)
• Call-to-Action

Sonstiges Anpassungen

• Darstellung der Theme-Konfiguration aktualisiert [Pro-Edition]
• Tabs auf CMS-Produktseiten aktualisiert
• Theme-Assets neu strukturiert

Features und Verbesserungen

CMS-Styling auf CMS-Produktseiten verbessert

Die Darstellung des Standard-CMS-Layouts für Produktseiten wurde verbessert.

Farbe von Links in diversen CMS-Elementen verbessert [Pro-Edition]

Die Darstellung von Text-Links in einigen CMS Elementen wurde verbessert. In diesen Elementen haben Links nun die Textfarbe statt der allgemeinen Linkfarbe.

Folgende Elemente wurden optimiert:

• Call-to-Action
• Call-to-Action-Slide
• Text-Slide
• Hover-Box

Konfiguration diverser CMS-Elemente erweitert [Pro-Edition]

Einige CMS-Elemente haben neue Konfigurationsmöglichkeiten erhalten:

• Hover-Box
  • vertikale Ausrichtung des Textes
• Button-Teaser
  • Verlauf im Farb-Overlay
• Text-Teaser
  • Verlauf im Farb-Overlay
• Text-Teaser (Verziert)
  • Verlauf im Farb-Overlay
• Call-to-Action
  • Verlauf im Farb-Overlay

SEO-Konfiguration für CMS-Elemente verbessert [Pro-Edition]

Folgende CMS-Elemente haben neue SEO-Konfigurationsmöglichkeiten erhalten:

• Hover-Box
• Button-Teaser
• Text-Teaser
• Text-Teaser (Verziert)
• Call-to-Action

Veraltete Konfigurationsfelder entfernt

Einige veraltete Konfigurationsfelder wurden entfernt, da diese bereits länger nicht mehr benutzt wurden:

• $twt-annoncement-banner-background-color
• $twt-annoncement-banner-color
• $twt-annoncement-banner-font-size
• $twt-annoncement-banner-font-weight
• $twt-annoncement-banner-link
• $twt-product-detail-breadcrumb-show
• $twt-annoncement-banner-text-transform
• $twt-breadcrumb-arrow-icon-color
• $twt-breadcrumb-height
• $twt-breadcrumb-show
• $twt-annoncement-banner-show
• $twt-product-detail-slider-image-align-items
• $twt-product-detail-thumbnails-image-align-items

Sonstiges

• Hintergrundbilder werden nicht mehr per Twig geladen
• Inhalt und Struktur der SCSS-Dateien aktualisiert
• Konfiguration zum Laden von CSS-Code von CMS-Elementen hinzugefügt
• Veralteten SCSS- und Twig-Code entfernt

---

Schlusswort

Soweit zu den allgemeinen Änderungen in ThemeWare® 2.0 für Shopware 6.5.

Die Migration für Shopware 6.5 war ein Haufen Arbeit die letzten Wochen. Dennoch haben wir parallel an vielen weiteren Verbesserungen, neuen Features, CMS-Blöcken und CMS-Elementen gearbeitet und freuen uns diese in kommenden Updates zu veröffentlichen.

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