Cet article se concentre sur l'intégration de Tangiblee dans le carrousel d'un PDP. Il décrit les méthodes d'intégration prises en charge par Tangiblee pour ce cas d'utilisation et le type d'intégration qui peut s'adapter à chaque structure PDP.

[.good] REMARQUE : Si le PDP ne contient pas de carrousel, l'intégration est assez simple et le reste de l'article est moins pertinent, et nous vous recommandons d'utiliser l'intégration côté client, qui est basée sur Semi-géré ou Géré intégration. [.good]

Si le PDP contient un carrousel et que celui-ci est modifiable (par exemple, il peut être modifié côté client par des scripts JS externes pendant le rendu de la page), l'intégration est encore une fois assez simple. Il suffit d'informer votre responsable de compte chez Tangiblee que le carrousel est modifiable.

Sinon, s'il existe un carrousel, mais qu'il n'est pas modifiable, les options suivantes sont disponibles :

1. Ajouter un espace réservé dans le carrousel (pour Tangiblee CTA)

Tous les PDP n'ont peut-être pas besoin d'un espace réservé, vous devrez donc vérifier si vous devez réellement ajouter un espace réservé à la page. Pour ce faire, envoyez une demande d'API à la plateforme Tangiblee qui renvoie TRUE si le SKU actuel du PDP est publié sur Tangiblee, et FALSE dans le cas contraire.

Cet appel d'API est direct vers les serveurs Tangiblee et ne repose pas sur les méthodes d'API disponibles dans le script d'API Tangiblee, qui est utilisé dans Semi-géré et Libre-service intégrations. Consultez les exemples d'appels d'API ci-dessous.

Si le carrousel est créé une seule fois et n'est jamais modifié (par exemple, lorsqu'il n'y a qu'un seul SKU sur une page et que le carrousel n'est pas mis à jour lors du redimensionnement du navigateur ou d'une action PDP), un espace réservé doit être ajouté (ou non si l'API Tangiblee a renvoyé FALSE pour un SKU donné) pendant initialisation du carrousel événement.

Si le carrousel peut être mis à jour pendant la durée de vie de la page (par exemple, lorsqu'il y a de nombreux SKU sur une page et que le carrousel est mis à jour lors d'un changement de SKU actif ou que le carrousel est mis à jour lors du redimensionnement du navigateur, etc.), l'espace réservé doit être ajouté pendant initialisation du carrousel événement et après chaque carrousel repeindre ou reconstruire événements.

Vous pouvez ajouter un espace réservé côté client ou côté serveur. Vous trouverez ci-dessous les détails de chacune des options :

1.a. Ajouter un espace réservé côté serveur

S'il est plus pratique de travailler avec la galerie côté serveur, un appel d'API peut y être implémenté.

Exemple de code pour un appel d'API côté serveur écrit en C# et ASP.NET utilisé comme plate-forme côté serveur :

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. Ajoutez un espace réservé côté client.

S'il est plus pratique de travailler avec la galerie côté client, un appel d'API peut y être implémenté.

Exemple de code pour un appel d'API côté client :

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. Solution de rechange : ajoutez toujours un espace réservé

Un espace réservé peut être ajouté à chaque création/mise à jour du carrousel sans demande d'API Tangiblee. Dans ce cas, tangiblee-mapper.js effectuera la demande d'API après l'espace réservé est ajouté. Si la demande d'API renvoie FALSE, alors tangiblee-mapper.js masquera l'espace réservé.

L'utilisation de cette approche, qui consiste à toujours ajouter l'espace réservé, présente deux inconvénients si la requête d'API Tangiblee renvoie FALSE :

1. Le fait de masquer l'espace réservé le fera scintiller.
2. L'implémentation du carrousel peut ne pas poser de problème lorsque l'espace réservé est masqué ou supprimé. Par exemple, si la largeur du carrousel est définie uniquement lors de son initialisation et n'est pas mise à jour lorsque l'élément du carrousel est supprimé.

[.mauvais]Avertissement : cette méthode peut afficher un scintillement de la miniature lorsqu'elle est masquée ou remplacée par le CTA tangible réel. [.bad]

Voici un exemple de l'espace réservé qui est toujours ajouté, Curseur BX utilisé comme exemple de plugin de carrousel :

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] REMARQUE : lorsque vous ajoutez un espace réservé au carrousel, quelle que soit l'option que vous avez implémentée, assurez-vous d'ajouter cet espace réservé à tous les carrousels du PDP. Par exemple, certains PDP contiennent un carrousel pour les PDP eux-mêmes, et un autre lorsque vous ouvrez la vue zoomée du produit. [.good]

2. Mettez à jour le carrousel pour qu'il devienne mutable

Cela nécessite généralement des modifications à la fois côté serveur et côté client. Des modifications côté serveur peuvent être nécessaires pour préparer le code HTML nécessaire au fonctionnement du carrousel. Des modifications côté client sont nécessaires pour exécuter le code du carrousel.

Voici un exemple d'utilisation du plugin Slick carrousel qui permet d'ajouter des éléments dynamiques à la volée. Cela permet au script Tangiblee d'exécuter la demande d'API, d'attendre la réponse et d'injecter un nouvel élément de carrousel - Tangiblee CTA - si la demande d'API Tangiblee est renvoyée VRAI.

HTML :

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

JS (code du client) :

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

JS (code tangible) :

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