Ja das habe ich. Die aufgeführten Methoden funktionieren nicht mit allen JS-Dateien. Diese funktioniert ja erst dann, wenn die jeweilige JS-Datei vorher in der XML definiert wurde. Die Datei unter /js/app/views/header.js wird
nicht in der XML definiert. Somit kann ich das override="true" nicht anwenden. Außerdem wie diese JS-Datei über die Datei /js/app/app.js importiert, diese app.js wiederum wird im template /layout/header.tpl hartkodiert:
HTML:
<script type="module" src="{$ShopURL}/{$templateDir}js/app/app.js"></script>
Ich habe dennoch versucht diese Methode anzuwenden, obwohl die header.js nicht im NOVA in der XML definiert wurde, doch dann bekomme die header.js zweimal und übernommen wird immer noch die von NOVA.
Wie müsste ich das deiner Meinung nach lösen?
Den Anhang 77992 betrachten
Den Anhang 77989 betrachten
@ematjar - die header.js wird ja von der app.js aus importiert mit der Anweisung
Zeile 16:
Code:
import './views/header.js'
Ich hab aktuell exakt das gleiche Problem, dass ich die header.js modifizieren muss. In dem Zuge ist mir aufgefallen, dass JTL die einzelnen Module ja via "modulepreload" lädt, was NICHT von allen Browser unterstützt wird:
https://caniuse.com/link-rel-modulepreload
Code:
<link rel="modulepreload" href="{$ShopURL}/{$templateDir}js/app/globals.js" as="script" crossorigin>
<link rel="modulepreload" href="{$ShopURL}/{$templateDir}js/app/snippets/form-counter.js" as="script" crossorigin>
<link rel="modulepreload" href="{$ShopURL}/{$templateDir}js/app/plugins/navscrollbar.js" as="script" crossorigin>
<link rel="modulepreload" href="{$ShopURL}/{$templateDir}js/app/plugins/tabdrop.js" as="script" crossorigin>
<link rel="modulepreload" href="{$ShopURL}/{$templateDir}js/app/views/header.js" as="script" crossorigin>
<link rel="modulepreload" href="{$ShopURL}/{$templateDir}js/app/views/productdetails.js" as="script" crossorigin>
Zudem sind das dann 6 + 1 HTTP-Request für in Summe ~ 21 kb (alle Module + app.js).
Was ich jetzt gemacht habe, ist mittel rollupjs aus der app.js ein bundle gebaut - das heißt, ich habe jetzt nur noch eine einzige Datei. Dieses Bundle habe ich noch mittels unglifyJS komprimiert - sind jetzt ~ 16 KB und das ganze habe ich mit der defer Anweisung im Header eingebunden:
Statt:
Code:
<script type="module" src="{$ShopURL}/{$templateDir}js/app/app.js"></script>
hab ich jetzt
Code:
<script defer src="{$ShopURL}/{$templateDir}js/app/app.min.js"></script>
in meiner header.tpl stehen und den gesamten Block mit den "modulepreload" Dateien hab ich entfernt.
An der Stelle würde mich interessieren
, wieso JTL überhaupt einzelne Module einbindet. Ich bin kein WebDev-Profi - aber für mich ist das doch total stimmig, dass man zum Schluss eine einzige, komprimierte Datei hat, die ausgeliefert wird statt den einzelnen Modulen.
Ich hatte übrigens mit Firefox teilweise die Situation, dass die Bootstrap-Funktionen, die mit der app.js bzw. den darin importierten Modulen programmiert sind, NICHT funktioniert haben - das heißt Firefox hat teilweise diese Module NICHT geladen.
