JavaScript und jQuery - WEBSALE Dokumentation

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 Das Verfahren für JavaScript entspricht dem für CSS. 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:

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.

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

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.

<TopRank>
...
   UseMinifiedCSSAndJS = yes
...
</TopRank>

Referenz: Abschnitt 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” 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.

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 <head> des Templates eingebunden werden.

<head>
   ...
   <script type="text/javascript" src="~WS-JSURL(start)~"></script>
   ...
</head>

Das Tag erzeugt für den Browser den Verweis auf die minimierte Datei der Gruppierung:

<head>
   ...
   <script type="text/javascript" src="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_min/start_753e2835a4.min.js"></script>
   ...
</head>

Der Namensbestandteil 753e2835a4 ist das URL-Fingerprinting. Er ändert sich mit jeder neuen Version der Gruppierung. Referenz: WS-JSURL()

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 <body> eingebunden werden.

<body>
   ...
   <script>
      ~WS-JSInline(start)~
   </script>
   ...
</body>

Das Tag gibt für den Browser alle Skripte der Gruppierung aus:

<script>
$(document).on('click', '.openmodal', function(event) {
    "use strict";
    event.preventDefault();
    $($(this).attr('data-modal-target-body')).load($(this).attr('href')+' .ajaxcontent');
    $($(this).attr('data-modal-target')).modal('show');
});
</script>

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.

<TopRank>
   ...
   ActivatePermanentDirectJSCSSTest    =    yes
   ...
</TopRank>

Referenz: Abschnitt 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.

<TopRank>
   ...
   ActivatePermanentDirectJSCSSTest    =    no
   ...
</TopRank>

Wegweiser: Testmodi des Shops ein- und ausschalten

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.

<head>
   ...
   <!-- Klammerung für den aktivierten Direktzugriff -->
   {ST-DirectJSCSSTest}
      {WS-DirectJS(start)}
         {@WS-DirectJS}
            <script type="text/javascript" src="~WS-DirectJSURL~"></script>
         {/@WS-DirectJS}
      {/WS-DirectJS(start)}
   {/ST-DirectJSCSSTest}

   <!-- Klammerung für den deaktivierten Direktzugriff -->
   {!ST-DirectJSCSSTest}
      <script type="text/javascript" src="~WS-JSURL(start)~"></script>
   {/!ST-DirectJSCSSTest}
   ...
</head>

Für den Browser entsteht daraus je nach Zustand entweder ein Verweis pro Originaldatei oder ein einzelner Verweis auf die minimierte Gruppierungsdatei:

<head>
   ...
   <!-- Aktivierter Direktzugriff: alle Dateien der Gruppierung, nicht minimiert -->
   <script type="text/javascript" src="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_upload/ws-module-bootstrap-ajaxmodal.js"></script>
   <script type="text/javascript" src="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_upload/ws-module-bootstrap-fillstars.js"></script>

   <!-- Deaktivierter Direktzugriff: eine minimierte Gruppierungsdatei -->
   <script type="text/javascript" src="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_min/start_753e2835a4.min.js"></script>
   ...
</head>

Referenz: ST-DirectJSCSSTest 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.

<head>
   ...
   <!-- Klammerung für den aktivierten Direktzugriff -->
   {ST-DirectJSCSSTest}
      {WS-DirectJS(start)}
         <script>
         {@WS-DirectJS}
            ~WS-DirectJSInline~
         {/@WS-DirectJS}
         </script>
      {/WS-DirectJS(start)}
   {/ST-DirectJSCSSTest}

   <!-- Klammerung für den deaktivierten Direktzugriff -->
   {!ST-DirectJSCSSTest}
      <script>
         ~WS-JSInline(start)~
      </script>
   {/!ST-DirectJSCSSTest}
   ...
</head>

Für den Browser entsteht daraus im Direktzugriff der unveränderte Inhalt der Originaldateien, im Normalfall der minimierte Inhalt der Gruppierung:

<!-- Aktivierter Direktzugriff: Originalinhalt, nicht minimiert -->
<script>
$(document).on('click', '.openmodal', function(event) {
    "use strict";
    event.preventDefault();
    $($(this).attr('data-modal-target-body')).load($(this).attr('href')+' .ajaxcontent');
    $($(this).attr('data-modal-target')).modal('show');
});

function fillStars() {
    "use strict";
    $('.rating').each( function() {
        var i = 1;while(i<=$(this).attr('data-rating')){$(this).find('.s'+i).removeClass('nofill').addClass('starfill');i++;}
    });
}

$(document).bind('ready ajaxComplete', function(){
    "use strict";
    fillStars();
});
</script>

<!-- Deaktivierter Direktzugriff: minimierter Inhalt der Gruppierung -->
<script>
$(document).on('click', '.openmodal', function(event) {"use strict";event.preventDefault();
$($(this).attr('data-modal-target-body')).load($(this).attr('href')+' .ajaxcontent');$($(this).attr('data-modal-target')).modal('show');});
function fillStars() {"use strict";$('.rating').each( function() {var i = 1;
while(i<=$(this).attr('data-rating')){$(this).find('.s'+i).removeClass('nofill').addClass('starfill');i++;}});}
$(document).bind('ready ajaxComplete', function(){"use strict";fillStars();});
</script>

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.

{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 Wegweiser: Testmodi des Shops ein- und ausschalten

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.

https://www.xyz.de/?test=on&jscssminified-test=off

Der Browser erhält dann die nicht-minimierte Fassung, erkennbar am fehlenden .min im Dateinamen:

<script type="text/javascript" src="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_min/start_753e2835a4.js"></script>

Mit &jscssminified-test=on kehren Sie zu den minimierten Dateien zurück:

https://www.xyz.de/?test=on&jscssminified-test=on

<script type="text/javascript" src="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_min/start_753e2835a4.min.js"></script>

Wegweiser: Testmodi des Shops ein- und ausschalten

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.

<head>
   ...
   <base href="~URL-Template~">
   <script type="text/javascript" src="../js_upload/ihre-js-datei.js"></script>
   ...
</head>

Wegweiser: base-href Wegweiser: URL-Template Quelle (externer Link): HTML/Kopfdaten/base

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:

<script>
function selectPayment(payID) {
   $('#js_paydeliv').val('on');
   $('#PaymentDelivery').submit();
};
function selectDeliverer(payID) {
   $('#js_paydeliv').val('on');
   $('#PaymentDelivery').submit();
};
</script>

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:

<script type="text/javascript" src="/$WS/ws_sysdata/js/<Modul-Komponente>-<Versionskennung>.js"></script>

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.

https://<ihre-domain>/$WS/ws_sysdata/js/<design-komponente>-<Versionskennung>.js

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.

https://<ihre-domain>/$WS/ws_sysdata/js/ws-design-<Versionskennung>.js

Ohne PageSpeed-Tool: Die Systembibliothek binden Sie über ihren festen Serverpfad ein, die selbst angepasste Design-Komponente relativ aus js_upload.

<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-<Versionskennung>.js"></script>
<script type="text/javascript" src="../js_upload/ws-design-<Versionskennung>.js"></script>

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 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.

<script type="text/javascript" src="../js_upload/jquery.<Versionskennung>.min.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-core-<Versionskennung>.js"></script>
<script type="text/javascript" src="../js_upload/ws-design-<Versionskennung>.js"></script>

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.

<script type="text/javascript" src="../js_upload/jquery.<Versionskennung>.min.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-module-basics-1.8.4.js"></script>
<script type="text/javascript" src="../js_upload/ws-module-basics-design-1.8.4.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/<Modul-Komponente>-<Versionskennung>.js"></script>
<script type="text/javascript" src="../js_upload/<Design-Komponente>-<Versionskennung>.js"></script>

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

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

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.

​Ordnerstruktur

​JavaScript-Dateien anlegen und bearbeiten

​Einbinden mit dem PageSpeed-Tool (empfohlen)

​PageSpeed-Tool aktivieren

​JavaScript-Dateien gruppieren

​Gruppierung als ausgelagerte JavaScript-Datei einbinden

​Gruppierung inline einbinden

​Direktzugriff während der Designphase

​Permanenter Direktzugriff

​Direktzugriff nur auf Abruf

​Beispiel: ausgelagerte JavaScript-Datei im Direktzugriff

​Beispiel: Inline-Einbindung im Direktzugriff

​Neue Gruppierungen im Design-Testmodus erproben

​Debug-Modus für die Fehlersuche im Browser

​Migration auf das PageSpeed-Tool

​Einbinden ohne PageSpeed-Tool

​WEBSALE JavaScript-Bibliothek

​Das Grundmuster: Modul-Komponente und Design-Komponente

​Systembibliothek und Design-Komponente

​Core-Bibliothek und Design-Komponente

​WS-Module

​Tracking-Datei (ws_analyse.js)

​Hinweise zu jQuery-Bibliotheken

​SEO-optimierte Auslieferung von JavaScript-Dateien

Ordnerstruktur

JavaScript-Dateien anlegen und bearbeiten

Einbinden mit dem PageSpeed-Tool (empfohlen)

PageSpeed-Tool aktivieren

JavaScript-Dateien gruppieren

Gruppierung als ausgelagerte JavaScript-Datei einbinden

Gruppierung inline einbinden

Direktzugriff während der Designphase

Permanenter Direktzugriff

Direktzugriff nur auf Abruf

Beispiel: ausgelagerte JavaScript-Datei im Direktzugriff

Beispiel: Inline-Einbindung im Direktzugriff

Neue Gruppierungen im Design-Testmodus erproben

Debug-Modus für die Fehlersuche im Browser

Migration auf das PageSpeed-Tool

Einbinden ohne PageSpeed-Tool

WEBSALE JavaScript-Bibliothek

Das Grundmuster: Modul-Komponente und Design-Komponente

Systembibliothek und Design-Komponente

Core-Bibliothek und Design-Komponente

WS-Module

Tracking-Datei (ws_analyse.js)

Hinweise zu jQuery-Bibliotheken

SEO-optimierte Auslieferung von JavaScript-Dateien