> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # JavaScript und jQuery > Wie Sie in WEBSALE V8s eigene JavaScript-Dateien anlegen, mit dem PageSpeed-Tool gruppieren, in Templates einbinden und die WEBSALE JavaScript-Bibliothek nutzen. Diese Seite beschreibt, wo JavaScript-Dateien im Shop liegen, wie Sie eigene Skripte einbinden und welche fertigen Bibliotheken WEBSALE dafür bereitstellt. Vorausgesetzt wird, dass Sie mit dem Aufbau der Template-Verzeichnisse vertraut sind und einen SFTP-Zugang zu Ihrem Shop haben. Der ausgelieferte Mustershop verwendet die jQuery-Bibliothek in der Version 2.2.2. Zusätzlich liegen weitere JavaScript-Dateien mit WEBSALE- und Bootstrap-spezifischen Anweisungen bei. Quelle (externer Link): [jQuery](https://jquery.com/) Das Verfahren für JavaScript entspricht dem für [CSS](https://dokumentation.websale.de/v8s/templates/css.md). Zentrales Werkzeug ist das PageSpeed-Tool. Es fasst einzelne Dateien zu Gruppierungen zusammen, minimiert sie und versieht sie mit einem URL-Fingerprinting. Beim URL-Fingerprinting ändert sich mit jeder inhaltlichen Änderung automatisch der Dateiname. Der Browser muss die Datei dadurch neu laden, statt eine veraltete Fassung aus dem Cache anzuzeigen. Der Shop greift im Standard ausschließlich auf die minimierten Dateien mit URL-Fingerprinting zu. Der Nutzen der Gruppierungen liegt in der Ladezeit. Pro Template binden Sie nur die Skripte ein, die für den Aufruf der jeweiligen Seite wirklich benötigt werden. Damit Sie diese Dateien nicht einzeln referenzieren müssen, fassen Sie sie unter einer frei wählbaren Gruppierungs-ID zusammen. Eine kürzere Ladezeit wirkt sich sowohl auf die Nutzererfahrung als auch auf das Suchmaschinen-Ranking Ihres Shops aus. Das PageSpeed-Tool finden Sie im Online-Servicebereich (OSB) im Dienst "Konfiguration" unter dem Reiter "PageSpeed-Tool". Sollte der Reiter dort nicht sichtbar sein, wenden Sie sich bitte an Ihren Ansprechpartner bei der WEBSALE AG. Für Stylesheets gilt ein identisches Verfahren mit eigenen Ordnern und eigenen Tags, beschrieben unter Wegweiser: CSS. ## Ordnerstruktur Im Verzeichnis Ihres Onlineshops finden Sie den Ordner `templates`, der neben allen verfügbaren Templates zwei Ordner für JavaScript enthält: ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} benutzer/templates/js_upload benutzer/templates/js_min ``` In den Ordner `js_upload` laden Sie Ihre eigenen JavaScript-Dateien per SFTP hoch. Dort bearbeiten und löschen Sie sie auch. Der Ordner `js_min` wird dagegen ausschließlich vom PageSpeed-Tool befüllt. Alle darin liegenden Dateien sind minimiert und mit einem URL-Fingerprinting versehen. Sie bearbeiten diese Dateien nicht selbst, da sie bei der nächsten Publizierung überschrieben werden. Sollte diese Ordnerstruktur in Ihrem Shop noch nicht vorhanden sein, legen Sie sie bitte entsprechend an. Ohne beide Ordner kann das PageSpeed-Tool nicht arbeiten. ![Min Korr 2](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/min_korr_2.png?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=a6198d5be22c48fa92eca49fba77ab79) ## JavaScript-Dateien anlegen und bearbeiten Der Mustershop enthält unter `benutzer/templates/js_upload` bereits JavaScript-Dateien, die Sie als Vorlage verwenden können. Mit einem SFTP-Client laden Sie vorhandene Dateien herunter, ergänzen sie und legen sie wieder ab. Ebenso fügen Sie dem Ordner eigene Dateien hinzu. Für den Zuschnitt der Gruppierungen hat sich eine Zweiteilung bewährt: * eine Gruppierung mit allen global eingesetzten Bibliotheken und Skripten, die auf jeder Seite geladen wird * weitere Gruppierungen je Einsatzzweck oder Seitentyp, die nur dort geladen werden, wo die enthaltenen Funktionen gebraucht werden Der Grund für diese Aufteilung ist die Datenmenge beim Seitenaufruf. Ein Skript, das nur der Warenkorb braucht, muss die Startseite nicht laden. Die Namen der Gruppierungen wählen Sie frei, solange Sie die HTML-Konventionen für Dateinamen einhalten. Quelle (externer Link): [HTML-Konventionen für Dateinamen](https://www.w3.org/TR/html4/types.html#type-name) > [!WARNING] > > Alle JavaScript-Dateien müssen zwingend unter `benutzer/templates/js_upload` gespeichert werden. Dateien an anderen Orten findet das PageSpeed-Tool nicht. ## Einbinden mit dem PageSpeed-Tool (empfohlen) Nachdem Sie Ihre Dateien per SFTP im Ordner `js_upload` bereitgestellt haben, weisen Sie sie den gewünschten Templates zu. Wir empfehlen den Weg über das PageSpeed-Tool, weil Ihr Shop dadurch die minimierten Dateien mit URL-Fingerprinting verwendet und nicht die unbearbeiteten Originale. Der Weg besteht aus drei Schritten: Tool aktivieren, Dateien gruppieren, Gruppierung im Template einbinden. Lassen Sie nur nicht-minimierte Dateiversionen vom PageSpeed-Tool verarbeiten. Das nochmalige Minimieren einer bereits minimierten Datei kann zu Fehlern führen. ### PageSpeed-Tool aktivieren Im OSB-Dienst "Konfiguration" ist das PageSpeed-Tool standardmäßig sichtbar und damit aktiv. Ist der Reiter bei Ihnen nicht vorhanden, wenden Sie sich an Ihren Ansprechpartner bei WEBSALE. Damit der Shop auch tatsächlich auf die erzeugten Dateien zugreift, ist zusätzlich ein Eintrag in der Shopkonfiguration `shop.config` nötig. Der Parameter gilt gemeinsam für CSS und JavaScript. Eine Freischaltung durch WEBSALE ist dafür nicht erforderlich, die oben beschriebene Ordnerstruktur muss allerdings vorliegen. ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... UseMinifiedCSSAndJS = yes ... ``` Referenz: [Abschnitt TopRank](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#toprank) ### JavaScript-Dateien gruppieren Eine JavaScript-Datei lässt sich über das PageSpeed-Tool nur einbinden, wenn sie einer Gruppierung zugewiesen ist. Die Gruppierung ist damit die kleinste Einheit, die der Shop später referenziert. Gruppierungen legen Sie im Online-Servicebereich (OSB) im Dienst "Konfiguration" an. Wählen Sie dort den Reiter "PageSpeed-Tool" und anschließend den Reiter "JS". In der linken Spalte unter der Überschrift "Gruppierungen" legen Sie beliebig viele seiten- oder themenspezifische Gruppierungen an. Jede Gruppierung erhält beim Anlegen eine frei wählbare Gruppierungs-ID. In den Beispielen auf dieser Seite lautet diese ID `start`. Die rechte Spalte ist zweigeteilt: * Unter "Ihre JavaScript-Bibliotheken" stehen alle Dateien, die Sie per SFTP im Ordner `js_upload` bereitgestellt haben. Fehlt eine gerade hochgeladene Datei, klicken Sie auf das Aktualisieren-Symbol. * Unter "[WEBSALE JavaScript Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)" stehen alle von WEBSALE V8s bereitgestellten Skripte. Diese laden Sie nicht selbst hoch, sie sind bereits auf dem Server vorhanden. Ziehen Sie die benötigten Dateien per Drag-and-drop innerhalb des OSB in die jeweilige Gruppierung. Klicken Sie anschließend auf das Weltkugel-Icon, um die Dateien der Gruppierung zu erzeugen. Pro Gruppierungs-ID entsteht dabei eine optimierte JavaScript-Datei im Ordner `js_min`. Jeder weitere Klick auf das Weltkugel-Icon erzeugt eine neue Version, sofern Sie inhaltliche Änderungen vorgenommen haben. > [!WARNING] > > Bearbeiten Sie eine bereits zugewiesene Datei später erneut im Ordner `js_upload`, wird die Änderung erst sichtbar, nachdem Sie die komplette Gruppierung mit dem Weltkugel-Icon erneut publiziert haben. Wenn Sie während der Designphase häufig kleine Änderungen vornehmen, verwenden Sie stattdessen den Direktzugriff. ### Gruppierung als ausgelagerte JavaScript-Datei einbinden Eine ausgelagerte JavaScript-Datei hat einen entscheidenden Vorteil: Sie wird von mehreren Templates verwendet, muss vom Browser aber nur einmal geladen werden. Für jede Gruppierungs-ID erzeugt das PageSpeed-Tool bereits eine solche Datei. Sie binden sie mit dem HTML-Element `script` an einer beliebigen Stelle Ihres Templates ein. Den Pfad liefert das Tag `WS-JSURL()`, in dessen Klammern Sie die Gruppierungs-ID angeben. Beispiel: Die Gruppierung `start` soll im `` des Templates eingebunden werden. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Das Tag erzeugt für den Browser den Verweis auf die minimierte Datei der Gruppierung: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Der Namensbestandteil `753e2835a4` ist das URL-Fingerprinting. Er ändert sich mit jeder neuen Version der Gruppierung. Referenz: WS-JSURL() > [!WARNING] > > Eine ausgelagerte JavaScript-Datei darf keine WEBSALE-Tags und keine Textvariablen enthalten. Der Shop parst diese Dateien nicht, WEBSALE-Tags werden also nicht ersetzt. Der Ordner wird außerdem von der Textpflege-Plattform nicht berücksichtigt, sodass auch Textvariablen unersetzt bleiben. Binden Sie das JavaScript in diesen beiden Fällen inline in das gewünschte Template ein. ### Gruppierung inline einbinden JavaScript-Funktionen müssen nicht zwingend über eine externe Datei eingebunden werden. Sie lassen sich auch direkt in die HTML-Seite schreiben. Das ist der richtige Weg, wenn Ihr Skript WEBSALE-Tags oder Textvariablen enthält. Der Nachteil der klassischen Inline-Einbindung entfällt dabei. Sie pflegen die Funktion weiterhin zentral in einer Datei im Ordner `js_upload` und nicht auf jeder einzelnen Seite. Das PageSpeed-Tool setzt den Inhalt beim Seitenaufbau ein. Den Inhalt aller Dateien einer Gruppierung liefert das Tag `WS-JSInline()`, in dessen Klammern Sie die Gruppierungs-ID angeben. Beispiel: Die Skripte der Gruppierung `start` sollen inline innerhalb des `` eingebunden werden. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Das Tag gibt für den Browser alle Skripte der Gruppierung aus: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Referenz: WS-JSInline() ## Direktzugriff während der Designphase Beim Einbinden über das PageSpeed-Tool werden Änderungen an JavaScript-Dateien erst nach einem Klick auf das Weltkugel-Icon sichtbar. Beim Aufbau eines neuen Shops ist dieser Zwischenschritt aufwendig, weil er sich bei jeder Korrektur wiederholt. Für diesen Fall gibt es den Direktzugriff. Der Shop greift dabei nicht auf die generierten Dateien im Ordner `js_min` zu, sondern auf die originalen Dateien im Ordner `js_upload`, die der Gruppierung zugewiesen sind. Änderungen sind damit sofort nach dem Hochladen und einem Neuladen im Browser sichtbar. Der Direktzugriff besteht aus zwei Teilen. Erstens einer Einstellung in der Shopkonfiguration `shop.config`, die festlegt, wann der Modus greift. Zweitens einer Klammerung im Template, die beide Fälle abdeckt. Die Einstellung gilt gemeinsam für CSS und JavaScript. ### Permanenter Direktzugriff Mit der folgenden Einstellung greift der Shop dauerhaft auf die Originaldateien zu. Diese Einstellung empfiehlt sich, solange Sie einen Shop aufbauen und häufig Änderungen vornehmen. ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ActivatePermanentDirectJSCSSTest = yes ... ``` Referenz: [Abschnitt TopRank](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#toprank) ### Direktzugriff nur auf Abruf Mit dem Wert `no` ist der permanente Direktzugriff deaktiviert. Der Shop greift dann nur auf die Originaldateien zu, wenn Sie ihn mit dem Parameter `&jscssdirect-test=on` aufrufen. Mit `&jscssdirect-test=off` kehrt er zu den Dateien im Ordner `js_min` zurück. ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ActivatePermanentDirectJSCSSTest = no ... ``` Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) ### Beispiel: ausgelagerte JavaScript-Datei im Direktzugriff Im Direktzugriff liefert der Shop jede Datei der Gruppierung einzeln aus, nicht eine zusammengefasste Datei. Das Template muss deshalb über alle Dateien der Gruppierung laufen. Dafür gibt es die Klammerung `WS-DirectJS()` mit der Gruppierungs-ID und darin die Schleife `@WS-DirectJS`, die pro Durchlauf über `WS-DirectJSURL` den Pfad einer Datei liefert. Damit das Template in beiden Zuständen funktioniert, umschließt die Klammerung `ST-DirectJSCSSTest` den Direktzugriff-Fall und `!ST-DirectJSCSSTest` den Normalfall. Beispiel: Der Gruppierung `start` sind die beiden Dateien `ws-module-bootstrap-ajaxmodal.js` und `ws-module-bootstrap-fillstars.js` zugewiesen. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... {ST-DirectJSCSSTest} {WS-DirectJS(start)} {@WS-DirectJS} {/@WS-DirectJS} {/WS-DirectJS(start)} {/ST-DirectJSCSSTest} {!ST-DirectJSCSSTest} {/!ST-DirectJSCSSTest} ... ``` Für den Browser entsteht daraus je nach Zustand entweder ein Verweis pro Originaldatei oder ein einzelner Verweis auf die minimierte Gruppierungsdatei: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Referenz: [ST-DirectJSCSSTest](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md) Referenz: WS-DirectJS() Referenz: WS-DirectJSURL() ### Beispiel: Inline-Einbindung im Direktzugriff Auch inline eingebundene Skripte lassen sich im Direktzugriff verwenden. Statt des Pfads liefert `WS-DirectJSInline` hier den Inhalt der jeweiligen Datei. Beispiel: Der Gruppierung `start` sind dieselben beiden Dateien zugewiesen. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... {ST-DirectJSCSSTest} {WS-DirectJS(start)} {/WS-DirectJS(start)} {/ST-DirectJSCSSTest} {!ST-DirectJSCSSTest} {/!ST-DirectJSCSSTest} ... ``` Für den Browser entsteht daraus im Direktzugriff der unveränderte Inhalt der Originaldateien, im Normalfall der minimierte Inhalt der Gruppierung: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Referenz: WS-DirectJSInline() ## Neue Gruppierungen im Design-Testmodus erproben Eine neue Gruppierung muss nicht sofort im Livemodus eingebaut werden. Für alle beschriebenen Integrationsvarianten steht Ihnen die Klammerung `ST-DesignTest` zur Verfügung. Damit sehen nur Sie im Design-Testmodus die neue Zuweisung, während Besucher weiterhin die bisherige Fassung erhalten. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {ST-DesignTest} Zuweisung der JavaScript-Dateien, die im Design-Testmodus verwendet werden sollen {/ST-DesignTest} {!ST-DesignTest} Zuweisung der JavaScript-Dateien, die im Livemodus verwendet werden sollen {/!ST-DesignTest} ``` Referenz: [ST-DesignTest](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md) Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) ## Debug-Modus für die Fehlersuche im Browser Greifen die JavaScript-Anweisungen nicht wie gewünscht, ist die Fehlersuche in einer minimierten Datei mühsam. Deshalb können Sie die Einbindung der minimierten Datei per Aufruf unterdrücken und stattdessen die nicht-minimierte Fassung im Browser verwenden. Das PageSpeed-Tool legt diese Fassung zeitgleich mit der minimierten Datei im Ordner `js_min` ab. Binden Sie Ihre Dateien per Direktzugriff ein, brauchen Sie diesen Modus nicht. Der Browser erhält dort ohnehin die nicht-minimierten Originale. Hängen Sie zum Aktivieren an einen beliebigen Shop-Aufruf den Parameter `&jscssminified-test=off` an. Der Shop muss sich dafür im Testmodus befinden. ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} https://www.xyz.de/?test=on&jscssminified-test=off ``` Der Browser erhält dann die nicht-minimierte Fassung, erkennbar am fehlenden `.min` im Dateinamen: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Mit `&jscssminified-test=on` kehren Sie zu den minimierten Dateien zurück: ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} https://www.xyz.de/?test=on&jscssminified-test=on ``` ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) ## Migration auf das PageSpeed-Tool Betreiben Sie bereits einen Shop, der seine JavaScript-Dateien ohne PageSpeed-Tool einbindet, führt Sie ein eigener Leitfaden durch die Umstellung. Materialien: Leitfaden Umstellung auf PageSpeed-Tool ## Einbinden ohne PageSpeed-Tool Die Nutzung des PageSpeed-Tools ist in WEBSALE V8s nicht zwingend. Sie können JavaScript-Dateien auch über einen relativen Pfad in jedes Template einbinden oder Skripte direkt im Template notieren. Dieser Weg ist einfacher, verzichtet aber auf Minimierung und URL-Fingerprinting. Bei der Einbindung über einen relativen Pfad ist das `base`-Element zu beachten. Es legt die Basis für alle relativen Verweise fest und zeigt in der Regel auf das Subshop-Templateverzeichnis, beispielsweise `benutzer/templates/Deutsch`. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Wegweiser: base-href Wegweiser: [URL-Template](https://dokumentation.websale.de/v8s/produkte/backinstockmail-ordernow-service.md#welche-tags-erlaubt-sind) Quelle (externer Link): [HTML/Kopfdaten/base](https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/base) > [!WARNING] > > Verwenden Sie auch auf diesem Weg ausschließlich die Dateien im Ordner `js_upload`. Ein automatisches URL-Fingerprinting und eine automatische Minimierung finden nicht statt. Beides müssen Sie nach jeder Änderung manuell nachziehen, sonst liefert der Browser eine veraltete Datei aus dem Cache aus. > > Auch hier gilt: Eine ausgelagerte JavaScript-Datei darf keine WEBSALE-Tags und keine Textvariablen enthalten, weil der Shop diese Dateien nicht parst und die Textpflege-Plattform den Ordner nicht berücksichtigt. Binden Sie das JavaScript in diesen Fällen inline ein. Bei der Einbindung direkt im Quellcode notieren Sie das Skript im Template selbst: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` ## WEBSALE JavaScript-Bibliothek Mit der WEBSALE JavaScript-Bibliothek stellt Ihnen WEBSALE V8s alle JavaScript-Plugins zur Verfügung, die für die Standard-Shop-Funktionen benötigt werden. Sie müssen diese Funktionen also nicht selbst nachbauen. Es gibt drei Ausbaustufen, die sich im Umfang unterscheiden. Welche für Sie passt, hängt davon ab, wie viel Sie selbst mitbringen wollen: | Ausbaustufe | Enthält | Sinnvoll, wenn | | - | - | - | | Systembibliothek | jQuery, Colorbox und alle WEBSALE-Funktionen | Sie ein Komplett-Paket wollen und keine eigene jQuery-Version brauchen | | Core-Bibliothek | nur die WEBSALE-Funktionen | Sie eine eigene jQuery-Version einsetzen wollen | | WS-Module | einzelne Funktionen als eigene Dateien | Sie nur wenige Features brauchen und die Datenmenge klein halten wollen | ### Das Grundmuster: Modul-Komponente und Design-Komponente Alle drei Ausbaustufen folgen demselben Muster aus zwei Teilen. Wenn Sie dieses Muster einmal verstanden haben, gilt es für jede Bibliothek und jedes Modul gleichermaßen. Die **Modul-Komponente** ist eine zentrale, shopübergreifende Datei auf dem WEBSALE-Server. Sie enthält die eigentliche Funktion. WEBSALE wartet und aktualisiert sie laufend, deshalb laden Sie sie nicht herunter und legen sie auch nicht in Ihrem Shopverzeichnis ab. Im PageSpeed-Tool steht sie unter "WEBSALE JavaScript Bibliothek" bereit. Ohne PageSpeed-Tool binden Sie sie direkt über ihren festen Pfad ein: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Die **Design-Komponente** ist dagegen shop-spezifisch. In ihr konfigurieren Sie das Modul, passen es an und erweitern es um eigene Funktionen. Sie laden sie einmalig herunter, ändern sie nach Ihren Vorstellungen und legen sie im Ordner `js_upload` ab. Anschließend steht sie im PageSpeed-Tool unter "Ihre JavaScript-Bibliotheken" bereit. ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} https:///$WS/ws_sysdata/js/-.js ``` > [!WARNING] > > Modul-Komponente und Design-Komponente müssen dieselbe Versionsnummer tragen. Nur dann ist die Funktion gewährleistet. Werden Ihnen mehrere Versionen angeboten, beispielsweise 1.8.3 und 1.8.4, verwenden Sie die höhere. Um Kollisionen bei Funktions- und Variablennamen zu vermeiden, tragen alle Funktionen und Variablen der WEBSALE V8s Module das Präfix `ws-`. Verwenden Sie dieses Präfix nicht für eigene Funktionen und Variablen, solange Sie die WEBSALE JavaScript-Bibliothek einsetzen. ### Systembibliothek und Design-Komponente Die WEBSALE Systembibliothek ist das große Komplett-Paket. Sie enthält das JavaScript-Framework jQuery, das jQuery-Plugin Colorbox sowie alle WEBSALE-eigenen Funktionen für Features, die JavaScript oder AJAX verwenden. Sie ist bereits komprimiert, was das Transfervolumen senkt und die Ladezeit verkürzt. Da alle Module in einer Datei liegen, brauchen Sie nicht für jede Funktion eine eigene Datei. Beides kann sich positiv auf Ihr Ranking auswirken. Die passende Design-Komponente wird bei der Bereitstellung eines Shops auf Wunsch automatisch mitgeliefert. Sprechen Sie dazu Ihren WEBSALE Ansprechpartner an. **Mit PageSpeed-Tool (empfohlen):** Die Systembibliothek steht im OSB unter "WEBSALE JavaScript Bibliothek" bereit und wird per Drag-and-drop einer Gruppierung zugewiesen. Über einen Klick auf den Dateinamen sehen Sie den Inhalt der Datei ein. Die Design-Komponente laden Sie herunter, passen sie an und legen sie in `js_upload` ab, danach weisen Sie auch sie einer Gruppierung zu. Die Einbindung im Template erfolgt anschließend wie im Abschnitt "Einbinden mit dem PageSpeed-Tool" beschrieben. ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} https:///$WS/ws_sysdata/js/ws-design-.js ``` **Ohne PageSpeed-Tool:** Die Systembibliothek binden Sie über ihren festen Serverpfad ein, die selbst angepasste Design-Komponente relativ aus `js_upload`. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` ### Core-Bibliothek und Design-Komponente Die WEBSALE Core-Bibliothek ist das kleine Komplett-Paket. Im Unterschied zur Systembibliothek enthält sie weder jQuery noch Colorbox, sondern ausschließlich die WEBSALE-spezifischen Funktionen. Der Vorteil: Sie können Ihre eigene jQuery-Version einsetzen und sind nicht an die von WEBSALE ausgelieferte gebunden. Welche jQuery-Bibliotheken und Plugins zwingend nötig sind, steht als Kommentar in der Core-Bibliothek. Die Core-Bibliothek steht ab Version 1.8.2 zur Verfügung. Wie die Systembibliothek ist sie eine zentrale Systemkomponente, die WEBSALE laufend wartet. Sie muss deshalb nicht heruntergeladen und nicht im Shopverzeichnis gespeichert werden. Auch sie benötigt eine Design-Komponente. Weil jQuery fehlt, kommt ein Schritt hinzu: Laden Sie zuerst Ihre gewünschte jQuery-Bibliothek herunter und legen Sie sie im Ordner `js_upload` ab. Ohne geladenes jQuery funktionieren die WEBSALE-Funktionen nicht. Quelle (externer Link): [jQuery](https://jquery.com/) **Mit PageSpeed-Tool (empfohlen):** Weisen Sie zuerst die jQuery-Bibliothek, dann die Core-Bibliothek aus "WEBSALE JavaScript Bibliothek" und zuletzt Ihre angepasste Design-Komponente aus "Ihre JavaScript-Bibliotheken" einer Gruppierung zu. Die Einbindung im Template erfolgt anschließend wie im Abschnitt "Einbinden mit dem PageSpeed-Tool" beschrieben. **Ohne PageSpeed-Tool:** Binden Sie die drei Bestandteile in dieser Reihenfolge in das Template ein. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` ### WS-Module Die WEBSALE WS-Module sind einzelne Funktionen, die aus der Systembibliothek herausgelöst wurden und als eigenständige Dateien zur Verfügung stehen. Erkennbar sind sie am Präfix `ws-module-`. Weder die Systembibliothek noch die Core-Bibliothek werden dafür benötigt. Der Sinn dieser Aufteilung ist die Datenmenge. Wenn Ihr Shop nur zwei der Funktionen braucht, laden Besucher auch nur diese beiden Dateien statt der kompletten Bibliothek. Verfügbar sind derzeit folgende Module: * Basic-Komponente (Voraussetzung) * Abhängige Varianten per AJAX nachladen * Econda Cross Sell * Eingabeabhängige Adressdatensteuerung * Nachladen von Templates per AJAX * Produkte per AJAX auf die Merkliste setzen * Produkte per AJAX in den Warenkorb legen * Produktempfehlungsfunktion per AJAX * Produktvergleich * SEO-Content für Produkte * Web-to-Print * Link-Shortener * Passwortchecker ("Passwortampel") Für den Einsatz der WS-Module sind zwei Voraussetzungen zu erfüllen. Erstens muss eine jQuery-Bibliothek geladen sein, weil alle WEBSALE-Funktionen darauf aufbauen. Zweitens muss die Basic-Komponente auf jedem Template genau einmal vorhanden sein, auf dem Sie Module verwenden. Die Basic-Komponente besteht selbst aus Modul- und Design-Komponente. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Mit dem PageSpeed-Tool gilt dieselbe Reihenfolge. Sie weisen die Dateien einer Gruppierung zu, statt sie einzeln im Template zu notieren. Die Modul-Komponenten finden Sie unter "WEBSALE JavaScript Bibliothek", Ihre angepassten Design-Komponenten nach dem Hochladen unter "Ihre JavaScript-Bibliotheken". Eine Übersicht aller bereitgestellten JavaScripts mit Versionen und Inhalten finden Sie unter Materialien: WEBSALE JavaScript Bibliothek. ## Tracking-Datei (ws\_analyse.js) Die Tracking-Datei `ws_analyse.js` ist Bestandteil der WEBSALE V8s Tracking-Schnittstelle. Klassisch fasst sie die Tracking-Skripte aller Anbieter an einer Stelle zusammen. In Verbindung mit dem PageSpeed-Tool entfällt diese Datei. Stattdessen legen Sie jedes Tracking-Skript als eigene Datei im Ordner `js_upload` ab und weisen alle einer gemeinsamen Gruppierung zu. Diese Gruppierung binden Sie dann an der gewünschten Stelle auf allen Seiten ein. Der Vorteil gegenüber der Sammeldatei ist derselbe wie bei allen Gruppierungen: Die Skripte werden minimiert und mit URL-Fingerprinting ausgeliefert. Wegweiser: [Tracking-Schnittstelle](https://dokumentation.websale.de/v8s/materialien/materialien-tracking-schnittstelle.md) ## Hinweise zu jQuery-Bibliotheken Die im Mustershop bereitgestellte jQuery-Bibliothek ist `jquery-2.2.2.min.js`. Von einer Änderung dieser Datei ist abzuraten, weil Sie damit die Update- und Kompatibilitätsfähigkeit von jQuery verlieren. Grundsätzlich ist jQuery abwärtskompatibel. In der Regel profitieren Sie von einem Update der jQuery-Datei also von Erweiterungen und Bugfixes, ohne Ihre eigenen Skripte anpassen zu müssen. Prüfen Sie vor einem Update dennoch die Versionshinweise des Herstellers, um auf Änderungen reagieren zu können, die Ihren Code betreffen. Quelle (externer Link): [jQuery](https://jquery.com/) ## SEO-optimierte Auslieferung von JavaScript-Dateien Die Performance einer Seite ist eines der wichtigsten Kriterien für ein gutes Suchmaschinen-Ranking. JavaScript-Dateien fallen dabei wegen ihrer Größe besonders ins Gewicht. Die folgenden Quellen erläutern, wie Sie auf JavaScript-Funktionen nicht verzichten müssen und trotzdem eine gute Performance erreichen. * [JavaScript optimieren](https://developers.google.com/speed/articles/optimizing-javascript) * [Browser-Caching nutzen](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=de) * [URL-Fingerprinting und Caching-Header](https://developers.google.com/speed/docs/insights/LeverageBrowserCaching?hl=de#welche-caching-header-sollte-ich-verwenden) * [Sichtbare Inhalte priorisieren](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent) ## Related topics - [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) - [Link-Shortener](https://dokumentation.websale.de/v8s/funktionen-zur-shop-optimierung/link-shortener.md) - [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) - [Ladezeit und Verschlüsselung](https://dokumentation.websale.de/v8s/seo/ladezeit-und-verschluesselung.md) - [Einwilligung zur Datenverarbeitung (Cookies)](https://dokumentation.websale.de/v8s/einstellungen/einwilligung-zur-datenverarbeitung-cookies.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.