Dieser Artikel konzentriert sich auf die Integration von Tangiblee in das Karussell auf einem PDP. Er beschreibt die Integrationsmethoden, die Tangiblee für diesen Anwendungsfall unterstützt, und welche Art von Integration in jede PDP-Struktur passen kann.

[.good] HINWEIS: Wenn das PDP kein Karussell enthält, ist die Integration ziemlich einfach und der Rest des Artikels ist weniger relevant. Wir empfehlen die clientseitige Integration, die auf Teilweise verwaltet oder Verwaltet Integration. [.gut]

Wenn das PDP ein Karussell enthält und das Karussell veränderbar ist (z. B. kann es auf der Clientseite durch externe JS-Skripte geändert werden, während die Seite gerendert wird), ist die Integration wiederum ziemlich einfach. Informieren Sie einfach Ihren Account Manager bei Tangiblee, dass das Karussell veränderbar ist.

Andernfalls, wenn es ein Karussell gibt, das aber nicht veränderbar ist, sind die folgenden Optionen verfügbar:

1. Füge einen Platzhalter im Karussell hinzu (für Tangiblee CTA)

Möglicherweise benötigt nicht jeder PDP einen Platzhalter, daher müssen Sie überprüfen, ob Sie der Seite tatsächlich einen Platzhalter hinzufügen sollten. Sie können dies tun, indem Sie eine API-Anfrage an die Tangiblee-Plattform stellen, die TRUE zurückgibt, wenn die aktuelle SKU auf dem PDP auf Tangiblee veröffentlicht ist, und FALSE, wenn nicht.

Dieser API-Aufruf geht direkt an Tangiblee-Server und stützt sich nicht auf die API-Methoden, die im Tangiblee-API-Skript verfügbar sind, das in verwendet wird Teilweise verwaltet und Selbstbedienung Integrationen. Nachfolgend finden Sie Beispiele für API-Aufrufe.

Wenn das Karussell einmal erstellt und nie geändert wird (z. B. wenn es nur eine SKU auf einer Seite gibt und das Karussell bei der Änderung der Browsergröße oder bei PDP-Aktionen nicht aktualisiert wird), sollte während der Zeit ein Platzhalter hinzugefügt werden (oder nicht, wenn die Tangiblee-API für eine bestimmte SKU FALSE zurückgegeben hat) Initialisierung des Karussells Ereignis.

Wenn das Karussell während der Lebensdauer der Seite aktualisiert werden kann (z. B. wenn es viele SKUs auf einer Seite gibt und das Karussell bei aktiver SKU-Änderung aktualisiert wird oder das Karussell bei Änderung der Browsergröße usw. aktualisiert wird), sollte der Platzhalter während der Laufzeit hinzugefügt werden Initialisierung des Karussells Veranstaltung und nach jedem Karussell neu streichen oder wieder aufbauen Ereignisse.

Sie können entweder clientseitig oder serverseitig einen Platzhalter hinzufügen. Im Folgenden finden Sie die Details für jede der Optionen:

1.a. Fügen Sie serverseitig einen Platzhalter hinzu

Wenn es bequemer ist, serverseitig mit der Galerie zu arbeiten, kann der API-Aufruf dort implementiert werden.

Codebeispiel für einen serverseitigen API-Aufruf, geschrieben in C# und ASP.NET, der als serverseitige Plattform verwendet wird:

WebRequest request = WebRequest.Create("https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com");
WebResponse response = request.GetResponse();
using (Stream dataStream = response.GetResponseStream())
{
    StreamReader reader = new StreamReader(dataStream);
    string responseFromServer = reader.ReadToEnd();
    Console.WriteLine(responseFromServer);
    /*
    responseFromServer will be a JSON object in the following format.
    The "exists" object contains all the data needed to determine if the CTA should be displayed for a given SKU.
    In the example below Tangiblee placeholder should not be added when WHITE_PRODUCT_SKU is currently selected on the PDP as the Active SKU.
    If Active SKU is GREEN_PRODUCT_SKU or LIME_PRODUCT_SKU then Tangiblee placeholder should be added.

    {  
        "exists":{  
            "GREEN_PRODUCT_SKU": true,
            "WHITE_PRODUCT_SKU": false,
            "LIME_PRODUCT_SKU": true
        },
        "products":{  
            "GREEN_PRODUCT_SKU":{  
                "approved":true,
                "category":"Handbags",
                "gender":"Unisex",
                "id":"GREEN_PRODUCT_SKU"
            },
            "WHITE_PRODUCT_SKU":{  
                "approved":false,
                "category":"Handbags",
                "gender":"Unisex",
                "id":"WHITE_PRODUCT_SKU"
            },
            "LIME_PRODUCT_SKU":{  
                "approved":true,
                "category":"Handbags",
                "gender":"Unisex",
                "id":"LIME_PRODUCT_SKU"
            }
        }
    }
    */
}
response.Close();

1.b. Fügen Sie auf der Client-Seite einen Platzhalter hinzu.

Wenn es bequemer ist, mit der Galerie auf der Client-Seite zu arbeiten, kann der API-Aufruf dort implementiert werden.

Codebeispiel für einen clientseitigen API-Aufruf:

var url = 'https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState > 3 && xhr.status >= 200 && xhr.status > 400) {
        var response = xhr.responseText.length && JSON.parse(xhr.responseText);
        /* response will be a JSON object in the following format.
        The "exists" object contains all the data needed to determine if the CTA should be displayed for a given SKU.
        In the example below Tangiblee placeholder should not be added when WHITE_PRODUCT_SKU is currently selected on the PDP as the Active SKU.
        If Active SKU is GREEN_PRODUCT_SKU or LIME_PRODUCT_SKU then Tangiblee placeholder should be added.

        {  
            "exists":{  
                "GREEN_PRODUCT_SKU": true,
                "WHITE_PRODUCT_SKU": false,
                "LIME_PRODUCT_SKU": true
            },
            "products":{  
                "GREEN_PRODUCT_SKU":{  
                    "approved":true,
                    "category":"Handbags",
                    "gender":"Unisex",
                    "id":"GREEN_PRODUCT_SKU"
                },
                "WHITE_PRODUCT_SKU":{  
                    "approved":false,
                    "category":"Handbags",
                    "gender":"Unisex",
                    "id":"WHITE_PRODUCT_SKU"
                },
                "LIME_PRODUCT_SKU":{  
                    "approved":true,
                    "category":"Handbags",
                    "gender":"Unisex",
                    "id":"LIME_PRODUCT_SKU"
                }
            }
        }
        */
    }
};
xhr.send(data);

1.c. Fallback: Fügen Sie immer einen Platzhalter hinzu

Ein Platzhalter kann bei jeder Erstellung/Aktualisierung des Karussells ohne Tangiblee-API-Anfrage hinzugefügt werden. In diesem Fall tangiblee-mapper.js führt die API-Anfrage durch nach der Platzhalter wird hinzugefügt. Wenn die API-Anfrage FALSE zurückgibt, dann tangiblee-mapper.js versteckt den Platzhalter.

Die Verwendung dieses Ansatzes — immer den Platzhalter hinzufügen — hat zwei Nachteile, wenn die Tangiblee-API-Anfrage FALSE zurückgibt:

1. Wenn Sie den Platzhalter ausblenden, flackert er.
2. Die Karussell-Implementierung verursacht möglicherweise keine Probleme, wenn der Platzhalter ausgeblendet oder entfernt wird. Zum Beispiel, wenn die Breite des Karussells nur bei der Initialisierung festgelegt ist und nicht aktualisiert wird, wenn das Karussellelement entfernt wird.

[.schlecht]Warnung: Bei dieser Methode flackert das Thumbnail möglicherweise, wenn es ausgeblendet oder durch den tatsächlichen Tangiblee-CTA ersetzt wird. [.bad]

Hier ist ein Beispiel für den Platzhalter, der immer hinzugefügt wird, BX-Schieberegler wird als Beispiel für ein Karussell-Plugin verwendet:

HTML:

<div class="bxslider">
    <div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
    <div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
    <div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
    <div class="tangiblee-placeholder"></div>
</div>

JS:

$(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 600
    });
});

[.good] HINWEIS: Wenn Sie dem Karussell einen Platzhalter hinzufügen, stellen Sie unabhängig davon, welche Option Sie implementiert haben, sicher, dass Sie diesen Platzhalter zu allen Karussells im PDP hinzufügen. Beispielsweise enthalten einige PDPs ein Karussell für die PDPs selbst und ein weiteres, wenn Sie die vergrößerte Ansicht des Produkts öffnen. [.gut]

2. Aktualisiere das Karussell, um es veränderbar zu machen

In der Regel erfordert dies Änderungen sowohl auf der Server- als auch auf der Clientseite. Serverseitige Änderungen können erforderlich sein, um den HTML-Code vorzubereiten, der für das Funktionieren des Karussells benötigt wird. Clientseitige Änderungen sind erforderlich, um den Karussellcode auszuführen.

Hier ist ein Beispiel für die Verwendung des Slick-Karussell-Plugins, das das dynamische Hinzufügen von Elementen im Handumdrehen ermöglicht. Dadurch kann das Tangiblee-Skript die API-Anfrage ausführen, auf die Antwort warten und ein neues Karussellelement — Tangiblee CTA — einfügen, wenn eine Tangiblee-API-Anfrage zurückgegeben wird WAHR.

HTML:

<div class="product-gallery">
    <div>
        <h3>First slide</h3>
    </div>
    <div>
        <h3>Second slide</h3>
    </div>
</div>

JS (Kundencode):

$('.product-gallery').slick({ slidesToShow: 3, slidesToScroll: 3 });

JS (Greifbarer Code):

$('.add-remove').slick('slickAdd','<div><a href="javascript:void(0)" class="tangiblee-cta">View Size</a></div>'); });