Hallo zusammen,
aktuell nutze ich SW 5.2.20 und der Checkout wird per Plugin um 1-2 Schritte erweitert, die als Angular App implementiert worden sind. Die Struktur sieht also so aus:
custom/plugins/CustomDispatch/Resources/views/frontend/dispatch/index.tpl
In dieser index.tpl werden nun JavaScript Dateien beim Aufruf inkludiert:
// Angular
//Slick
//Angular Slick
// App
Beim Update auf 5.3 scheint dies jedoch Probleme zu machen und ich vermute das liegt am neuen, asynchronen, JavaScript Verfahren. Ich habe nun den Slick Teil bereits in /DispatchPlugin/Resources/frontend/js inkludiert, damit dieser automatisch mitgeladen wird.
Die anderen JavaScript Dateien machen jedoch noch Probleme und hier erhalte ich z.B. diese Fehlermeldung: Screen Shot on 2018-01-23 at 09:13:58.png • Droplr Wenn ich nun bei dem Inkludieren von angular-slick ein „async“ in den Script-Tag setze, bekomme ich diesen Fehler: Screen Shot on 2018-01-23 at 09:14:50.png • Droplr
Hat jemand einen Tipp, wie man die Angular-App unter 5.3 richtig einbindet? Danke!
Kleiner Nachtrag:
Was mich auch wundert ist, wenn ich das asynchrone Laden deaktiviere und alles so lassen, wie es ist, sagt das slick.min.js mir: Uncaught ReferenceError: jQuery is not defined
Hallo,
schau mal hier Shopware 5 upgrade guide
Vielleicht hilft dir das schon weiter
Viele Grüße aus Schöppingen
Michael Telgmann
Hallo Michael,
daraus schließe ich 2 Dinge:
-
Wenn die Option asynchron zu laden aktiv ist, müsste ich alle JavaScript Dateien, die ich oben erwähnt habe, ebenfalls asynchron nachladen und zwar nach dem Laden des SW Main-Files. D.h. ich müsste angular und angular-slick ebenfalls in den /js Ordner des Plugins schieben, aber wie kann ich hier sicher sein, dass diese nach dem SW main.js geladen werden oder wie kann ich hier dann sicherstellen, dass angular-slick.js erst geladen wird, wenn angular.js geladen wurde?
-
Wenn die Option asynchron zu laden deaktiviert ist, müsste es doch wie in 5.2 gewohnt und oben erwähnt funktionieren? Oder warum kann das Slick-Script z.B. jQuery in 5.3.7 nicht finden, in 5.2.20 jedoch ohne Probleme?
Ich bin hier wieder ein Stück weiter.
In 5.2 sieht der Code so aus:
var jsUrlObject = {
'addToWishList': 'http://xxxx/wishlist/addToList',
'share': 'http://xxxx/wishlist/share',
....
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
In 5.3 sieht es so aus:
document.getElementById('main-script').addEventListener('load', function() {
if (!asyncCallbacks) {
return false;
}
for (var i = 0; i < asyncCallbacks.length; i++) {
if (typeof asyncCallbacks[i] === 'function') {
asyncCallbacks[i].call(document);
}
}
document.asyncReady = function (callback) {
if (typeof callback === 'function') {
window.setTimeout(callback.apply(document), 0);
}
}
});
Der Unterschied ist also, dass meine JS-Files vor dem Main.JS inkludiert werden und ich dadurch keinen Zugriff auf JQuery o.ä habe.
Edit:
Ich habe nun herausgefunden, woran es liegt:
-
Ich hatte nicht {extends file=“parent:frontend/index/index.tpl”} sondern {extends file=“frontend/index/index.tpl”} verwendet. Scheinbar führte das in 5.2 dazu das der Block am Ende vor dem eingefügt worden ist. In 5.3 ist das Verhalten hier aber ein anderes, in 5.3 werden die Files richtig eingebunden. Ich hatte aber fälschlicherweise einen falschen Block benutzt (siehe #2)
-
Ich habe den Block frontend_index_header_javascript_jquery verwendet, welcher vor dem main.js inkludiert wird. Nun verwende ich frontend_index_header_javascript_jquery_lib und füge meine Dateien nach dem main.js hinzu.
P.S: Wie wäre nun der richtige Weg in 5.3, wenn asynchrones JS aktiviert ist? Kann ich mein Plugin umbauen, dass es funktioniert? Wenn ich alle .js Files in den Plugin Pfad /Resources/frontend/js verschiebe, müsste ich trotzdem eine Reihenfolge festlegen. angular-slick.js muss z.B. vor angular.js geladen werden. Demnach gibt es wahrscheinlich keinen Weg async zu nutzen, oder?