1. Umstellung von LESS auf SASS
   
2. Code Splitting von LESS und JS
   
3. Neuer Checkout
   
4. Anpassungen an das Barrierefreiheitsgesetz
   

Gerne unterstützen wir und unsere Partner Sie bei diesem Prozess. Vereinbaren Sie ein unverbindliches Update-Beratungsgespräch: https://booking.epicgroup.at/#/Update-Service

Die Version 2.x.x wird von uns noch bis 1.1. 2026 mit Bugfixes weiter supportet. Neue Features kommen nur noch ab Version 3.x.x.

Schritt für Schritt Anleitung für ein Update von admorris Pro 2.x.x auf 3.x.x: 

Wir empfehlen alle JTL-Shopupdates und Pluginupdates (speziell bei Major Versionen) immer in einer getrennten Entwicklungsumgebung einmal durchzuspielen. Dabei können eventuell auftretende Probleme frühzeitig erkannt werden und noch vor dem eigentlichen Liveupdate behoben werden.

1. Systemvoraussetzungen prüfen
1. Die Version 3.0 benötigt:
   
1. JTL-Shop 5.4.0 bis 5.4.1
   
2. PHP Version: 8.2 - 8.3
   
   
2. Backup erstellen
   
1. Erstellen Sie ein Backup von
   
1. JTL-Shop Datenbank
   
2. Templateordner
   
   
3. Wartungsmodus des Shops aktivieren
   
   
4. Update auf 2.7.x
   
1. Führen Sie ein Update auf die Zwischenversion 2.7.x durch um auf Version 3.0 updaten zu können.
   
   
5. Update auf 3.x.x
   
1. Führen Sie das Update auf Version 3.x durch.
   
   
6. Migrationsassistent ausführen
   
1. Falls Sie Custom User Styles oder Elements verwenden, führen Sie diese Schritte im Migrationsassistent durch.
   
   
7. Kontrollieren Sie Ihre Styles und Element-Anpassungen
   
1. Wenn Sie viele Anpassungen über User-Styles oder Sales Booster gemacht haben, sollten Sie ggf. kurz überprüfen, ob alles noch so funktioniert wie gewünscht.
   
2. Der Migrationsassistent passt soweit es geht alle Klassen und Styles an. In wenigen Spezialfällen muss aber leider manuell nachgearbeitet werden (siehe unten).
   
3. Zusätzlich können Sie optional Ihre User-Styles zur Performanceoptimierung in die entsprechenden Dateien aufteilen (siehe unten).
   
   
8. Kontrollieren Sie die Experteneinstellungen
   
1. Prüfen Sie ob Ihre Sales Booster auch dort angezeigt werden, wo Sie das möchten.
   
2. Die Experteneinstellungen des Sales Booster Bonuspunkte (Anzeige im Kundenkonto) könnte ggf. eine Anpassung benötigen, wenn Sie nicht das admorris Pro Template verwenden.
   
   
9. Child-Template nachziehen
   
1. Falls Sie ein Child-Template verwenden müssen Sie die Files und Inhalte an die neue Templatestruktur anpassen.
   
   
10. Testing
    
1. Testen Sie alle Standardprozesse in Ihrem Shop
   
1. Kundenkonto erstellen
   
2. Login
   
3. Testbestellungen mit allen wichtigen Zahlungsarten
   
   
11. Wartungsmodus deaktivieren

Änderungen & Migrationen im Detail

User Styles: LESS zu SASS

admorris pro verwendet SASS 1.80 (Dart SASS). Diese Version ist neuer als die im JTL Shop mitgelieferte Version und bringt einige Neuerungen wie die bessere Unterstützung neuer CSS Syntax, aber auch einige Breaking Changes

Zusätzlich zu den globalen User Styles gibt es nun für die verschiedenen Seitentypen eigene User-Styles Dateien. Dadurch kann die Performance verbessert werden. Die Bootstrap und Template Styles werden auch entsprechend aufgeteilt.

Zusätzlich gibt es auch ein non-critical.scss File, das asynchron geladen wird und für Inhalte "Below the Fold" gedacht ist. Es enthält die Bootstrap Komponenten von Dropdowns, Toasts, Modals, Tooltips, Popover, Print Styles und vom Template die Styles für Footer, Offcanvas Menü, Scroll-to-Top Button, Home News Slider und Paginierung.

Wenn Non-Critical Styles überschrieben werden sollen ist es wichtig, auch das eigene User-Styles File dafür zu verwenden, weil die Styles sonst nicht in der richtigen Reihenfolge geladen werden.

Es empfiehlt sich zur Performanceverbesserung die Styles in die entsprechenden Files aufzuteilen.

Variablen von Bootstrap

Variablen, die Bootstrap Variablen überschreiben sollen, müssen in das user-styles/_user-variables.scss File eingefügt werden. Variablen aus den _user-variable.scss können auch Backend Settings überschreiben, die dann nicht mehr funktionieren.

Berechnungen mit SASS Variablen

SASS Variablen können auch in calc verwendet werden. Division außerhalb von calc mit / sind in Dart SASS deprecated. In calc wird alles Berechnet was in SASS berechnet werden kann. Der Rest wird dem Browser in einer calc Funktion ausgegeben.

Neue Sass Features:

• Module System
• Color Functions mit neuen Features

Sass Syntax Hinweise:

• Interpolation
• @if
• @debug
• @use
• @function

Lightningcss Postprocessing

Die Styles werden nach dem Kompilieren zu CSS noch mit Lightning CSS mit prefixes versehen. Dadurch kann die neuere @media range syntax verwendet werden, die dann automatisch umgewandelt wird.

@media (width >= 400px) { ... }
// Beispiel mit Verwendung der Bootstrap breakpoint Getter Funktion
@media (width < breakpoint-min(lg)) { ... }

Eine ausführliche Liste finden sie hier: Transpilation.

Das Minifying wird auch von Lightning CSS übernommen. Lightning CSS sorgt dabei für den kleinstmöglichen output:

.foo {
  padding-top: 1px;
  padding-left: 2px;
  padding-bottom: 3px;
  padding-right: 4px;
}

Wird umgewandelt zu:

.foo{padding:1px 4px 3px 2px}

Update der User-Styles von LESS zu SCSS (SASS) mit dem Migrationsassistent

Nach dem Update von admorris Pro auf Version 3 können sie auswählen ihre User-Styles automatisch von LESS ins SCSS Format konvertieren zu lassen. Variablennamen und Mixins können automatisch konvertiert werden. Aber die Konvertierung umfasst nicht alle Features von LESS. Die in LESS eingebauten Functions können allerdings nicht konvertiert werden.

Wie ist bei Fehlern vorzugehen: Zeile des Fehlers im User-Styles Editor suchen. Syntaxfehler beheben oder Zeile auskommentieren. Überprüfen ob kein Fehler mehr kommt wenn man "Speichern und Kompilieren" Ausführt.

Elements & Child Template Migration

Anpassen von Bootstrap Klassen.