WEBSALE V8s stellt Ihnen standardmäßig einen Mustershop zur Verfügung. Dieser verwendet die jQuery-Bibliothek in der Version 2.2.2. Zusätzlich werden weitere JavaScript-Dateien mit WEBSALE- und Bootstrap-spezifischen Anweisungen bereitgestellt.

Quelle (externer Link): jQuery

Alle JavaScript-Dateien werden Ihnen sowohl in einer minimierten als auch in einer nicht-minimierten Fassung zur Verfügung gestellt. Zusätzlich werden alle minimierten Dateien mit einem sogenannten URL-Fingerprinting versehen. Durch URL-Fingerprinting ändert sich mit jeder Änderung an einer JavaScript-Datei automatisch der Name der Datei. Bei einer Änderung der Datei ist der Browser also gezwungen, die JavaScript-Datei erneut aufzurufen. Dies ermöglicht das WEBSALE V8s PageSpeed-Tool.

Wegweiser: PageSpeed-Tool

Darüber hinaus stellt Ihnen WEBSALE V8s in der WEBSALE JavaScript-Bibliothek bereits optimierte und auf WEBSALE V8s abgestimmte JavaScript-Bibliotheken mit unterschiedlichem Funktionsumfang zur Verfügung.

Referenz: WEBSALE JavaScript-Bibliothek

Der Shop selbst greift im Standard nur auf die minimierten Dateien mit URL-Fingerprinting zu.

WEBSALE V8s stellt Ihnen innerhalb des PageSpeed-Tools eine Möglichkeit zur Verfügung, Ihre JavaScript-Dateien seiten- oder themenspezifisch zu gruppieren. Dadurch können Sie pro Template nur die JavaScript-Dateien einbinden, die für den Aufruf der gewünschten Seite benötigt werden. Damit diese Dateien nicht alle einzeln eingebunden werden müssen, können sie zu einer Gruppierung mit einer frei wählbaren ID zusammengefasst werden. Diese Gruppierung wird dann als separate JavaScript-Datei mit einer verringerten Dateigröße (minimiert) und mit URL-Fingerprinting bereitgestellt. Die dadurch reduzierte Ladezeit Ihrer JavaScript-Dateien wirkt sich nicht nur positiv auf die User Experience, sondern auch auf das Suchmaschinen-Ranking Ihres Online-Shops aus.

Das PageSpeed-Tool steht Ihnen im OSB-Dienst "Konfiguration" in dem Reiter "PageSpeed-Tool" zur Verfügung. Sollte dies nicht der Fall sein, kontaktieren Sie bitte Ihren Ansprechpartner bei der WEBSALE AG.

 

Inhalt

1 Ordnerstruktur

2 Erstellen/Bearbeiten einer JavaScript-Datei in WEBSALE V8s

3 Einbinden neuer JavaScript-Dateien mit dem WEBSALE V8s PageSpeed-Tool (empfohlen)

3.1 PageSpeed-Tool aktivieren

3.2 JavaScript-Dateien gruppieren

3.3 Einbinden über eine ausgelagerte JavaScript-Datei

3.4 Einbinden direkt im Quellcode (inline)

3.5 Einbinden per Direktzugriff

3.6 Einbinden im Design-Testmodus

3.7 Debug-Modus für schnellere Fehlersuche im Browser

4 Migration auf das PageSpeed-Tool

5 Einbinden neuer JavaScript-Dateien ohne PageSpeed-Tool

5.1 Einbinden über eine ausgelagerte JavaScript-Datei

5.2 Einbinden direkt im Quellcode (inline)

6 WEBSALE JavaScript-Bibliothek

6.1 WEBSALE Systembibliothek & Design-Komponente – das große Komplett-Paket

6.1.1 Integration mit PageSpeed-Tool (empfohlen)

6.1.2 Integration ohne PageSpeed-Tool

6.2 WEBSALE Core-Bibliothek & Design-Komponente – das kleine Komplett-Paket

6.2.1 Integration mit PageSpeed-Tool (empfohlen)

6.2.2 Integration ohne PageSpeed-Tool

6.3 WEBSALE WS-Module

6.3.1 Übersicht der WEBSALE Module

6.3.2 Integration mit PageSpeed-Tool (empfohlen)

6.3.3 Integration ohne PageSpeed-Tool

6.4 Übersicht aller WEBSALE JavaScripts

7 Tracking-Datei (ws_analyse.js)

8 Hinweise zu jQuery-Bibliotheken

9 SEO-optimierte Auslieferung von JavaScript-Dateien

 

1 Ordnerstruktur

Im Verzeichnis Ihres Onlineshops finden Sie den Ordner templates, der neben allen verfügbaren Templates die Ordner js_upload und js_min enthält. Während Sie mit einem einfachen FTP-Client dem Ordner js_upload neue JavaScript-Dateien hinzufügen können, wird der Ordner js_min durch das PageSpeed-Tool befüllt. Alle im Ordner js_min befindlichen Dateien sind automatisch mit einem URL-Fingerprinting versehen und minimiert.

Ordnerstruktur, um JavaScript-Dateien hinzuzufügen, zu löschen oder bereits vorhandene JavaScript-Dateien zu bearbeiten:

Sollte diese Ordnerstruktur noch nicht bei Ihnen vorhanden sein, legen Sie diese Struktur bitte entsprechend an.

2 Erstellen/Bearbeiten einer JavaScript-Datei in WEBSALE V8s

Der Mustershop von WEBSALE V8s enthält bereits JavaScript-Dateien, die Sie als Vorlage verwenden und selbstverständlich auch bearbeiten können. Diese Dateien finden Sie unter benutzer/templates/js_upload. Mit einem einfachen FTP-Client können Sie aus dem Ordner js_upload vorhandene JavaScript-Dateien herunterladen, um sie zu bearbeiten/ergänzen. Ebenso können Sie diesem Ordner weitere JavaScript-Dateien hinzufügen.

Sofern Sie auf JavaScript-Bibliotheken wie jQuery oder ähnliche zurückgreifen, die auf nahezu allen Seiten verwendet werden, empfiehlt es sich, eine Gruppierung aller global eingesetzten Bibliotheken und Skripts einzurichten und diese entsprechend auf allen Seiten zu laden. Darüber hinaus können Sie je nach Einsatzzweck oder Seitentyp weitere Gruppierungen mit konkreten Skripten anlegen, die nur auf Shopseiten geladen werden, auf denen die enthaltenen Funktionen notwendig sind. Dadurch begrenzen Sie die Menge der Daten, die beim Aufruf Ihres Shops geladen werden muss, und erzielen eine bessere Performance. Die Namen der Gruppierungen können Sie frei wählen, Sie müssen lediglich die HTML-Konventionen für Dateinamen berücksichtigen.

Quelle (externer Link): HTML-Konventionen für Dateinamen

Bitte beachten Sie, dass alle JavaScript-Dateien zwingend unter benutzer/templates/js_upload gespeichert werden müssen.

3 Einbinden neuer JavaScript-Dateien mit dem WEBSALE V8s PageSpeed-Tool (empfohlen)

Nachdem Sie Ihre neu angelegten Dateien via SFTP im Verzeichnis js_upload bereitgestellt haben, müssen diese jetzt den gewünschten Templates zugewiesen werden.

Wir empfehlen die Einbindung über das PageSpeed-Tool, da Ihr Shop dadurch die minimierten JavaScript-Dateien mit URL-Fingerprinting verwendet.

3.1 PageSpeed-Tool aktivieren

Standardmäßig ist das PageSpeed-Tool im OSB-Dienst "Konfiguration" sichtbar und somit aktiviert. Sollte dies nicht der Fall sein, kontaktieren Sie bitte Ihren Ansprechpartner bei WEBSALE.

Damit der Shop auf die über das PageSpeed-Tool generierten CSS- und JavaScript-Dateien zugreifen kann, ist zusätzlich eine Aktivierung in der Shopkonfiguration shop.config notwendig. Eine Freischaltung oder Aktivierung durch WEBSALE ist nicht erforderlich. Die in Punkt 1. genannte Ordnerstruktur muss vorliegen, um die Funktionalität des PageSpeed-Tools zu gewährleisten.

Fügen Sie dazu im Abschnitt TopRank der Shopkonfiguration shop.config den Parameter UseMinifiedCSSAndJS = wie folgt hinzu.

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

Referenz: Abschnitt TopRank

3.2 JavaScript-Dateien gruppieren

Neue JavaScript-Dateien können über das PageSpeed-Tool nur hinzugefügt werden, wenn diese einer Gruppierung zugewiesen sind.

Gruppieren Sie Ihre JavaScript-Dateien im Online-Service-Bereich (OSB) über den Dienst Konfiguration. Wählen Sie hier den Reiter PageSpeed-Tool und danach den Reiter JS aus.

In der linken Spalte unter der Überschrift "Gruppierungen" können Sie jetzt beliebig viele seiten- oder themenspezifischen Gruppierungen anlegen. Jeder Gruppierung vergeben Sie beim Anlegen eine frei wählbare Gruppierungs-ID.

In der rechten Spalte sehen Sie unter der Überschrift "Ihre JavaScript-Bibliotheken" alle JavaScript-Dateien, die Sie über SFTP im Ordner js_upload bereitgestellt haben. Sollte dies nicht der Fall sein, dann klicken Sie bitte auf das Aktualisieren-Symbol.

Ebenfalls in der rechten Spalte, aber unter der Überschrift "WEBSALE JavaScript Bibliothek" finden Sie alle durch WEBSALE V8s bereitgestellten JavaScripts.

Referenz: WEBSALE JavaScript-Bibliothek

Fügen Sie jetzt einzelne JavaScript-Dateien per Drag-and-Drop (innerhalb des OSB-Bereiches) einer Gruppierung hinzu – je nachdem, welche JavaScript-Datei für diese Gruppierung benötigt wird.

Haben Sie die Zuweisung abgeschlossen, klicken Sie auf das Weltkugel-Icon, um die JavaScript-Dateien Ihrer Gruppierungen zu erstellen. Pro Gruppierungs-ID wird eine optimierte JavaScript-Datei generiert. Mit jedem weiteren Klick auf das Weltkugel-Icon wird (wenn Sie inhaltliche Veränderungen vorgenommen haben) eine neue Version der optimierten JavaScript-Datei erstellt.

3.3 Einbinden über eine ausgelagerte JavaScript-Datei

Das Einbinden von JavaScript-Funktionen über separate JavaScript-Dateien bringt einen entscheidenden Vorteil mit sich: Eine JavaScript-Datei wird von mehreren Templates verwendet, muss aber vom Browser nur einmal geladen werden.

Das PageSpeed-Tool erstellt bereits für jede Gruppierungs-ID automatisch eine separate JavaScript-Datei. Diese kann mit dem HTML-Element <script>...</script> und der Gruppierungs-ID an einer beliebigen Stelle Ihres Templates eingebunden werden.

Beispiel:

Die Gruppierungs-ID lautet start. Die Gruppierung soll als ausgelagerte JavaScript-Datei im <head> des Templates eingebunden werden.

Integrieren Sie die Gruppierung im Template über das Tag WS-JSURL(). Innerhalb der Klammern des Tags geben Sie die Gruppierungs-ID an.

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

Dieses Tag erzeugt dann für den Browser den korrekten Verweis zu der minimierten JavaScript-Datei der Gruppierung start.

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

Referenz: WS-JSURL()

3.4 Einbinden direkt im Quellcode (inline)

Es ist nicht zwangsläufig erforderlich, JavaScript-Funktionen über eine externe Datei einzubinden. Solche Dateien können auch auch direkt auf der HTML-Seite eingebunden werden.

Durch das PageSpeed-Tool ist diese Art der Integration selbst dann kein Problem mehr, wenn die JavaScript-Funktion nicht nur für eine Einzelseite, sondern sogar von mehreren HTML-Seiten verwendet werden soll. Die Pflege und das Ändern der JavaScript-Funktion geschieht nicht auf allen Einzelseiten, sondern zentral über das PageSpeed-Tool.

Beispiel:

Die Gruppierungs-ID lautet start. Die JavaScript-Dateien der Gruppierung start sollen inline innerhalb des <body> Elementes eingebunden werden:

Integrieren Sie die Gruppierung im Template über das Tag WS-JSInline(). Innerhalb der Klammern des Tags geben Sie die Gruppierungs-ID an.

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

Dieses Tag erzeugt dann für den Browser alle JavaScripts der Gruppierung start.

<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()

3.5 Einbinden per Direktzugriff

Mit der Einbindung der JavaScript-Dateien über das PageSpeed-Tool werden Änderungen an den JavaScript-Dateien immer erst nach dem Klick auf das Weltkugel-Icon im PageSpeed-Tool publiziert und im Browser sichtbar. Dies kann gerade beim Aufbau eines neuen Shops unter Umständen sehr aufwendig sein.

Um für den Designer Änderungen an den JavaScript-Dateien sofort sichtbar zu machen, ohne immer auf "Publizieren" klicken zu müssen, ist deshalb das Einbinden per Direktzugriff möglich. Somit sind Änderungen an den JavaScript-Dateien sofort nach dem Hochladen der Dateien in den Ordner js_upload und dem Aktualisieren des Browsers sichtbar.

Dies ist durch die Verwendung spezieller WS-DirectJS-Tags und -Klammerungen möglich. Statt auf die generierten JavaScript-Dateien einer Gruppierung im Ordner js_min wird jetzt auf die originalen JavaScript-Dateien im Ordner js_upload zugegriffen, die der Gruppierung zugewiesen sind:

 

 

Über eine Einstellung in der Shopkonfiguration shop.config haben Sie die Möglichkeit, festzulegen, ob

a.der Shop permanent per Direktzugriff auf Ihre JavaScript-Dateien zugreifen soll,

b.oder nur dann, wenn der Shop über den Parameter &jscssdirect-test=on im Direktzugriff-Modus aufgerufen wurde.

a) Permanenter Direktzugriff

Mit der folgenden Einstellung in der Shopkonfiguration shop.config kann der Direktzugriff dauerhaft auf "ein" gestellt werden.

Statt auf die generierten JavaScript-Dateien einer Gruppierung im Ordner js_min greift der Shop jetzt immer auf die originalen JavaScript-Dateien im Ordner js_upload zu, die der Gruppierung zugewiesen sind. Diese Einstellung ist empfehlenswert, wenn Sie gerade einen neuen Shop aufbauen und häufig Änderungen an den JavaScript-Dateien vornehmen müssen.

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

Referenz: Abschnitt TopRank

b) Optionaler Direktzugriff über den Parameter &jscssdirect-test=on

Mit der folgenden Einstellung in der Shopkonfiguration shop.config wird der permanente Direktzugriff deaktiviert.

Der Shop wird nur noch dann auf die JavaScript-Dateien einer Gruppierung im Ordner js_upload zugreifen, wenn Sie den Shop mit dem Parameter &jscssdirect-test=on aufrufen und somit den Direktzugriff-Modus aktivieren.

Nach der Deaktivierung des Modus' mit dem Parameter &jscssdirect-test=off greift der Shop wieder auf die JavaScript-Dateien einer Gruppierung im Ordner js_min zu.

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

Referenz: Abschnitt TopRank

Auch bei dieser Form der Einbindung können Sie sich zwischen der Integration mittels einer ausgelagerten JavaScript-Datei oder dem Einbinden direkt im Quellcode entscheiden. Beide Integrationsmöglichkeiten stellen wir Ihnen in den folgenden Beispielen vor.

Beispiel 1: Einbinden über eine ausgelagerte JavaScript-Datei

Die Gruppierungs-ID lautet start. Der Gruppierung start sind die beiden JavaScript-Dateien ws-module-bootstrap-ajaxmodal.js und ws-module-bootstrap-fillstars.js zugewiesen.

Integrieren Sie die Gruppierung im Template über das Tag WS-DirectJS()  und WS-DirectJSURL(). Innerhalb der Klammern des Tags WS-DirectJS() geben Sie die Gruppierungs-ID an:

<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 language="javascript" type="text/javascript" src="~WS-JSURL(start)~"></script>
  {/!ST-DirectJSCSSTest}
  ...
</head>

Diese Klammerung und Tags erzeugen dann für den Browser den korrekten Verweis zu den beiden JavaScript-Dateien ws-module-bootstrap-ajaxmodal.js und ws-module-bootstrap-fillstars.js der Gruppierung start im Ordner js_upload

<head>
  ...
  <!-- Verwendung im aktivierten Direktzugriff (alle Dateien der Gruppierung [nicht minimiert]) -->
  <script language="javascript" type="text/javascript" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/
          ../js_upload/ws-module-bootstrap-ajaxmodal.js"></script>
  <script language="javascript" type="text/javascript" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/
          ../js_upload/ws-module-bootstrap-fillstars.js"></script>
 
  <!-- Verwendung im deaktivierten Direktzugriff (eine minimierte Gruppierungs-Datei) -->
  <script language="javascript" type="text/javascript" href="/$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()

Wegweiser: Testmodi des Shops ein-/ausschalten

Beispiel 2: Einbinden direkt im Quellcode (inline)

Die Gruppierungs-ID lautet start. Der Gruppierung start sind die beiden JavaScript-Dateien ws-module-bootstrap-ajaxmodal.js und ws-module-bootstrap-fillstars.js zugewiesen.

Integrieren Sie die Gruppierung im Template über das Tag WS-DirectJS() und WS-DirectJSInline. Innerhalb der Klammern des Tags WS-DirectJS() geben Sie die Gruppierungs-ID an.

<head>
  ...
  <!-- Klammerung für den 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>

Diese Klammerung und Tags erzeugen dann im Direktzugriff für den Browser alle JavaScripts der beiden Dateien ws-module-bootstrap-ajaxmodal.js und ws-module-bootstrap-fillstars.js, die der Gruppierung start zugewiesen sind.

<head>
...
<!-- Verwendung im aktivierten Direktzugriff (alle Dateien der Gruppierung [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>
 
 
<!-- Verwendung im deaktivierten Direktzugriff (minimierte Code) -->
<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>
...
</head>

Referenz: ST-DirectJSCSSTest

Referenz: WS-DirectJS()

Referenz: WS-DirectJSInline()

Wegweiser: Testmodi des Shops ein-/ausschalten

3.6 Einbinden im Design-Testmodus

Selbstverständlich müssen neue Gruppierungen nicht sofort von Ihnen im Livemodus eingebaut werden.

Für alle Integrationsvarianten stehen Ihnen die ST-DesignTest-Klammerung und der dazugehörige Design-Testmodus-Aufruf zur Verfügung:

{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-/ausschalten

3.7 Debug-Modus für schnellere Fehlersuche im Browser

Die JavaScript-Anweisungen greifen nicht wie gewünscht? In einer minimierten JavaScript-Datei auf Fehlersuche zu gehen, kann sehr umständlich sein. Aus diesem Grund können Sie über einen speziellen Aufruf die Einbindung der minimierten Datei unterdrücken und stattdessen die nicht-minimierte Datei zum Debuggen im Browser verwenden.

Binden Sie Ihre JavaScript-Dateien per Direktzugriff ein, dann benötigen Sie diesen speziellen Debug-Modus nicht. Ihre JavaScript-Dateien werden dem Browser bereits nicht-minimiert zur Verfügung gestellt.

Der Shop befindet sich im Testmodus: Hängen Sie jetzt zum Aktivieren an einen beliebigen Shop-Aufruf () den Parameter &jscssminified-test=off an.

Zugriff auf die nicht-minimierten Dateien im Browser:

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

Der Browser zeigt die Dateien nun wie folgt an:

<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_min/start_753e2835a4.js">

Der Zugriff auf die minimierten Dateien im Browser erfolgt mit:

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

Der Browser zeigt die Dateien nun wieder wie folgt an:

<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../js_min/start_753e2835a4.min.js">

 

Wegweiser: Testmodi des Shops ein- /ausschalten

4 Migration auf das PageSpeed-Tool

Einen Leitfaden zur Migration Ihres Shops auf das PageSpeed-Tool finden Sie unter:
Leitfaden Umstellung auf PageSpeed-Tool (PDF)

5 Einbinden neuer JavaScript-Dateien ohne PageSpeed-Tool

Die Nutzung des PageSpeed-Tools ist bei WEBSALE V8s nicht zwingend erforderlich. Sie können neue JavaScript-Dateien auch über einen relativen Pfad oder Verweis auf jedes Template einbinden. Auch die Zuweisung von JavaScript-Dateien direkt im Template (inline) ist selbstverständlich möglich.

Bei dieser Einbindung muss der <base href="~URL-Template~"> beachtet werden. Er legt die Basis für alle relativen Verweise fest. In der Regel weist der Base Href auf das Subshop-Templateverzeichnis, z. B. benutzer/templates/Deutsch

5.1. Einbinden über eine ausgelagerte JavaScript-Datei

<head>
...
<base href="~URL-Template~">
<link rel="stylesheet" type="text/js" href="../js_upload/ihre-js-datei.js">
...
</head>

Wegweiser: base-href

Wegweiser: URL-Template

Quelle (externer Link): HTML/Kopfdaten/base

5.2 Einbinden direkt im Quellcode (inline)

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

Wegweiser: base-href

Wegweiser: URL-Template

6 WEBSALE JavaScript-Bibliothek

Mit der WEBSALE JavaScript-Bibliothek stellt Ihnen WEBSALE V8s alle JavaScript-Plugins zur Verfügung, die für Standard-Shop-Funktionen benötigt werden.

6.1 WEBSALE Systembibliothek & Design-Komponente – das große Komplett-Paket

Mit der WEBSALE Systembibliothek und der dazugehörigen Design-Komponente stellt Ihnen WEBSALE ein Komplett-Paket zur Verfügung, das alle benötigten JavaScript-Dateien beinhaltet. Dieses Komplett-Paket wurde entwickelt, damit Sie Module, die JavaScript und/oder AJAX verwenden, möglichst einfach einbinden können.

Die WEBSALE Systembibliothek ist eine zentrale, shopübergreifende Systemkomponente, die von WEBSALE V8s zur Verfügung gestellt wird. Sie beinhaltet unter anderem das JavaScipt-Framework "jQuery", das jQuery-Plugin "Colorbox" sowie alle benötigten eigenen Funktionen für verschiedene Features im Shop, die JavaScript und/oder AJAX verwenden. Diese Datei wird von WEBSALE laufend gewartet und aktualisiert. Damit stehen Ihnen zu jeder Zeit automatisch die neuesten Inhalte der jeweiligen Version zur Verfügung. Die WEBSALE Systembibliothek muss somit nicht heruntergeladen und nicht in Ihrem Shopverzeichnis gespeichert werden.

Die WEBSALE Systembibliothek ist bereits komprimiert, wodurch das Transfervolumen reduziert und die Ladezeit verkürzt wird. Zudem benötigen Sie nicht für jedes Modul/jede Funktion eine eigene JavaScript-Datei, wodurch die Anzahl der JavaScript-Dateien gering gehalten wird. Diese Merkmale können sich auch positiv auf Ihr Pageranking auswirken.

Sie können die WEBSALE Systembibliothek in Ihrem Shop beliebig verwenden. Welche Versionen und Module in der jeweiligen Bibliotheksversion enthalten sind, entnehmen Sie bitte der weiter unten dargestellten Versionsübersicht der WEBSALE Systembibliothek.

Für jede WEBSALE Systembibliothek gibt es eine passende WEBSALE Design-Komponente. Die aktuellste Version kann mit der Bereitstellung eines WEBSALE Onlineshops automatisch mitgeliefert werden. Bitte wenden Sie sich diesbezüglich an Ihren WEBSALE Ansprechpartner.

Bei der WEBSALE Design-Komponente handelt es sich um eine shop-spezifische JavaScript-Datei, in der Sie die verwendeten Module konfigurieren, anpassen und um eigene Funktionen erweitern können. Voraussetzung für die Verwendung ist die WEBSALE Systembibliothek oder die WEBSALE Core-Bibliothek, die auf jedem beliebigen Template eingebunden sein muss, auf dem die Design-Komponente verwendet werden soll.

Um Kollisionen bei Funktions- und Variablennamen zu vermeiden, verwenden alle Funktionen und Variablen für WEBSALE V8s Module das Präfix "ws-".

Benutzen Sie keine Namen für Ihre eigenen Funktionen und Variablen, die mit dem Präfix "ws-" beginnen, wenn Sie die WEBSALE JavaScript-Bibliothek verwenden.

6.1.1 Integration mit PageSpeed-Tool (empfohlen)

Schritt 1: Integration der WEBSALE Systembibliothek

Die WEBSALE Systembibliothek steht Ihnen bereits über das WEBSALE PageSpeed-Tool im OSB in der rechten Spalte unter der Überschrift WEBSALE JavaScript Bibliothek zur Verfügung und kann ganz einfach per Drag-and-Drop Ihren JavaScript-Gruppierungen hinzugefügt werden. Durch Klick auf den Namen der JavaScript-Datei können Sie den Inhalt der Datei ansehen.

Die WESALE Systembibliothek wird Ihnen in mehreren Versionen mit abweichender Versions-Nummer angezeigt (z. B. 1.8.3 und 1.8.4). In so einem Fall ist es empfehlenswert, stets die Datei mit der höheren Versions-Nummer zu verwenden.

Schritt 2: Herunterladen und Integration der System-Design-Komponente

Die aktuelle System-Design-Komponente müssen Sie stets manuell herunterladen, entsprechend Ihren Vorstellungen anpassen und im Verzeichnis js_upload Ihres Shops ablegen.

Bitte achten Sie beim Herunterladen der Design-Komponente auf die gleiche Versionsnummer der beiden Komponenten, nur so ist eine einwandfreie Funktionalität gewährleistet.

Download immer unter:

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

 

Nach dem Download der System-Design-Komponenten steht Ihnen diese dann im WEBSALE V8s PageSpeed-Tool im OSB in der rechten Spalte unter der Überschrift Ihre JavaScript Bibliothek zur Verfügung. Sie kann dann ebenfalls ganz einfach per Drag-and-Drop Ihren JavaScript-Gruppierungen hinzugefügt werden.

Schritt 3: Integration der WEBSALE Systembibliothek und Ihrer Design-Komponente im Template

Die Integration der WEBSALE Systembibliothek und Ihrer Design-Komponente erfolgt in den gleichen Schritten wie unter Einbinden neuer JavaScript-Dateien mit dem WEBSALE PageSpeed-Tool (empfohlen) beschrieben.

6.1.2 Integration ohne PageSpeed-Tool

Die folgenden Integrationsschritte von WEBSALE Modulen beziehen sich auf eine Integration ohne PageSpeed-Tool.

Die Integration entspricht der unter dem Punkt Einbinden neuer JavaScript-Dateien ohne PageSpeed-Tool beschriebenen.

Schritt 1: Einbinden der WEBSALE Systembibliothek in ein Template

Die aktuelle WEBSALE Systembibliothek muss nicht heruntergeladen und in Ihrem Shopverzeichnis abgespeichert werden. Da diese Datei von WEBSALE laufend gewartet und aktualisiert wird, empfehlen wir, dass Sie direkt über den von WEBSALE fest definierten Pfad auf diese Datei zugreifen. Die WEBSALE Systembibliothek wird somit direkt vom Server bezogen.

  http://<ihre-domain>/$WS/ws_sysdata/js/ws-system-<Versionskennung>.js

 

Schritt 2: Herunterladen und Integration der System-Design-Komponente in ein Template

Die aktuelle Design-Komponente müssen Sie stets manuell herunterladen, entsprechend Ihren Vorstellungen anpassen und im Verzeichnis js_upload Ihres Shops ablegen.

Bitte achten Sie beim Herunterladen der Design-Komponente auf die gleiche Versionsnummer der beiden Komponenten, nur so ist eine einwandfreie Funktionalität gewährleistet.

Download immer unter:

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

Nach dem Download der gewünschten Design-Komponenten können diese über den folgenden Pfad im Template hinzugefügt werden:

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

6.2 WEBSALE Core-Bibliothek & Design-Komponente – das kleine Komplett-Paket

Im Gegensatz zur WEBSALE Systembibliothek beinhaltet die WEBSALE Core-Bibliothek weder das JavaScipt-Framework "jQuery" noch das jQuery-Plugin "Colorbox" sondern ausschließlich die WEBSALE-spezifischen JavaScript-Funktionen. Der Vorteil an der WEBSALE Core-Bibliothek ist, dass ein Designer seine gewünschte "jQuery-Version" verwenden kann und somit nicht auf die bereitgestellte Version von WEBSALE V8s zurückgreifen muss. Informationen zu den zwingend erforderlichen jQuery-Bibliotheken und Plugins sind als Kommentar in der WEBSALE Core-Bibliothek enthalten.

Die WEBSALE Core-Bibliothek ist ebenfalls eine zentrale, shopübergreifende Systemkomponente, die von WEBSALE ab der Version 1.8.2 zur Verfügung gestellt wird. Sie wird von WEBSALE laufend gewartet und aktualisiert. Damit stehen Ihnen zu jeder Zeit automatisch die neuesten Inhalte der jeweiligen Version zur Verfügung. Die WEBSALE Systembibliothek muss somit nicht heruntergeladen und nicht in Ihrem Shopverzeichnis gespeichert werden.

Die WEBSALE Core-Bibliothek ist ebenfalls komprimiert, wodurch das Transfervolumen reduziert und die Ladezeit verkürzt wird. Zudem benötigen Sie nicht für jedes Modul/jede Funktion eine eigene JavaScript-Datei, wodurch die Anzahl der JavaScript-Dateien gering gehalten wird. Diese Merkmale können sich auch positiv auf Ihr Pageranking auswirken.

Analog zur WEBSALE Systembibliothek wird auch für die WEBSALE Core-Bibliothek die WEBSALE Design-Komponente benötigt.

Bei der WEBSALE Design-Komponente handelt es sich um eine shop-spezifische JavaScript-Datei, in der Sie die verwendeten Module konfigurieren, anpassen und um eigene Funktionen erweitern können.

6.2.1 Integration mit PageSpeed-Tool (empfohlen)

Schritt 1: Einbinden einer jQuery-Bibliothek (Voraussetzung)

Da die Core-Bibliothek das JavaScipt-Framework "jQuery" nicht enthält, muss vor der Einbindung der WEBSALE Core-Bibliothek und der dazugehörigen Design-Komponente die Einbindung einer jQuery-Bibliothek erfolgen.

Laden Sie sich Ihre gewünschte jQuery-Bibliothek herunter, speichern Sie diese in Ihrem Verzeichnis js_upload und weisen Sie die Bibliothek per Drag-and-Drop über das WEBSALE V8s PageSpeed-Tool einer Gruppierung zu.

Quelle (externer Link): jQuery

 

Schritt 2: Integration der WEBSALE Core-Bibliothek

Die WEBSALE Core-Bibliothek steht Ihnen bereits über das WEBSALE PageSpeed-Tool im OSB in der rechten Spalte unter der Überschrift WEBSALE JavaScript Bibliothek zur Verfügung und kann ganz einfach per Drag-and-Drop Ihren JavaScript-Gruppierungen hinzugefügt werden. Durch Klick auf den Namen der JavaScript-Datei können Sie den Inhalt der Datei ansehen.

Falls Ihnen die WEBSALE Core-Bibliothek in mehreren Versionen mit unterschiedlichen Versions-Nummern angezeigt wird (z. B. 1.8.3 und 1.8.4), ist es empfehlenswert, stets die Datei mit der höheren Versions-Nummer zu verwenden.

 

Schritt 3: Herunterladen und Integration der System-Design-Komponente

Die aktuelle System-Design-Komponente müssen Sie stets manuell herunterladen, entsprechend Ihren Vorstellungen anpassen und im Verzeichnis js_upload Ihres Shops ablegen.

Bitte achten Sie beim Herunterladen der Design-Komponente auf die gleiche Versionsnummer der beiden Komponenten, nur so ist eine einwandfreie Funktionalität gewährleistet.

Download immer unter:

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

Nach dem Download der System-Design-Komponenten steht Ihnen diese dann im WEBSALE V8s PageSpeed-Tool im OSB in der rechten Spalte unter der Überschrift "Ihre JavaScript Bibliothek" zur Verfügung. Sie kann dann ebenfalls ganz einfach per Drag-and-Drop Ihren JavaScript-Gruppierungen hinzugefügt werden.

 

Schritt 4: Integration der WEBSALE Systembibliothek und Ihrer Design-Komponente im Template

Die WEBSALE Systembibliothek und ihre Design-Komponente werden integriert wie wie unter Einbinden neuer JavaScript-Dateien mit dem WEBSALE PageSpeed-Tool (empfohlen) beschrieben.

6.2.2 Integration ohne PageSpeed-Tool

Die folgenden Integrationsschritte von WEBSALE Modulen beziehen sich auf eine Integration ohne PageSpeed-Tool.

Die Integration entspricht der unter dem Punkt Einbinden neuer JavaScript-Dateien ohne PageSpeed-Tool beschriebenen Vorgehensweise.

Schritt 1: Einbinden einer jQuery-Bibliothek (Voraussetzung)

Da die Core-Bibliothek das JavaScipt-Framework "jQuery" nicht enthält, muss vor der Einbindung der WEBSALE Core-Bibliothek und der dazugehörigen Design-Komponente die Einbindung einer jQuery-Bibliothek erfolgen.

Quelle (externer Link): jQuery

Laden Sie sich Ihre gewünschte jQuery-Bibliothek herunter, speichern Sie diese in Ihrem Verzeichnis js_upload und binden Sie die Bibliothek dann wie folgt in das gewünschte Template ein:

<script type="text/javascript" src="../js_upload/jquery.<Versionskennung>.min.js"></script>

 

Schritt 2: Einbinden der Core-Bibliothek in ein Template

Die aktuelle WEBSALE Core-Bibliothek muss nicht heruntergeladen und in Ihrem Shopverzeichnis abgespeichert werden. Da diese Datei von WEBSALE laufend gewartet und aktualisiert wird, empfehlen wir, dass Sie direkt über den von WEBSALE fest definierten Pfad auf diese Datei zugreifen. Die WEBSALE Systembibliothek wird somit direkt vom Server bezogen.

  http://<ihre-domain>/$WS/ws_sysdata/js/ws-core-<Versionskennung>.js

 

Schritt 3: Herunterladen und Integration der System-Design-Komponente in ein Template

Die aktuelle Design-Komponente müssen Sie stets manuell herunterladen, entsprechend Ihren Vorstellungen anpassen und im Verzeichnis js_upload Ihres Shops ablegen.

Bitte achten Sie beim Herunterladen der Design-Komponente auf die gleiche Versionsnummer der beiden Komponenten, nur so ist eine einwandfreie Funktionalität gewährleistet.

Download immer unter:

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

Nach dem Download der gewünschten Design-Komponenten können diese über den folgenden Pfad im Template hinzugefügt werden:

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

6.3 WEBSALE WS-Module

Bei den WEBSALE WS-Modulen handelt es sich um Module, die aus der WEBSALE Systembibliothek "extrahiert" wurden und jetzt als eigenständige feature-spezifische JavaScript-Dateien zur Verfügung stehen. Die WEBSALE Systembibliothek wie auch die WEBSALE Core-Bibliothek und deren dazugehörige Design-Komponente werden für die Integration der einzelnen Module nicht mehr benötigt.

Eine Übersicht der WS-Module- und Design-Komponenten finden Sie unter Material: WEBSALE JavaScript Bibliothek

Die WS-Module-Dateien sind erkennbar am Präfix ws-module- und gliedern sich in der Regel in zwei Teile:

Teil 1: Modul-Komponente
Bei der Modul-Komponente handelt es sich um eine zentrale, shop-übergreifende JavaScript-Datei, die von WEBSALE V8s zentral zur Verfügung gestellt wird. Sie enthält immer die wesentlichen Bestandteile der Funktion.

Die Modul-Komponenten werden von WEBSALE V8s laufend gewartet und aktualisiert. Damit stehen Ihnen zu jeder Zeit automatisch die neuesten Inhalte der jeweiligen Version zur Verfügung. Sie sollten nicht heruntergeladen und nicht in Ihrem Shopverzeichnis js_upload gespeichert werden.

Alle Modul-Komponenten stehen Ihnen bereits über das WEBSALE V8s PageSpeed-Tool im OSB (Online-Service-Bereich) in der rechten Spalte unter der Überschrift WEBSALE JavaScript Bibliothek zur Verfügung. Die Modul-Komponenten können ganz einfach per Drag-and-Drop zu Ihren JavaScript-Gruppierungen hinzugefügt werden. Durch Klick auf den Namen einer JavaScript-Datei können Sie den Inhalt dieser Datei ansehen.

Bei einer Verwendung der Modul-Komponenten ohne PageSpeed-Tool binden Sie diese bitte immer über folgenden Pfad in Ihre Templates ein:

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

 
Teil 2: Design-Komponente

Bei den Design-Komponenten handelt es sich um modul- und shop-spezifische JavaScript-Dateien, in denen Sie das verwendete Modul konfigurieren, anpassen und um eigene Funktionen erweitern können. Die aktuelle Design-Komponente müssen Sie stets manuell herunterladen, entsprechend Ihren Vorstellungen anpassen und im Verzeichnis js_upload Ihres Shops ablegen.

Download immer unter:

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

Eine Übersicht der WS-Module- und Design-Komponenten finden Sie unter Material: WEBSALE JavaScript Bibliothek

6.3.1 Übersicht der WEBSALE WS-Module

Bei den WEBSALE WS-Modulen handelt es sich um Module, die aus der WEBSALE Systembibliothek "extrahiert" wurden und jetzt als eigenständige feature-spezifische JavaScript-Dateien zur Verfügung stehen. Dabei handelt es sich um folgende Funktionen:

oBasis-Komponente (Voraussetzung)

oAbhängige Varianten per AJAX nachladen

oEconda Cross Sell

oEingabeabhängige Adressdatensteuerung

oNachladen von Templates per AJAX

oProdukte per AJAX auf die Merkliste setzen

oProdukte per AJAX in den Warenkorb legen

oProduktempfehlungsfunktion per AJAX

oProduktvergleich

oSEO-Content für Produkte

oWeb-to-Print

oLink-Shortener

oPasswortchecker ("Passwortampel")

Eine Übersicht der WS-Modul- und Design-Komponenten-Dateien, deren Versionen und Inhalte finden Sie unter Materialien: WEBSALE JavaScript Bibliothek

6.3.2 Integration WEBSALE Module mit PageSpeed-Tool (empfohlen)

Die folgenden Integrationsschritte von WEBSALE Modulen beziehen sich auf eine Integration mit dem PageSpeed-Tool.

Schritt 1: Einbinden einer jQuery-Bibliothek (Voraussetzung)

jQuery ist ein frei verfügbares Javascript-Framework, das sehr umfangreiche Funktionen zur Navigation und Manipulation der DOM-Syntax bereitstellt. Des Weiteren bietet das Framework elegante und leicht verständliche Funktionen für animierte Effekte, Ajax und Event-Handling.

Alle von WEBSALE V8s verwendeten Javascript-Funktionen basieren auf diesem jQuery-Framework. Aus diesem Grund muss zwingend vor der Integration der WEBSALE Module einmal eine jQuery-Bibliothek geladen werden.

Laden Sie sich Ihre gewünschte jQuery-Bibliothek herunter, speichern Sie diese in Ihrem Verzeichnis js_upload und weisen Sie die Bibliothek per Drag-and-Drop über das WEBSALE V8s PageSpeed-Tool einer Gruppierung zu.

Quelle (externer Link): jQuery

 

Schritt 2: Integration der Basic-Komponente (Voraussetzung)

Voraussetzung für die Verwendung der WEBSALE Module ist die Verwendung der Basic-Komponente, die bei der Einbindung auf einem Template einmalig vorhanden sein muss, auf dem die Modul-Komponenten verwendet werden sollen.

Die Basic-Komponente besteht ebenfalls aus einer Modul- und einer Design-Komponente. Während die Basic-Modul-Komponente Ihnen bereits über das WEBSALE V8s PageSpeed-Tool zur Verfügung steht, muss die Basic-Design-Komponente erst vom Server heruntergeladen und dann im Verzeichnis js_upload gespeichert werden. Weisen Sie dann beiden Komponenten der gewünschten JavaScript-Gruppierung zu.

  http://<ihre-domain>/$WS/ws_sysdata/js/ws-module-basics-design-1.8.4.js

 

Schritt 3: Integration der Modul-Komponente

Alle Modul-Komponenten stehen Ihnen bereits über das WEBSALE PageSpeed-Tool im OSB in der rechten Spalte unter der Überschrift WEBSALE JavaScript Bibliothek  zur Verfügung und können ganz einfach per Drag-and-Drop Ihren JavaScript-Gruppierungen hinzugefügt werden. Durch Klick auf den Namen der JavaScript-Datei können Sie den Inhalt der Datei ansehen.

Bei einigen Bibliotheks-Modulen werden Ihnen möglicherweise mehrere Versionen des Moduls mit abweichender Versions-Nummer angezeigt (z. B. 1.8.3 und 1.8.4). In so einem Fall ist es empfehlenswert, stets das Modul (bzw. die Module) mit der höheren Versions-Nummer zu verwenden.

 

Schritt 4: Herunterladen und Integration der Design-Komponente

Die aktuelle Design-Komponente müssen Sie stets manuell herunterladen, entsprechend Ihren Vorstellungen anpassen und im Verzeichnis js_upload Ihres Shops ablegen.

Bitte achten Sie beim Herunterladen der Design-Komponente auf die gleiche Versionsnummer der beiden Komponenten, nur so ist eine einwandfreie Funktionalität gewährleistet.

Download immer unter:

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

Nach dem Download der gewünschten Design-Komponenten stehen Ihnen diese dann im WEBSALE V8s PageSpeed-Tool im OSB in der rechten Spalte unter der Überschrift Ihre JavaScript Bibliothek zur Verfügung. Sie können dann ebenfalls ganz einfach per Drag-and-Drop Ihren JavaScript-Gruppierungen hinzugefügt werden.

 

Schritt 5: Integration im Template

Die WEBSALE Module werden in derselben Weise wie unter Einbinden neuer JavaScript-Dateien mit dem WEBSALE PageSpeed-Tool (empfohlen) beschrieben integriert.

6.3.3 Integration WEBSALE Module ohne PageSpeed-Tool

Die folgenden Integrationsschritte von WEBSALE Modulen beziehen sich auf eine Integration ohne PageSpeed-Tool.

Die Integration entspricht der unter dem Punkt Einbinden neuer JavaScript-Dateien ohne PageSpeed-Tool beschriebenen Vorgehensweise.

 

Schritt 1: Einbinden einer jQuery-Bibliothek (Voraussetzung)

Alle von WEBSALE V8s verwendeten Javascript-Funktionen basieren auf diesem jQuery-Framework. Aus diesem Grund muss zwingend vor der Integration der WEBSALE Module einmal eine jQuery-Bibliothek geladen werden.

Quelle (externer Link): jQuery

Laden Sie sich Ihre gewünschte jQuery-Bibliothek herunter, speichern Sie diese in Ihrem Verzeichnis js_upload und binden Sie die Bibliothek dann wie folgt in das gewünschte Template ein:

 

<script type="text/javascript" src="../js_upload/jquery.<Versionskennung>.min.js"></script>

 

Schritt 2: Integration der Basic-Komponente (Voraussetzung)

Voraussetzung für die Verwendung der WEBSALE Module ist die Verwendung der Basic-Komponente, die bei der Einbindung auf einem Template einmalig vorhanden sein muss, auf dem die Modul-Komponenten verwendet werden sollen.

Die Basic-Komponente besteht ebenfalls aus einer Modul- und einer Design-Komponente. Während die Basic-Modul-Komponente zentral auf dem Server bereit steht und nur über den folgenden Pfad im Template eingebunden werden muss, kann die Basic-Design-Komponente erst vom Server heruntergeladen und dann im Verzeichnis js_upload gespeichert werden um gewünschte Anpassungen vorzunehmen. Danach kann Sie im Template über den folgenden Pfad im Template eingebunden werden.

Die Integration der Basic-Komponente im Template sieht dann wie folgt aus:

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

 

Schritt 3: Integration der Modul-Komponente

Bei der Modul-Komponente handelt es sich um eine zentrale, shopübergreifende JavaScript-Datei, die von WEBSALE V8s zentral zur Verfügung gestellt wird. Sie muss nicht heruntergeladen und kann ganz einfach über den folgenden Pfad im Template eingebunden werden:

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

Bei einigen Bibliotheks-Modulen werden Ihnen möglicherweise mehrere Versionen des Moduls mit unterschiedlichen Versions-Nummern angezeigt (z. B. 1.8.3 und 1.8.4). In diesem Fall ist es empfehlenswert, stets das Modul (bzw. die Module) mit der höheren Versions-Nummer zu verwenden.

 

Schritt 4: Herunterladen und Integration der Design-Komponente

Die aktuelle Design-Komponente können Sie stets manuell herunterladen, entsprechend Ihren Vorstellungen anpassen und im Verzeichnis js_upload Ihres Shops ablegen.

Bitte achten Sie beim Herunterladen der Design-Komponente auf die gleiche Versionsnummer der beiden Komponenten, nur so ist eine einwandfreie Funktionalität gewährleistet.

Download immer unter:

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

Nach dem Download der gewünschten Design-Komponenten können diese über den folgenden Pfad im Template hinzugefügt werden:

<script type="text/javascript" src="../js_upload/<Design-Komponente>-<Versionskennung>.js"></script>

6.4 Übersicht aller WEBSALE JavaScripts

Unter Material: WEBSALE JavaScript Bibliothek haben wir Ihnen alle von WEBSALE zur Verfügung gestellten JavaScripts inklusive Versionshinweise aufgelistet.

7 Tracking-Datei (ws_analyse.js)

Die Tracking-Datei (ws_analyse.js) ist Bestandteil der WEBSALE V8s Tracking-Schnittstelle. Innerhalb der Tracking-Datei (ws_analyse.js) können alle Tracking-Scripte der verschiedenen Anbieter zusammengefasst werden.

Wegweiser: Tracking-Schnittstelle

In Verbindung mit dem PageSpeed-Tool gibt es die klassische Tracking-Datei (ws_analyse.js) nicht mehr. Alle Tracking-Scripte, die normalerweise zentral in der Tracking-Datei (ws_analyse.js) gespeichert werden, werden jetzt als einzelne JavaScript-Dateien im Ordner js_upload bereitgestellt. Im PageSpeed-Tool wird dann eine Gruppierung erstellt, der diese Tracking-Scripte zugewiesen werden. Diese Gruppierung wird dann automatisch auf allen Seiten an der gewünschten Stelle eingebunden.

Wegweiser: Integration der Tracking-Schnittstelle

8 Hinweise zu jQuery-Bibliotheken

Die im Mustershop bereitgestellte jQuery-Bibliothek ist jquery-2.2.2.min.js.

Von einer Änderung der im Mustershop mitgelieferten jquery-2.2.2.min.js ist abzuraten, um die Update- und Kompatibilitäts-Fähigkeit von jQuery zu erhalten.

Grundsätzlich ist jQuery abwärtskompatibel, sodass Sie in der Regel mit dem Update der jeweiligen jQuery-Datei von Erweiterungen und Bugfixes der Bibliothek profitieren, ohne Anpassungen an Ihren JavaScripts vornehmen zu müssen. Beachten Sie vor einem Update dennoch die Versionshinweise auf der Webseite des Herstellers, um gegebenenfalls auf Änderungen, die Ihren Code betreffen, reagieren zu können.

Quelle (externer Link): jQuery

9 SEO-optimierte Auslieferung von JavaScript-Dateien

Eines der wichtigsten Kriterien für ein gutes Suchmaschinen-Ranking ist die Performance. Gerade JavaScript-Dateien stellen hier aufgrund ihrer großen Datenmengen immer häufiger ein großes Problem dar. Wie Sie trotzdem nicht auf JavaScript-Funktionen verzichten müssen und eine optimale Performance erzielen können, erfahren Sie hier:

 

▪JavaScript optimieren

▪Browser-Caching nutzen
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=de

▪URL-Fingerprinting
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