Neu JTL Shop 5 critical CSS 2x identisch im Header vorhanden

[edding18]

Mir ist aufgefallen, dass in dem crictical CSS im Header (<style id="criticalCSS">) der ganze Bootsrap-Code 2x vorhanden ist. Der Bereich beginnt mit ca. 1250 Zeilen Boostrap-Code, dann nochmals 1250 Zeilen exakt der gleiche Code (habe es mit nem Compare-Tool verglichen), dann kommt wohl der Template-spezifische Code und zum Schluss die critical CSS Anpassungen an das Template von mir.

Das Thema "criticial CSS" bzw. die ganze Art und Weise wie das Template kompiliert wird ist noch etwas "Neuland" für mich bzw. ich arbeite mich Stück für Stück da hinein. Hierzu jetzt meine Fragen:

- Kann jemand das Problem nachvollziehen?
- Wie wird dieses Critical CSS im Header genau erstellt/kompiliert?
- Wie kann ich den 2. Block mit den ~ 1250 genau gleichen Zeilen (und damit komplett überflüssig) entfernen?

VG

 

[MHillmann]

Hallo,

das kann ich nicht bestätigen. Hast du eventuell Dinge doppelt eingebunden? Wenn du die crit.scss selbst schon erweitert hast, nehme ich an du bist im Theme Editor unterwegs?

Viele Grüße
Michael

 

[edding18]

Selbst eingebunden hab ich soweit nichts, sondern nehmen eben entsprechende Modifikationen am Child-Theme über den Theme-Editor vor. Wo "zieht" sich der Shop den Inhalt für den Critical CSS Part im Header?

 

[FMoche]

Hier: https://gitlab.com/jtl-software/jtl-shop/core/-/blob/v5.0.3/templates/NOVA/layout/header.tpl#L59

 

[edding18]

Gerade geprüft - die mytemplate_crit.css Datei selbst hat in den Zeilen 1-1250 uns 1251-2500 sozusagen 2x den gleichen Content.

Dann ist irgendwas beim Kompilieren der Datei schief gelaufen? Oder offen gefragt: Hat hier der Ersteller des Templates evtl. einen Fehler gemacht?

 

[MHillmann]

Was hast du denn für ein Template?
Wie sieht es in der entsprechenden xxx_crit.scss Datei aus? Du meintest ja du hast dort noch Dinge hinzugefügt. Ist dort soetwas doppelt drin?

// Lädt kritische Style Angaben
@import "../../../../NOVA/themes/base/bootstrap/scss/functions";
@import "../../../../NOVA/themes/base/bootstrap/scss/variables";
@import "../../../../NOVA/themes/base/bootstrap/scss/mixins";
@import "../../../../NOVA/themes/base/bootstrap/scss/root";
@import "../../../../NOVA/themes/base/bootstrap/scss/reboot";
//@import "../../base/bootstrap/scss/type";
@import "../../../../NOVA/themes/base/bootstrap/scss/images";
@import "../../../../NOVA/themes/base/bootstrap/scss/code";
@import "../../../../NOVA/themes/base/bootstrap/scss/grid";
@import "../../../../NOVA/themes/base/bootstrap/scss/nav";
@import "../../../../NOVA/themes/base/bootstrap/scss/navbar";

 

[edding18]

Wir haben das FLAT-Template von Themeart. Hab wohl den Fehler gefunden. In der child xxx_crit.scss (heißt hier myclear_crit.scss) wurden zum einen die kritischen Style-Angaben aus dem Basis-Theme importiert:

// Lädt Core-Funktionen
@import '../../../../Flat/themes/base/sass/functions';

// Lädt "myclear"-Variablen. Hier können Variablen aus Bootstrap und dem clear-Theme überschrieben werden.
@import "variables";

// Lädt kritische Style Angaben
@import "../../../../Flat/themes/base/bootstrap/scss/functions";
@import "../../../../Flat/themes/base/bootstrap/scss/variables";
@import "../../../../Flat/themes/base/bootstrap/scss/mixins";
@import "../../../../Flat/themes/base/bootstrap/scss/root";
@import "../../../../Flat/themes/base/bootstrap/scss/reboot";
//@import "../../base/bootstrap/scss/type";
@import "../../../../Flat/themes/base/bootstrap/scss/images";
@import "../../../../Flat/themes/base/bootstrap/scss/code";
@import "../../../../Flat/themes/base/bootstrap/scss/grid";
@import "../../../../Flat/themes/base/bootstrap/scss/nav";
@import "../../../../Flat/themes/base/bootstrap/scss/navbar";

@import "../../../../Flat/themes/clear/sass/clear_crit";

aber durch den letzten Import "@import "../../../../Flat/themes/clear/sass/clear_crit";" wurde ja die kritischen Styles des Basis-Themes importiert (clear_crit.scss) und dort wurden nochmals die Imports durchgeführt:

@import '../../base/sass/functions';

@import 'variables';

@import "../../base/bootstrap/scss/functions";
@import "../../base/bootstrap/scss/variables";
@import "../../base/bootstrap/scss/mixins";
@import "../../base/bootstrap/scss/root";
@import "../../base/bootstrap/scss/reboot";
@import "../../base/bootstrap/scss/type";
@import "../../base/bootstrap/scss/images";
@import "../../base/bootstrap/scss/code";
@import "../../base/bootstrap/scss/grid";
@import "../../base/bootstrap/scss/nav";
@import "../../base/bootstrap/scss/navbar";
@import "../../base/sass/mixins";

Ich hab jetzt die Imports im Basis-Theme auskommentiert und das Thema neu kompiliert - jetzt ist der kritische Block nur noch 1x vorhanden.

Eine Frage hab ich noch: Aus Best-Practice-Sicht - sollte man besser die Anweisungen im Child Theme oder im Basis-Thema auskommentieren?

 

[MHillmann]

Falls möglich, jede Änderung im Child-Template vornehmen.