<< Click here to display Table of Contents >> Navigation: Wegweiser > Externe Dienste > Integration von econda:

Integration von econda Cross Sell

Datenschutz-Hinweis:

Gemäß aktueller Rechtsprechung reicht ein einfacher Hinweis auf jegliche Instrumente der Werbewirksamkeitsforschung, des Marketings oder der Verkaufsförderung nicht mehr aus. Zu diesen Instrumenten gehören beispielsweise Cookies oder Tracking (Datenverarbeitung durch Dritte). Auch als Voreinstellung aktivierte Optionen sind unzulässig.
Vielmehr muss der Shopbesucher aktiv bestätigen, dass er mit der Verwendung o. g. Instrumente auf seinem Endgerät einverstanden ist. Bei zustimmungspflichtigen Instrumenten und Funktionen muss also stets ein Opt-In-Verfahren gewählt werden (Kunde klickt aktiv Kästchen an, um seine Zustimmung zu signalisieren). Dieses Verfahren gewährleistet, dass erst nach ausdrücklicher Zustimmung erstmals Daten übertragen werden. Bitte wenden Sie sich zur Klärung von Einzelheiten und zum Abgleich mit der aktuellen Rechtsprechung stets an Ihren Datenschutzbeauftragten.

Mit econda Cross Sell zeigen Sie Onlineshop-Besuchern personalisierte Produktempfehlungen – zum richtigen Zeitpunkt an der richtigen Stelle.

Durch die Integration des Widget-Designs in das WEBSALE-Shopsystem lassen sich Änderungen im Design oder auch zusätzliche Empfehlungsplatzierungen schnell und einfach umsetzen.

WEBSALE unterstützt die Anzeige von econda Cross Sell auf den folgenden Seiten:

▪Shop-Startseite (ws_start.htm)

▪Produktdetailansicht (ws_product.htm)

▪Produktübersichtsseite (ws_category.htm)

▪Warenkorbseite (ws_basket.htm)

Unterschiedliche Integrationsmöglichkeiten

Es gibt zwei Möglichkeiten, econda Cross Sell zu integrieren:

▪mit WEBSALE Tracking-Schnittstelle

▪ohne WEBSALE Tracking-Schnittstelle

Bitte wählen Sie im Folgenden die zutreffende Integrationsbeschreibung.

Inhalt

1 Integration ohne WEBSALE Tracking-Schnittstelle (empfohlen)

1.1 Voraussetzungen

1.2 Überlegungen zu Widgets

1.3 Freischaltung/Aktivierung

1.4 Integration auf der Shop-Startseite (ws_start.htm)

1.5 Integration auf der Produktdetailansicht (ws_product.htm)

1.6 Integration auf der Produktübersichtsseite (ws_category.htm)

1.7 Integration auf der Warenkorbseite (ws_basket.htm)

1.8 Darstellung von econda Cross-Sell-Produkten mit JavaScript-Animationen

1.9 Integration einer Ersatz-Anzeige (Fallback)

1.10 Erklärung des JavaScripts

2 Integration mit WEBSALE Tracking-Schnittstelle

2.1 Voraussetzungen

2.2 Überlegungen zu Widgets

2.3 Freischaltung/Aktivierung

2.4 Integration auf der Shop-Startseite (ws_start.htm)

2.5 Integration auf der Produktdetailansicht (ws_product.htm)

2.6 Integration auf der Produktübersichtsseite (ws_category.htm)

2.7 Integration auf der Warenkorbseite (ws_basket.htm)

2.8 Darstellung von econda Cross-Sell-Produkten mit JavaScript-Animationen

2.9 Integration einer Ersatz-Anzeige (Fallback)

2.10 Erklärung des JavaScripts

3 Migration von econda Cross Sell "mit Tracking-Schnittstelle" zu "ohne Tracking-Schnittstelle"

1 Integration ohne WEBSALE Tracking-Schnittstelle (empfohlen)

1.1 Voraussetzungen

Nach Beauftragung beim Hersteller erhalten Sie eine Account-ID und eine oder mehrere Widget-IDs, die Sie bitte WEBSALE mitteilen.

Technisch gesehen, könnten Sie danach mit der Integration von econda Cross Sell im Shop beginnen. Wir empfehlen Ihnen aber, sich zuvor Gedanken darüber zu machen, welche Empfehlungen die Widgets zurückliefern sollen (siehe dazu den folgenden Abschnitt).

1.2 Überlegungen zu Widgets

Um die Integration zu erleichtern, ist es wichtig, zu wissen, welche Empfehlungen die Widgets zurückliefern sollen. Die folgenden Informationen helfen, zu verstehen, wie die Anfrage an die econda Services gestellt werden muss.

Die Empfehlungen hängen ab von der Platzierung des Widgets im Shop:

Startseite:

Wenn der Besucher wiedererkannt wird, sollen Produkte aus den Profilen angezeigt werden, z. B. "zuletzt angeschaut, aber nicht gekauft".

Passend zu diesen Produkten sollen Empfehlungen aus den Profilen dazu ausgespielt werden, z. B. "andere kauften auch …"

Fallback: Topseller und neue Produkte des Shops

Produktdetailseiten

Auf der Produktseite sollen zusätzlich zum gewählten Produkt noch andere Produkte aus dem Profil des Besuchers in die Anfrage mit einfließen.

Fallback: Topseller der Kategorie, Topseller des Shops

Kategorieseiten

Aus dem Profil des Besuchers sollen zusätzlich Produkte aus derselben Kategorie mit in die Anfrage einfließen (Kategoriekontext).

Fallback: Topseller und neue Produkte der Kategorie

Warenkorb

Die Produkte im Warenkorb sollen bei den econda Services anfragen, um dazu passende Produkte empfehlen zu können, z. B. Produkte, die von anderen Kunden gekauft wurden.

Fallback: vordefinierte Produktliste mit Mitnahmeprodukten im günstigeren Preissegment (kann im econda Cross Sell Interface erstellt werden)

Auf Startseite, Produktdetailseiten und Kategorieseiten werden somit zusätzlich Anfragen mit Profil-IDs (Besucher-ID, Kunden-ID, Benutzer-ID (Login), oder Recipient-ID (E-Mailempfänger)) gestellt – sofern diese IDs vorliegen, der Besucher also wiedererkannt wird.

Wichtig für die Integration der Widgets ist es, zu wissen, wann zusätzlich mit IDs angefragt werden soll.

Wie mit diesen Informationen (Produkte der letzten Produktinteraktionen) umgegangen wird, kann dann über das econda Cross Sell Interface eingestellt werden. Wenn Sie dazu Fragen haben, hilft Ihnen Ihr Ansprechpartner bei econda gern weiter.

1.3 Freischaltung/Aktivierung

Es ist keine Freischaltung/Aktivierung seitens WEBSALE erforderlich.

1.4 Integration auf der Shop-Startseite (ws_start.htm)

Für die Integration des econda Cross Sell Widgets auf der Shop-Startseite (ws_start.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden folgender JavaScript-Dateien

▪ws-module-cs-links-1.8.5.js (muss vom Designer erstellt werden)

▪econda-recommendations-design.js (global)

▪econda-recommendations-3.0.11.js (falls von econda nicht mitgeliefert, siehe DevTool bzw. econda-Backend)

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen in die WEBSALE-Designkomponente

Das oben genannte JavaScript econda-recommendations-design.js beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Legen Sie mithilfe eines HTML-Elements (z. B. <div>) die Stelle auf der Seite fest, an der die econda Cross-Sell-Produkte angezeigt werden sollen. Dieses HTML-Element benötigt eine ID und sollte keine weiteren Informationen beinhalten. Die ID wird benötigt, um die per AJAX geladenen Inhalte gezielt in dieses <div> laden zu können.

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an.

Schritt 4: Integration des JavaScripts

Integrieren Sie das folgende JavaScript auf der Shop-Startseite (ws_start.htm). Wir empfehlen die Integration unterhalb des in Schritt 3 definierten Anzeigebereiches innerhalb von <body> ... </body>.

Geben Sie innerhalb dieses Scripts im Tag WS-AJAXLoadTpl() ein Template an. Mit diesem Template werden das Design und die gewünschten Informationen für die Cross-Sell-Produkte definiert und per AJAX auf der Shop-Startseite (ws_start.htm) geladen.

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...
   <script type="text/javascript">
   window.econda.ready(() => {
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            }
    });
    widget.render();
   });
</script>
    ...
    </body>

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es – unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben – in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereiches können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereiches werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt eines Widget-Templates:
Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

<body>
  <WS-Ajax-econda-cross-sell>
    {WS-PRListFromLoadTplLink_data}
       {@WS-PRListFromLoadTplLink_data}
          {PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
             <a href="~WS-EnsureNextLinkContainsURLParams~~PR-Link~~WS-PRListFromLoadTplLink_addlink~">~PR-Name~</a>
          {/PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
       {/@WS-PRListFromLoadTplLink_data}
    {/WS-PRListFromLoadTplLink_data}
  </WS-Ajax-econda-cross-sell>
</body>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

1.5 Integration auf der Produktdetailansicht (ws_product.htm)

Für die Integration des econda Cross Sell Widgets auf der Produktdetailansicht (ws_product.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden folgender JavaScript-Dateien

▪ws-module-cs-links-1.8.5.js (muss vom Designer erstellt werden)

▪econda-recommendations-design.js (global)

▪econda-recommendations-3.0.11.js (falls von econda nicht mitgeliefert, siehe DevTool bzw. econda-Backend)

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen zur WEBSALE-Designkomponente

Das oben genannte JavaScript econda-recommendations-design.js beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an:

Schritt 4: Integration des JavaScripts

Integrieren Sie das folgende JavaScript auf der Produktdetailansicht (ws_product.htm). Wir empfehlen die Integration unterhalb des in Schritt 3 definierten Anzeigebereiches innerhalb von <body> ... </body>.

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...
    <script type="text/javascript">
    window.econda.ready(() => {
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            products: [{id: '~PR-ProdIndex~'}],
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    });
    widget.render();
    });
    </script>
 	</body>
    ...

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es - unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben - in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereichs können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereichs werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt des Widget-Templates:

Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

1.6 Integration auf der Produktübersichtsseite (ws_category.htm)

Für die Integration des econda Cross Sell Widgets auf der Produktübersichtsseite (ws_category.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden folgender JavaScript-Dateien

▪ws-module-cs-links-1.8.5.js (muss vom Designer erstellt werden)

▪econda-recommendations-design.js (global)

▪econda-recommendations-3.0.11.js (falls von econda nicht mitgeliefert, siehe DevTool bzw. econda-Backend)

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen in die WEBSALE-Designkomponente

Das oben genannte JavaScript econda-recommendations-design.js beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an.

Schritt 4: Integration des JavaScripts

Integrieren Sie das folgende JavaScript auf der Produktübersichtsseite (ws_category.htm). Wir empfehlen die Integration unterhalb des in Schritt 3 definierten Anzeigebereiches innerhalb von <body> ... </body>.

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...
    <script type="text/javascript">
    window.econda.ready(() => {
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    });
    widget.render();
    });
    </script>
    ...
     </body>

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es – unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben – in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereiches können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereiches werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt des Widget-Templates:

Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

1.7 Integration auf der Warenkorbseite (ws_basket.htm)

Für die Integration des econda Cross Sell Widgets auf der Warenkorbseite (ws_basket.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden folgender JavaScript-Dateien

▪ws-module-cs-links-1.8.5.js (muss vom Designer erstellt werden)

▪econda-recommendations-design.js (global)

▪econda-recommendations-3.0.11.js (falls von econda nicht mitgeliefert, siehe DevTool bzw. econda-Backend)

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen in die WEBSALE-Designkomponente

Das oben genannte JavaScript econda-recommendations-design.js beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an.

Schritt 4: Integration des JavaScripts

Integrieren Sie das folgende JavaScript auf der Warenkorbseite (ws_basket.htm). Wir empfehlen die Integration unterhalb des in Schritt 3 definierten Anzeigebereiches innerhalb von <body> ... </body>.

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...    
    <script type="text/javascript">
    window.econda.ready(() => {
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            products: [{BASKET-PR-Data}~DC-Int1_set(0)~{@BASKET-PR-Data}~DC-Int1_inc~{!DC-Int1(1)},{/!DC-Int1(1)}{id: '~BASKET-PR-ProdIndex~'}{/@BASKET-PR-Data}{/BASKET-PR-Data}],
            }
    });
    widget.render();
    });
    </script>
    ...
    </body>

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es – unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben – in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereiches können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereiches werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt des Widget-Templates:

Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

1.8 Darstellung von econda Cross Sell Produkten mit JavaScript-Animationen

Sie können die Darstellung der econda Cross-Sell-Produkte frei nach Ihrem Belieben gestalten.

Bei einer großen Zahl an Cross-Sell-Empfehlungen können diese zur besseren Übersichtlichkeit in einem Slider dargestellt werden. Wenn Sie mehrere Slider auf dem Template anzeigen wollen, beachten Sie, dass sich die IDs der AJAX-Klammerungen unterscheiden müssen, damit nicht ein AJAX-Request die Inhalte des anderen überschreibt.

Für die Darstellung im Slider erfolgt die Integration analog zur oben aufgeführten Beschreibung (Schritt 2-5).

Davon abweichend muss der Funktionsaufruf für die Animation, z. B. den Slider, in der Designkomponente innerhalb von function ws_AJAXloadEcondaResponseSuccess()integriert werden.

Beispiel für die Integration des Funktionsaufrufes eines jQuery jCarousel Slider Scripts in der Designkomponente:

    <!-- Econda Cross Sell Beispiel Slick Slider -->

function ws_AJAXloadEcondaResponseSuccess(){
$('#mycarousel_horizontal_econda').slick({
	dots: false,
	nextArrow: '<span class="fa fa-angle-right slideArrow slideNext"></span>',
	prevArrow: '<span class="fa fa-angle-left slideArrow slidePrev"></span>',
	arrows: true,
	infinite: false,
	speed: 300,
	slidesToShow: 6,
	slidesToScroll: 6,
	responsive: [
		{
			breakpoint: 1200,
			settings: {
				slidesToShow: 4,
				slidesToScroll: 4,
			}
		},
		{
			breakpoint: 992,
			settings: {
				slidesToShow: 3,
				slidesToScroll: 3,
			}
		},
		{
			breakpoint: 660,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 2
			}
		},
		{
			breakpoint: 480,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}
	]
});
}

1.9 Integration einer Fallback-Ansicht

Um unnötige AJAX-Requests an den Shop zu vermeiden, wird die Kommunikation abgebrochen, wenn econda keine Daten zurücksendet. Dies kann zum Beispiel der Fall sein, wenn für ein bestimmtes Produkt keine econda Cross-Sell-Produkte ermittelt werden konnten. In den oben gezeigten Integrationen für die unterschiedlichen Seiten wird in diesem Fall dann nichts angezeigt, d. h. die vorgesehene Stelle für die Anzeige der econda Cross-Sell-Produkte bleibt leer.

Durch eine Anpassung des eingebundenen JavaScriptes und des Widget-Templates können Sie statt einer "leeren" Anzeige eine alternative Ansicht anzeigen lassen, z. B. die Anzeige von WEBSALE Cross Link-Produkten.

Schritt 1: Anpassung des eingebundenen JavaScriptes

Entfernen Sie aus dem eingebundenen JavaScript die Zeile if (data.products.length == 0) return;. Dadurch wird der AJAX-Request immer ausgeführt – auch wenn keine econda-Daten zurückgesendet werden. Das Widget-Template wird also aufgerufen und seine Inhalte werden an der gewünschten Stelle angezeigt.

Fügen Sie zusätzlich an das Tag WS-AJAXLoadTpl() einen OTP (One-Time-Parameter) an. Dieser wird benötigt, um den aktuellen Produktindex für die Fallback-Ansicht an das Widget-Template zu übergeben.

Beispiel:

Anpassung des JavaScripts für die Integration von econda Cross Sell auf der Produkt-Detailansicht:

    <script type="text/javascript">
    window.econda.ready(() => {
    function econda_callback(targetElement, data, templateName) {
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~&otp1=~PR-ProdIndex~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            products: [{id: '~PR-ProdIndex~'}],
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    });
    widget.render();
    });
    </script>

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 2: Anpassung des Widget-Templates

Innerhalb des AJAX-Bereich WS-Ajax-<ID> unterscheiden Sie mit den Klammerungen {WS-PRListFromLoadTplLink_data} ... {/WS-PRListFromLoadTplLink_data} und {!WS-PRListFromLoadTplLink_data} ... {/!WS-PRListFromLoadTplLink_data}, ob Daten über econda zurückgeliefert worden sind oder nicht.

Innerhalb der positiven Klammerung {WS-PRListFromLoadTplLink_data} ... {/WS-PRListFromLoadTplLink_data} werden die Produkte (Daten) angezeigt, die von econda Cross Sell zurückgegeben werden.

Innerhalb der negativen Klammerung {!WS-PRListFromLoadTplLink_data} ... {/!WS-PRListFromLoadTplLink_data} können Sie eine beliebige Anzeige integrieren, die angezeigt wird, wenn econda Cross Sell keine Daten zurückgibt, z. B. WEBSALE Cross Links.

Über den OTP-Parameter, der im JavaScript an das Tag WS-AJAXLoadTpl() angehängt wurde, wird der aktuelle Produktindex übergeben. Im Fallback können dadurch die passenden WEBSALE Cross Links mithilfe von {PR-LoadData($WS-OTP1$,0)} geladen und angezeigt werden.

<body>
  <WS-Ajax-econda-cross-sell>

   
    {WS-PRListFromLoadTplLink_data}
       {@WS-PRListFromLoadTplLink_data}
          {PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
             <a href="~WS-EnsureNextLinkContainsURLParams~~PR-Link~~WS-PRListFromLoadTplLink_addlink~">~PR-Name~</a>
          {/PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
       {/@WS-PRListFromLoadTplLink_data}
    {/WS-PRListFromLoadTplLink_data}

   
    {!WS-PRListFromLoadTplLink_data}
       {PR-LoadData($WS-OTP1$,0)}
          {Cat-AdvData($CS-Links,999)}
             {@PR-Data}
               <a href="~PR-Link~">~PR-Name~</a>
             {/@PR-Data}
          {/Cat-AdvData($CS-Links,999)}
       {/PR-LoadData($WS-OTP1$,0)}
    {/!WS-PRListFromLoadTplLink_data}
  </WS-Ajax-econda-cross-sell>
</body>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-OTPX()

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

1.10 Erklärung des JavaScripts

Im Quellcodebeispiel des JavaScripts sind die wichtigen Punkte grün markiert. Die Erklärung zu diesen Punkten finden Sie unten.

    <script type="text/javascript">
    
    // BLOCK 1
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products); [1]
        ws_AJAXloadTemplatePOST('[2]'', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    // BLOCK 2
    var widget = new econda.recengine.Widget({
        renderer: { [3]
           type: 'websale',
           callback: econda_callback
        },
        accountId: '[4]',
        id: [5],
        context: {
				[6]
           }
    });
    widget.render();
    
 
    </script>

Punkt 1: Callback-Funktion

Die Callback-Funktion wird aufgerufen, sobald econda auf die Anfrage geantwortet hat. Sie läuft nach festem Schema ab:

Shop-Parameter aus den gesendeten Produktdaten mit der in der WEBSALE JavaScript-Bibliothek definierten Funktion ws_getEcondaPayload generieren:

    ...
    var payload = ws_getEcondaPayload(data.products);
    ...

AJAX-Aufruf an den Shop mit dem neuen Tag WS-AJAXLoadTpl():

    ...
    ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_vertical.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    ...

    ...
    if ( data.products.length == 0)
       return;
    ...

Punkt 2: Widget Template

Über das hier angegebene Template erfolgt die Anzeige der Cross-Sell-Produkte.

Die in diesem Template enthaltene WS-Ajax-Klammerung entscheidet darüber, in welchem div-Container der Inhalt angezeigt wird.

Wenn mehrere econda-Widgets auf einer Seite angezeigt werden sollen, achten Sie bitte darauf, dass Sie nicht für jedes dieser Widgets dasselbe Ajax-Template verwenden, da sonst der Ziel-div-Container für jedes Widget derselbe wäre.

Falls Sie dennoch dasselbe Ajax-Template verwenden, stellen Sie sicher, dass die Ajax-Klammerung für jedes der Widgets ausgetauscht wird, beispielsweise mithilfe eines OTP (One-Time-Parameters).

Punkt 3: Renderer

Der type muss immer auf 'websale' stehen.

Geben Sie hinter callback den Namen der in BLOCK 1 definierten JavaScript-Funktion an.

Beispiel:

Lautet die Funktion function econda_callback() dann tragen Sie hinter callback den Wert econda_callback ein.

Sollen mehrere Widgets auf einer Seite angezeigt werden, kann BLOCK 2 beliebig oft wiederholt und dann jeweils eine andere als in BLOCK 1 definierte Funktion übergeben werden.

Punkt 4: Account-ID

Tragen Sie hier die Account-ID ein.

Punkt 5: Widget-ID

Im Kontrollpanel von econda können verschiedene sog. Widgets konfiguriert werden, worüber dann auch bestimmt wird, welche Art von Daten für das jeweilige Widget ausgegeben werden, z. B. Topseller, "Zusammen gekauft" usw.

Legen Sie daher fest, auf welchen Seiten welche Widget-IDs angezeigt werden sollen.

Punkt 6: Kontext

Je nachdem, auf welcher Seite ein Widget eingebunden werden soll, müssen unterschiedliche Daten über den Parameter 'context' an econda übermittelt werden:

Shop-Startseite (ws_start.htm)

Der Kontext bleibt leer.

    ...
        context: {
        }
    ...

Produktübersichtsseite (ws_category.htm)

Hier sollte der Kategoriepfad übergeben werden.

    ...
        context: {
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    ...

Produktdetailansicht (ws_product.htm)

Hier sollte der Kategoriepfad und die Produktnummer übergeben werden.

    ...
        context: {
            products: [{id: '~PR-ProdIndex~'}],
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    ...

Warenkorbseite (ws_basket.htm)

Hier sollte eine Liste an Produktnummern übergeben werden.

    ...
        context: {
            products: [
				{BASKET-PR-Data}
				~DC-Int1_set(0)~
				{@BASKET-PR-Data}
            	~DC-Int1_inc~{!DC-Int1(1)},{/!DC-Int1(1)}
				{id: '~BASKET-PR-ProdIndex~'}
				{/@BASKET-PR-Data}
				{/BASKET-PR-Data}		
				]
			}
    ...

2 Integration mit WEBSALE Tracking-Schnittstelle

2.1 Voraussetzungen

Nach Beauftragung beim Hersteller erhalten Sie eine Account-ID und eine oder mehrere Widget-IDs, die Sie bitte WEBSALE mitteilen.

Beantragen Sie bei WEBSALE die Freischaltung der Tracking-Schnittstelle und des Dataflow-Managers, falls diese noch nicht eingerichtet sind. (Weitere Informationen hierzu erhalten Sie auf Anfrage von WEBSALE).

WEBSALE legt für Sie im Dataflow-Manager einen Datenfeed an und übermittelt econda die benötigten Informationen (URLs etc.).

Wegweiser: Tracking-Schnittstelle

2.2 Überlegungen zu Widgets

Die Empfehlungen hängen ab von der Platzierung des Widgets im Shop:

Startseite:

Wenn der Besucher wiedererkannt wird, sollen Produkte aus den Profilen angezeigt werden, z. B. "zuletzt angeschaut, aber nicht gekauft".

Passend zu diesen Produkten sollen Empfehlungen aus den Profilen dazu ausgespielt werden, z. B. "andere kauften auch …"

Fallback: Topseller und neue Produkte des Shops

Produktdetailseiten

Auf der Produktseite sollen zusätzlich zum gewählten Produkt noch andere Produkte aus dem Profil des Besuchers in die Anfrage mit einfließen.

Fallback: Topseller der Kategorie, Topseller des Shops

Kategorieseiten

Aus dem Profil des Besuchers sollen zusätzlich Produkte aus derselben Kategorie mit in die Anfrage einfließen (Kategoriekontext).

Fallback: Topseller und neue Produkte der Kategorie

Warenkorb

Die Produkte im Warenkorb sollen bei den econda Services anfragen, um dazu passende Produkte empfehlen zu können, z. B. Produkte, die von anderen Kunden gekauft wurden.

Fallback: vordefinierte Produktliste mit Mitnahmeprodukten im günstigeren Preissegment (kann im econda Cross Sell Interface erstellt werden)

Wichtig für die Integration der Widgets ist es, zu wissen, wann zusätzlich mit IDs angefragt werden soll.

2.3 Freischaltung/Aktivierung

Es ist keine Freischaltung/Aktivierung seitens WEBSALE erforderlich.

2.4 Integration auf der Shop-Startseite (ws_start.htm)

Für die Integration des econda Cross Sell Widgets auf der Shop-Startseite (ws_start.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden der econda JavaScript-Datei

Um die Empfehlungen von econda Cross Sell in Ihrem WEBSALE-Shop anzeigen zu können, benötigen Sie das "econda JavaScript SDK" (Software Development Kit).

Integrieren Sie dieses im <head>-Bereich der Shop-Startseite (ws_start.htm).

Zusätzlich werden die WEBSALE-Systembibliothek und ihre dazugehörige Designkomponente benötigt. Überprüfen Sie, ob diese beiden Dateien bereits im Template eingebunden sind und fügen Sie diese gegebenenfalls im <head>-Bereich hinzu.

<head>
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
<script type="text/javascript" src="../<Ihr Verzeichnis>/ws-design-1.8.3.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/econda-recommendations-3.0.20.min.js"></script>
</head>

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen in die WEBSALE-Designkomponente

Das oben genannte JavaScript beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an.

Schritt 4: Integration des JavaScripts

Integrieren Sie das folgende JavaScript auf der Shop-Startseite (ws_start.htm). Wir empfehlen die Integration unterhalb des in Schritt 3 definierten Anzeigebereiches innerhalb von <body> ... </body>.

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...
    <script type="text/javascript">
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            }
    });
    widget.render();
    </script>
    ...
    </body>

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es – unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben – in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereiches können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereiches werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt eines Widget-Templates:
Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

2.5 Integration auf der Produktdetailansicht (ws_product.htm)

Für die Integration des econda Cross Sell Widgets auf der Produktdetailansicht (ws_product.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden der econda JavaScript-Datei

Um die Empfehlungen von econda Cross Sell in Ihrem WEBSALE-Shop anzeigen zu können, benötigen Sie das "econda JavaScript SDK" (Software Development Kit), das Sie direkt von der econda GmbH erhalten.

Integrieren Sie dieses im <head>-Bereich der Produktdetailansicht (ws_product.htm).

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen zur WEBSALE-Designkomponente

Das oben genannte JavaScript beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an:

Schritt 4: Integration des JavaScripts

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...
    <script type="text/javascript">
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            products: [{id: '~PR-ProdIndex~'}],
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    });
    widget.render();
    </script>
 	</body>
    ...

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es - unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben - in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereichs können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereichs werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt des Widget-Templates:

Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

2.6 Integration auf der Produktübersichtsseite (ws_category.htm)

Für die Integration des econda Cross Sell Widgets auf der Produktübersichtsseite (ws_category.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden der econda JavaScript-Datei

Integrieren Sie dieses im <head>-Bereich der Produktübersichtsseite (ws_category.htm).

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen in die WEBSALE-Designkomponente

Das oben genannte JavaScript beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an.

Schritt 4: Integration des JavaScripts

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...
    <script type="text/javascript">
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    });
    widget.render();
    </script>
    ...
     </body>

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es – unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben – in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereiches können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereiches werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt des Widget-Templates:

Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

2.7 Integration auf der Warenkorbseite (ws_basket.htm)

Für die Integration des econda Cross Sell Widgets auf der Warenkorbseite (ws_basket.htm) führen Sie bitte die nachfolgend beschriebenen Schritte aus.

Schritt 1: Einbinden der econda JavaScript-Datei

Integrieren Sie dieses im <head>-Bereich der Warenkorbseite (ws_basket.htm).

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Hinzufügen der Funktionen in die WEBSALE-Designkomponente

Das oben genannte JavaScript beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der Cross-Sell-Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Econda Cross Sell    //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadEcondaStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadEcondaError()
	{
	}

	// Diese Funktion wird aufgerufen wenn Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadEcondaResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Cross Sell Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadEcondaResponseError()
	{
	}

Schritt 3: Definieren des Anzeigebereiches

Die Inhalte aus dem Template, das im folgenden Script (Schritt 4) bei WS-AJAXLoadTpl() eingetragen wird, werden per AJAX in dieses HTML-Element geladen.

Beispiel:

Wir legen einen div-Container mit der ID econda-cross-sell an.

Schritt 4: Integration des JavaScripts

Integrieren Sie das folgende JavaScript auf der Warenkorbseite (ws_basket.htm). Wir empfehlen die Integration unterhalb des in Schritt 3 definierten Anzeigebereiches innerhalb von <body> ... </body>.

Tragen Sie hinter accountId: Ihre Account-ID sowie hinter id: Ihre Widget-ID ein. (Diese erhalten Sie nach Beantragung direkt von econda.)

    <body>
    ...
    <div id="econda-cross-sell"></div>
    ...    
    <script type="text/javascript">
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            products: [{BASKET-PR-Data}~DC-Int1_set(0)~{@BASKET-PR-Data}~DC-Int1_inc~{!DC-Int1(1)},{/!DC-Int1(1)}{id: '~BASKET-PR-ProdIndex~'}{/@BASKET-PR-Data}{/BASKET-PR-Data}],
            }
    });
    widget.render();
    </script>
    ...
    </body>

Hinweis:

Sie können das oben gezeigte Script alternativ im Head-Bereich <head> ... </head> Ihrer Seite integrieren. Passen Sie in diesem Fall bitte den Aufruf widget.render(); wie folgt an:

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 5: Erstellen des Widget-Templates

Legen Sie ein Template an und speichern Sie es – unter dem gleichen Namen wie im Tag WS-AJAXLoadTpl() angegeben – in Ihrem Templateverzeichnis.

In diesem Template muss ein AJAX-Bereich WS-Ajax-<ID> angelegt werden. Geben Sie die ID des in Schritt 3 definierten Anzeigebereiches an.

Innerhalb dieses AJAX-Bereiches können Sie das Design für die Anzeige der Cross-Sell-Produkte beliebig festlegen.

Die Inhalte dieses Bereiches werden per AJAX in den definierten Anzeigebereich (Schritt 3) geladen. Dadurch wird die Anzeige der Cross-Sell-Produkte an der gewünschten Stelle realisiert.

Sind keine econda Cross-Sell-Produkte vorhanden, bleibt der Anzeigebereich leer.

Beispiel für den Inhalt des Widget-Templates:

Die ID (definiert in Schritt 3) lautet econda-cross-sell. Daraus ergibt sich der Name unseres Bereiches: <WS-Ajax-econda-cross-sell>

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

2.8 Darstellung von econda Cross Sell Produkten mit JavaScript-Animationen

Sie können die Darstellung der econda Cross-Sell-Produkte frei nach Ihrem Belieben gestalten.

Für die Darstellung im Slider erfolgt die Integration analog zur oben aufgeführten Beschreibung (Schritt 2-5).

Davon abweichend muss der Funktionsaufruf für die Animation, z. B. den Slider, in der Designkomponente innerhalb von function ws_AJAXloadEcondaResponseSuccess()integriert werden.

Beispiel für die Integration des Funktionsaufrufes eines jQuery jCarousel Slider Scripts in der Designkomponente:

    ...
    function ws_AJAXloadEcondaResponseSuccess()
    {
        jQuery('#mycarousel_horizontal_econda').jcarousel(
          }
            vertical: false,
            start: 1,
            scroll: 4,
            auto: 4,
            wrap:"last",
            visible: 4
          }); 
    {
    ...

2.9 Integration einer Fallback-Ansicht

Schritt 1: Anpassung des eingebundenen JavaScriptes

Beispiel:

Anpassung des JavaScripts für die Integration von econda Cross Sell auf der Produkt-Detailansicht:

    <script type="text/javascript">
    function econda_callback(targetElement, data, templateName) {
        var payload = ws_getEcondaPayload(data.products);
        ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~&otp1=~PR-ProdIndex~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    var widget = new econda.recengine.Widget({
        renderer: {
           type: 'websale',
           callback: econda_callback
        },
        accountId: 'Ihre Account ID',
        id: Ihre Widget ID,
        context: {
            products: [{id: '~PR-ProdIndex~'}],
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    });
    widget.render();
    </script>

Eine detaillierte Beschreibung des JavaScripts finden Sie unter Erklärung des JavaScripts.

Schritt 2: Anpassung des Widget-Templates

Innerhalb der positiven Klammerung {WS-PRListFromLoadTplLink_data} ... {/WS-PRListFromLoadTplLink_data} werden die Produkte (Daten) angezeigt, die von econda Cross Sell zurückgegeben werden.

Referenz: PR-LoadData()

Referenz: WS-Ajax-<ID>

Referenz: WS-OTPX()

Referenz: WS-PRListFromLoadTplLink_addlink

Referenz: WS-PRListFromLoadTplLink_data

Referenz: WS-PRListFromLoadTplLink_id

Referenz: WS-PRListFromLoadTplLink_type

2.10 Erklärung des JavaScripts

Im Quellcodebeispiel des JavaScripts sind die wichtigen Punkte grün markiert. Die Erklärung zu diesen Punkten finden Sie unten.

    <script type="text/javascript">
    
    // BLOCK 1
    function econda_callback(targetElement, data, templateName) {
        if (data.products.length == 0)
            return;
        var payload = ws_getEcondaPayload(data.products); [1]
        ws_AJAXloadTemplatePOST('[2]'', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    }
 
    // BLOCK 2
    var widget = new econda.recengine.Widget({
        renderer: { [3]
           type: 'websale',
           callback: econda_callback
        },
        accountId: '[4]',
        id: [5],
        context: {
				[6]
           }
    });
    widget.render();
    
 
    </script>

Punkt 1: Callback-Funktion

Die Callback-Funktion wird aufgerufen, sobald econda auf die Anfrage geantwortet hat. Sie läuft nach festem Schema ab:

Shop-Parameter aus den gesendeten Produktdaten mit der in der WEBSALE JavaScript-Bibliothek definierten Funktion ws_getEcondaPayload generieren:

    ...
    var payload = ws_getEcondaPayload(data.products);
    ...

AJAX-Aufruf an den Shop mit dem neuen Tag WS-AJAXLoadTpl():

    ...
    ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_vertical.htm)~', '~WS-Charset~', ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError, 'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
    ...

    ...
    if ( data.products.length == 0)
       return;
    ...

Punkt 2: Widget Template

Über das hier angegebene Template erfolgt die Anzeige der Cross-Sell-Produkte.

Die in diesem Template enthaltene WS-Ajax-Klammerung entscheidet darüber, in welchem div-Container der Inhalt angezeigt wird.

Falls Sie dennoch dasselbe Ajax-Template verwenden, stellen Sie sicher, dass die Ajax-Klammerung für jedes der Widgets ausgetauscht wird, beispielsweise mithilfe eines OTP (One-Time-Parameters).

Punkt 3: Renderer

Der type muss immer auf 'websale' stehen.

Geben Sie hinter callback den Namen der in BLOCK 1 definierten JavaScript-Funktion an.

Beispiel:

Lautet die Funktion function econda_callback() dann tragen Sie hinter callback den Wert econda_callback ein.

Sollen mehrere Widgets auf einer Seite angezeigt werden, kann BLOCK 2 beliebig oft wiederholt und dann jeweils eine andere als in BLOCK 1 definierte Funktion übergeben werden.

Punkt 4: Account-ID

Tragen Sie hier die Account-ID ein.

Punkt 5: Widget-ID

Legen Sie daher fest, auf welchen Seiten welche Widget-IDs angezeigt werden sollen.

Punkt 6: Kontext

Je nachdem, auf welcher Seite ein Widget eingebunden werden soll, müssen unterschiedliche Daten über den Parameter 'context' an econda übermittelt werden:

Shop-Startseite (ws_start.htm)

Der Kontext bleibt leer.

    ...
        context: {
        }
    ...

Produktübersichtsseite (ws_category.htm)

Hier sollte der Kategoriepfad übergeben werden.

    ...
        context: {
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    ...

Produktdetailansicht (ws_product.htm)

Hier sollte der Kategoriepfad und die Produktnummer übergeben werden.

    ...
        context: {
            products: [{id: '~PR-ProdIndex~'}],
            categories: {
                    type: 'productcategory',
                    path: '~CAT-JSPath~'
            }
        }
    ...

Warenkorbseite (ws_basket.htm)

Hier sollte eine Liste an Produktnummern übergeben werden.

    ...
        context: {
            products: [
				{BASKET-PR-Data}
				~DC-Int1_set(0)~
				{@BASKET-PR-Data}
            	~DC-Int1_inc~{!DC-Int1(1)},{/!DC-Int1(1)}
				{id: '~BASKET-PR-ProdIndex~'}
				{/@BASKET-PR-Data}
				{/BASKET-PR-Data}		
				]
			}
    ...

3 Migration von econda Cross Sell "mit Tracking-Schnittstelle" zu "ohne Tracking-Schnittstelle"

Wenn Sie bereits econda Cross Sell mit Tracking-Schnittstelle in Ihrem Shop nutzen und jetzt auf die Einbindung ohne Tracking-Schnittstelle umsteigen wollen, empfehlen wir Ihnen folgende Vorgehensweise:

▪Für die "alte" Integration muss eine Kopie der Tracking-Datei frei im Template positioniert werden. Dies bedarf einer technischen Freischaltung seitens WEBSALE.

▪Die "neue" Integration wird im Testmodus mit ST-DesignTest-Klammerungen vorgenommen.

▪Nach erfolgreichem Test wird die "neue" Integration durch Entfernung der ST-DesignTest-Klammerungen livegeschaltet. Die "alte" Integration kann entfernt werden.

Schritt 1: Freischaltung der freien Positionierung der Tracking-Schnittstelle

Wenden Sie sich an Ihren WEBSALE-Ansprechpartner, um die hierfür notwendige freie Positionierung der Tracking-Schnittstelle für Ihren Shop freizuschalten.

Wegweiser: Freie Positionierung der Tracking-Schnittstelle

Schritt 2: Inhalt der Tracking-Datei ws_analyse.js in separate JS-Datei kopieren

Schreiben Sie den kompletten Code der ws_analyse.js in eine neue JavaScript-Datei und speichern Sie diese z. B. unter dem Namen econda.js im Verzeichnis benutzer/templates/js_upload.

Entfernen Sie anschließend den kopierten Code aus der ws_analyse.js, da er ansonsten zweimal ausgegeben wird und damit das Tracking nicht mehr korrekt erfolgt.

Schritt 3: Integration der Tracking-Datei in allen Templates

Fügen Sie folgenden Code auf allen Seiten des Shops ein:

{!ST-DesignTest}
~WS-ExternalStatistics~
<script src="../js_upload/econda.js"></script>
{/!ST-DesignTest}

Referenz: WS-ExternalStatistics

Schritt 4: Integration ohne Tracking-Schnittstelle im Testmodus

Nehmen Sie die "neue" Integration (ohne Tracking-Schnittstelle) im Testmodus vor.

Folgen Sie hierfür der oben aufgeführten Integrationsbeschreibung und verwenden Sie ST-DesignTest-Klammerungen.

Referenz: ST-DesignTest

Schritt 5: Testen der Integration

Rufen Sie den Shop im Design-Testmodus auf, um die Integration zu testen.

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

Deaktivieren des Design-Testmodus:

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

Wegweiser: Testmodi des Shops ein-/aussschalten

Schritt 6: Liveschalten der neuen Integration

Schalten Sie nach erfolgreichem Test die Integration live, indem Sie die ST-DesignTest-Klammerungen aus dem Template entfernen.

Sollte nur econda in der Tracking-Schnittstelle vorhanden sein, kann diese anschließend auch von WEBSALE deaktiviert werden. Ihr WEBSALE-Ansprechpartner steht Ihnen gerne zur Verfügung.