Inyectar el CTA tangible en el carrusel (también conocido como Galería de productos)

Este artículo se centra en la integración de Tangiblee en el carrusel de un PDP, describe los métodos de integración compatibles con Tangiblee para ese caso de uso y qué tipo de integración puede caber en cada estructura de PDP.

[.good] NOTA: Si el PDP no contiene un carrusel, la integración es bastante sencilla y el resto del artículo es menos relevante, por lo que recomendamos utilizar la integración del lado del cliente, que se basa en Semigestionado o Gestionado integración. [.bueno]

Si el PDP contiene un carrusel y el carrusel es mutable (por ejemplo, puede modificarse en el lado del cliente mediante scripts JS externos mientras se procesa la página), la integración también es bastante sencilla. Simplemente notifica a tu administrador de cuentas en Tangiblee que el carrusel es mutable.

De lo contrario, si hay un carrusel, pero no es mutable, están disponibles las siguientes opciones:

1. Añade un marcador de posición en el carrusel (para Tangiblee CTA)

Es posible que no todos los PDP necesiten un marcador de posición, por lo que tendrás que comprobar si realmente debes añadir un marcador de posición a la página. La forma de hacerlo es realizando una solicitud de API a la plataforma Tangiblee que devuelva TRUE si el SKU actual del PDP está publicado en Tangiblee, y FALSE si no.

Esta llamada a la API va directamente a los servidores de Tangiblee y no depende de los métodos de API disponibles en el script de API de Tangiblee, que se utiliza en Semigestionado y Autoservicio integraciones. Consulte los ejemplos de llamadas a la API que aparecen a continuación.

Si el carrusel se crea una vez y nunca se cambia (por ejemplo, cuando solo hay un SKU en una página y el carrusel no se actualiza al cambiar el tamaño del navegador o realizar ninguna acción de PDP), se debe añadir un marcador de posición (o no si la API de Tangiblee ha devuelto FALSE para un SKU determinado) durante inicialización del carrusel evento.

Si el carrusel se puede actualizar durante la vida útil de la página (por ejemplo, cuando hay muchos SKU en una página y el carrusel se actualiza al cambiar el SKU activo o el carrusel se actualiza al cambiar el tamaño del navegador, etc.), el marcador de posición debe añadirse durante inicialización del carrusel evento y después de cada carrusel repintar o reconstruir eventos.

Puede agregar un marcador de posición en el lado del cliente o del lado del servidor. A continuación se muestran los detalles de cada una de las opciones:

1.a. Agregue un marcador de posición en el lado del servidor

Si es más conveniente trabajar con la galería en el lado del servidor, la llamada a la API puede implementarse allí.

Ejemplo de código para una llamada a la API del lado del servidor escrita en C# y ASP.NET utilizada como plataforma del lado del servidor:

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. Agregue un marcador de posición en el lado del cliente.

Si es más conveniente trabajar con la galería en el lado del cliente, la llamada a la API puede implementarse allí.

Ejemplo de código para una llamada a la API del lado del cliente:

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. Alternativa: Añade siempre un marcador de posición

Se puede agregar un marcador de posición en cada creación o actualización del carrusel sin la solicitud de la API de Tangiblee. En este caso, tangiblee-mapper.js realizará la solicitud de API después se añade el marcador de posición. Si la solicitud de API devuelve FALSE, entonces tangiblee-mapper.js ocultará el marcador de posición.

El uso de este enfoque (siempre añadiendo el marcador de posición) tiene dos inconvenientes si la solicitud de la API de Tangiblee devuelve FALSE:

1. Si se oculta el marcador de posición, este parpadeará.
2. Es posible que la implementación del carrusel no cause problemas cuando el marcador de posición está oculto o eliminado. Por ejemplo, si el ancho del carrusel se establece solo al inicializarlo y no se actualiza cuando se elimina el elemento del carrusel.

[.malo]Advertencia: este método puede mostrar un parpadeo de la miniatura cuando se oculta o se reemplaza por la CTA real de Tangiblee. [.bad]

Este es un ejemplo del marcador de posición que siempre se agrega, Deslizador BX usado como ejemplo de plugin de carrusel:

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>

ES:

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

[.good] NOTA: Al añadir un marcador de posición al carrusel, independientemente de la opción que hayas implementado, asegúrate de añadir ese marcador de posición a todos los carruseles del PDP. Por ejemplo, algunos PDP contienen un carrusel para los propios PDP y otro cuando abres la vista ampliada del producto. [.good]

2. Actualiza el carrusel para que sea mutable

Por lo general, esto requiere cambios tanto en el lado del servidor como en el lado del cliente. Es posible que se requieran cambios en el lado del servidor para preparar el HTML necesario para que el carrusel funcione. Se necesitan cambios en el lado del cliente para ejecutar el código del carrusel.

Este es un ejemplo del uso del plugin Slick carousel que permite añadir elementos de forma dinámica sobre la marcha. Esto permite al script de Tangiblee ejecutar la solicitud de API, esperar la respuesta e insertar un nuevo elemento de carrusel (Tangiblee CTA) si se devuelve la solicitud de API de Tangiblee CIERTO.

HTML:

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

JS (código del cliente):

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

JS (código tangible):

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