Shopware 6.5

In diesem Beitrag erfährst du die wichtigsten Informationen zu Shopware 6.5 und Bootstrap 5.

Shopware hat mit dem Update auf Version 6.5 sehr umfangreiche und grundlegende Änderungen vorgenommen.

Wir möchten in diesem Beitrag ein paar, aus technischer Sicht, besonders relevante Änderungen in Shopware 6.5 im Bezug auf ThemeWare® vorstellen. Detaillierte Informationen zu ThemeWare® findest du in einem separaten Beitrag.

Shopware 6.5

Shopware 6.5 bietet neben grundlegenden technischen Änderungen auch neue Features.

Bei den Systemanforderungen muss nun PHP 8.1 oder höher verwendet werden. NodeJS ist in Version 18 oder höher notwendig.

In der Administration wurden Performance-Optimierungen durchgeführt. Zudem wurde die Schriftart für eine bessere Lesbarkeit geändert. Weiter gibt es Verbesserungen beim Regel-Management und im Rule Builder. Es gibt eine neue Adress-Verwaltung, Verbesserungen im UI für Bestellungen, Verbesserungen im Flow Builder und Steueranbieter für externe Steuerdienstleistungen.

Alle Informationen zu den Änderungen und Features von Shopware 6.5 findest du direkt bei Shopware.

Shopware 6 Changelog

https://www.shopware.com/de/changelog/

https://github.com/shopware/platform/blob/6.5.0.0/UPGRADE-6.5.md

Shopware 6.5 – alles über das brandneue Major Release

https://www.shopware.com/de/news/shopware-6-5/

Shopware 6.5 – teste den neuen Release Candidate

https://www.shopware.com/de/news/shopware-6-5-release-candidate/

ThemeWare® 2.0

Da viele Änderungen in Shopware 6.5 erst ab Version 6.5 gültig und teils nicht abwärtskompatibel sind, wird für Shopware 6.5 nun ThemeWare® 2.x benötigt. Für Shopware 6.4 kann weiterhin ThemeWare® 1.x genutzt werden.

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

Hinweis zum Shopware-Update

Da es bei Major-Releases von Shopware aufgrund von "Breaking changes" zu Inkompatibilitäten mit Erweiterungen (Plugins/Apps) und Themes kommen kann, empfehlen wir solch große Updates vorab in einem Testsystem oder einer Staging-Umgebung zu testen und zusätzlich vorab ein vollständiges Backup das Shops zu erstellen.

Weise vor dem Shopware-Update das Shopware Standard-Theme deinem Verkaufskanal bzw. deinen Verkaufskanälen zu.

Starte den Update-Assistenten. Dieser informiert dich über "inkompatible" Erweiterungen. Deaktiviere "inkompatible" Erweiterungen (Plugins/Apps) und Themes (z.B. ThemeWare®) vor dem Shopware-Update in der Erweiterungsverwaltung und führe erst danach das Shopware-Update auf Version 6.5.x durch.

Aktualisiere nach dem Shopware-Update alle Erweiterungen (Plugins/Apps) sowie Themes auf die jeweils neuste Version (z.B. ThemeWare® auf die Version 2.x).

Prüfe nun ob alle Erweiterungen (Plugins/Apps) sowie dein Theme kompatibel mit Shopware 6.5 sind und aktiviere die jeweilige Erweiterung bzw. das jeweilige Theme erst, wenn du sicher bist, dass diese kompatibel sind.

Weise abschließend dein Theme (z.B. ThemeWare®) wieder dem den gewünschten Verkaufskanal bzw. den gewünschten Verkaufskanälen zu.

Nach dem Update

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.

Hast du individuelle Anpassungen an der Storefront vorgenommen oder vornehmen lassen, prüfe und aktualisiere diese, damit Sie nicht zu Fehlern führen!

Nachfolgend findest du allgemeine Informationen zu Änderungen in Bootstrap 5.

Bootstrap v5

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.

Browser support

Mit Bootstrap 5 wurde der Support für verschiedene ältere Browser eingestellt:

• Dropped Internet Explorer 10 and 11
• Dropped Microsoft Edge < 16 (Legacy Edge)
• Dropped Firefox < 60
• Dropped Safari < 12
• Dropped iOS Safari < 12
• Dropped Chrome < 60

JavaScript/jQuery

jQuery ist nicht mehr Bestandteil von Bootstrap 5 und damit nicht mehr automatisch Bestandteil der Shopware 6.5 Storefront. Wir haben diesbezüglich alle JavaScript-Plugins von ThemeWare® überarbeitet.

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

Breakpoints

Einige Breakpoint-Mixins wurden geändert und haben nun ein logischeres naming:

• Replace all mixin usages of media-breakpoint-down() with the current breakpoint, instead of the next breakpoint:
  • Replace media-breakpoint-down(xs) with media-breakpoint-down(sm)
  • Replace media-breakpoint-down(sm) with media-breakpoint-down(md)
  • Replace media-breakpoint-down(md) with media-breakpoint-down(lg)
  • Replace media-breakpoint-down(lg) with media-breakpoint-down(xl)
  • Replace media-breakpoint-down(xl) with media-breakpoint-down(xxl)

CSS-Klassen

Einige CSS-Klassen wurden umbenannt bzw. ersetzt:

• Replace data-toggle with data-bs-toggle
• Replace data-dismiss with data-bs-dismiss
• Replace data-target with data-bs-target
• Replace data-offset with data-bs-offset
• Replace custom-select with form-select
• Replace custom-file with form-file
• Replace custom-range with form-range
• Replace no-gutters with g-0
• Replace custom-control custom-checkbox with form-check
• Replace custom-control custom-switch with form-check form-switch
• Replace custom-control custom-radio with form-check
• Replace custom-control-input with form-check-input
• Replace custom-control-label with form-check-label
• Replace form-row with row g-2
• Replace modal-close with btn-close
• Replace sr-only with visually-hidden
• Replace badge-* with bg-*
• Replace badge-pill with rounded-pill
• Replace close with btn-close
• Replace left-* and right-* with start-* and end-*
• Replace float-left and float-right with float-start and float-end
• Replace border-left and border-right with border-start and border-end
• Replace rounded-left and rounded-right with rounded-start and rounded-end
• Replace ml-* and mr-* with ms-* and me-*
• Replace pl-* and pr-* with ps-* and pe-*
• Replace text-left and text-right with text-start and text-end

Damit einhergehend ändert sich auch der HTML-Aufbau mancher Elemente. Nachfolgend findest du ein paar Beispiele:

Replace .btn-block class with .d-grid wrapper

// Before
<a href="#" class="btn btn-block">Default button</a>

// After
<div class="d-grid">
    <a href="#" class="btn">Default button</a>
</div>

Remove .input-group-append wrapper inside .input-group

// Before
<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button type="submit" class="btn">Submit</button>
    </div>
</div>

// After
<div class="input-group">
    <input type="text" class="form-control">
    <button type="submit" class="btn">Submit</button>
</div>

Zudem wurde die Funktion color-yiq() ersetzt:

• Renamed color-yiq() function and related variables to color-contrast() as it’s no longer related to YIQ colorspace

Modals

• Deprecated selector [data-bs-toggle="modal"][data-url] to initialize the AjaxModal plugin. Use selector [data-ajax-modal][data-url] instead.

Prüfe deine individuellen Template und Textbausteine die Modals öffnen (z.B. formPrivacy). Der Selector wurde geändert.

Vorher

<a data-bs-toggle=\"modal\"

z.B.
<a data-toggle=\"modal\" data-bs-toggle=\"modal\" data-url=\"%url%\" href=\"%url%\" title=\"Mehr Informationen\">Mehr Informationen ...</a>

Nachher

<a data-ajax-modal="modal"

z.B.
<a data-ajax-modal=\"true\" data-url=\"%url%\" href=\"%url%\" title=\"Mehr Informationen\">Mehr Informationen ...</a>

Tabellen

Da Tabellen recht häufig in Erlebniswelten genutzt werden möchten wir noch auf eine Änderung der Tabellen in Bootstrap 5 hinweisen. Es gibt neue CSS-Klassen und manche CSS-Klassen wurden entfernt.

Dies Betrifft individuelle Bootstrap-Tabellen. Die "Eigenschaften-Tabelle" bzw. "Preistabelle" auf der Produktseite werden mit dem Update automatisch aktualisiert.

Textbausteine

• Deprecated translation key general.privacyNotice. Use general.privacyNoticeText instead.
• Deprecated translation key account.profileDelete. Use account.profileDeleteText instead.
• Deprecated translation key checkout.confirmTerms. Use checkout.confirmTermsText instead.
• Deprecated translation key checkout.confirmTermsReminder. Use checkout.confirmTermsReminderText instead.
• Deprecated translation key contact.privacyNotice. Use contact.privacyNoticeText instead.
• Deprecated translation key footer.serviceContactLink. Use footer.serviceContactText instead.
• Deprecated translation key footer.includeVat. Use footer.includeVatText instead.
• Deprecated translation key footer.excludeVat. Use footer.excludeVatText instead.
• Deprecated translation key cookie.message. Use cookie.messageText instead.
• Deprecated translation key component.cms.vimeo.privacyNotice. Use component.cms.vimeo.privacyNoticeText instead.

Storefront Theme-Assets

In früheren Shopware-Versionen wurden die Theme-Assets in die Ordner bundles/[theme-name]/file.png und theme/[id]/file.png kopiert. Dies war notwendig, um Assets in der Storefront verlinken zu können, da Theme-Assets nicht den Theme-Pfad-Präfix enthielten.

Um die Leistung von theme:compile zu verbessern und die Verwirrung bei der Nutzung von Assets zu verringern, werden die Assets nur noch nach theme/[id] kopiert.

• Replace {{ asset('logo.png', '@ThemeName') }} with {{ asset('logo.png', 'theme'') }}

Fazit

Soweit zu den grundlegendsten Änderungen bezüglich Bootstrap v5 und Shopware 6.5.

Die meisten dieser Änderungen betreffen den Kern von Shopware bzw. ThemeWare®. Du musst daher gar nicht viel selber machen oder beachten.

Nutzt du hingegen individuellen HTML-/CSS-Code in deinen Erlebniswelten oder hast individuelle Anpassungen (z.B. Twig, JS, SCSS) gemacht bzw. machen lassen, musst du diese natürlich prüfen oder prüfen lassen.