jQuery im Frontend

Lt. verschiedenen Aussagen ist jQuery im Frontend enthalten, und hier: https://docs.shopware.com/en/shopware-platform-dev-en/getting-started/recent-updates wird aktuell darauf verwiesen, dass window.jQuery zur Verfügung stehen soll. Dem ist leider nicht so - Uncaught TypeError: window.jQuery is not a function

Bug?

Der Changelog eintrag ist ja vom 1.8.

Hast du die neuste Version von Git?

Die EarlyAccess Version ist ja von Mitte Juli, die hat das Feature sicherlich noch nicht.

Dieser Commit sollte auf alle Fälle auch bei dir lokal existieren: https://github.com/shopware/platform/commit/012272dea18ed3d6e969727724097d32a5155eb5

VG

@simkli‍ danke, das war’s tatsächlich. jetzt habe ich allerdings bemerkt, dass offensichtlich eine abgespeckte jQuery-Version drin ist:

jQuery.fn.jquery

"3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector"

das ist gar nicht schön ;-( Ticket dazu: https://issues.shopware.com/issues/NEXT-4368

1 „Gefällt mir“

@netzperfekt‍ es werden ja nur die Ajax Extensions entfernt. Feuerst du viele Ajax Requests im Storefront? Schau dir mal

platform/src/Storefront/Resources/src/script/plugin/offcanvas-cart/offcanvas-cart.plugin.js

an. Dort findest du eigentlich alle relevanten Inputs die du brauchst:

this.client = new HttpClient(window.accessKey, window.contextToken);

...

this.client.post(requestUrl.toLowerCase(), data, this._onOffCanvasOpened.bind(this, this._updateOffCanvasContent.bind(this)));

...

this.client.get("/endpoint", callback);
this.client.post("/endpoint", data, callback);

Es scheint so, als wär es gewollt, dass die API ausschließlich nur noch mit Authentifizierung abgerufen werden soll. Da wäre die Nutzung mit dem JS HttpClient() der richtige Ansatz.

Hallo zusammen,

ich bin sicherlich nicht der Javascript Experte bei uns im Haus  Grin, aber bisher habe ich beim Schreiben von Plugins jQuery nicht vermisst. Vom Core werden diverse Helfer Klassen bereit gestellt, wie z.B. der bereits erwähnte HttpClient. Da Bootstrap angekündigt hat, in Version 5 jQuery komplett zu entfernen, gibt es auch bei uns Überlegungen diesen Schritt zu tun. Daher solltet ihr schauen, ob es wirklich nötig ist jQuery zu nutzten, oder ob man nicht mit EcmaScript6 Funktionen genauso weit kommt  Wink

Viele Grüße aus Schöppingen

cool Michael Telgmann

[@Michael Telgmann](http://forum.shopware.com/profile/17553/Michael Telgmann “Michael Telgmann”)‍ danke, aber das ist nicht wirklich hilfreich. Zum einen bietet ihr jQuery ja explizit im Frontend an - also sollte es auch voll nutzbar sein (sonst lasst es ganz weg, aber dann injected es vermutlich jeder Entwickler doch wieder selbst). Zum anderen gibt es - gerade in der Übergangsphase von SW5->SW6 Plugins sicherlich etliche Plugins, die eben jQuery benötigen. Hier ist es wirklich hilfreich, wenn man - neben dem Code, der ohnehin angepasst werden muss - nicht auch noch an diese Baustelle gehen muss.

Natürlich ist es langfristig erstrebenswert, ohne jQuery auszukommen, aber macht es den Plugin-Entwicklern bitte nicht noch extra schwer :slight_smile:

Hallo @netzperfekt‍,

keine Sorge, unser Ziel ist es nicht die Plugin Entwicklerung unnötig schwer zu machen. Wir haben uns bei der verwendeten jQuery Version (3.2.1 Slim) an die Vorgaben von Bootstrap gehalten. Genau diese Version ist von Bootstrap auf den diversen CDNs zur Verfügung. Ähnlich wie Bootstrap haben wir viele Helfer zur Verfügung gestellt, damit wir perspektivisch die Möglichkeit haben auf jQuery zu verzichten. Auch diesen Ansatz fährt Bootstrap gerade.

Wir hatten noch einen Bug in unserer Webpack Config, dass man pro Entry Point eine neue Instanz von jQuery bekommen hat, was dazu geführt hat dass z.B. die Bootstrap Plugins nicht an „jQuery.fn“ hingen. Zudem habe ich einen Expose-Loader eingebaut, der dazu sorgt dass jQuery ans „window“-Objekt gehangen wird, was vor allem für Legacy jQuery Plugins gedacht ist aber auch für Leute, die ohne unseren Webpack Stack arbeiten möchten. Hier der Changelog: https://docs.shopware.com/en/shopware-platform-dev-en/getting-started/recent-updates#2019-08-01-best-practice-storefront-jquery-bootstrap-usage

Im Core sorgen wir dafür dass wir jQuery nicht mehr als harte Abhängigkeit haben. Dennoch wissen wir wie wichtig jQuery für die Web-Entwicklung ist und wollen bzw. werden niemanden hier Steine in den Weg legen. Entsprechend sorgen wir auch dafür dass es für Plugin-Entwickler weiterhin zur Verfügung steht. Der Umstieg von jQuery auf EcmaScript 6 sowie die Einarbeitung erfordert Zeit. Wie du schon sagtest, in der Übergangszeit von SW5 auf SW6 rechnen wir demnach auch damit dass viele Plugins noch auf jQuery basieren. Wir sind jederzeit offen für Feedback und Verbesserungsvorschläge. Ich hoffe, ich konnte damit etwas Licht ins Dunkele bringen.

Viele Grüße,
Stephan Pohl  Shopware

1 „Gefällt mir“

Hallo [@Stephan Pohl](http://forum.shopware.com/profile/2/Stephan Pohl “Stephan Pohl”)‍ - danke, soweit schon klar und absolut nachvollziehbar. Aber heisst das, dass es bei der “slim”-Version bleiben wird? Das würde uns speziell leider nicht helfen und ich müsste dann doch zeitaufwändig die JS-Parts der betroffenen Plugins umschreiben oder halt doch wieder jQuery selbst injecten (auch sehr unschön, aber dann vermutlich meine Wahl)

@netzperfekt‍ Was du machen könntest ist eine eigene Webpack Config zu erstellen, welche den jQuery Alias von der Slim als auf die reguläre jQuery Version umschreibt. Darf ich fragen wieso du die AJAX Extension von jQuery brauchst? Mich würde hier interessieren ob wir dir hier nicht weiter helfen können durch eine kleine Änderung am Core.

Viele Grüße,
Stephan

[@Stephan Pohl](http://forum.shopware.com/profile/2/Stephan Pohl “Stephan Pohl”)‍ es geht mir nicht um AJAX (das habe ich auch nirgends geschrieben). Die Knackpunkte in einigen unserer Plugins sind

-effects,-effects/Tween,-effects/animatedSelector (hide, show, queue, delay, toggle, fadeIn, fadeOut etc.)

Ok, dann muss ich das eben manuell als CSS umsetzen.
Wäre dann noch schön, wenn unter https://docs.shopware.com/en/shopware-platform-dev-en/getting-started/recent-updates auf die “slim”-Version hingewiesen würde, ∂as hätte mir in diesem Fall viel Zeit & Sucherei & Nachfragen erspart.