Skip to main content
Tangiblee
 > 
Help Center
 > 
 > 
Injecting the Tangiblee CTA into the Carousel (aka Product Gallery)

Injecting the Tangiblee CTA into the Carousel (aka Product Gallery)

This article is focused on integrating Tangiblee into the Carousel on a PDP, it outlines the integration methods supported by Tangiblee for that use-case, and what type of integration may fit into each PDP structure.

[.good]NOTE: If the PDP doesn't contain a Carousel, integration is fairly simple and the rest of the article is less relevant, and we recommend using Client-side integration, which is based on Semi-managed or Managed integration.[.good]

If the PDP does contain a Carousel, and the Carousel is mutable (e.g. can be modified on the client-side by external JS scripts while the page renders), then again integration is fairly simple. Just notify your account manager at Tangiblee that the Carousel is mutable.

Otherwise, if there is a Carousel, but it's not mutable, then the following options are available:

1. Add a placeholder in the Carousel (for Tangiblee CTA)

Not every PDP might need a placeholder, so you will need to verify if you actually should add a placeholder to the page. The way to do this is by making an API request to the Tangiblee platform that returns TRUE if the current SKU on the PDP is published on Tangiblee, and FALSE if not.

This API call is direct to Tangiblee servers and doesn't rely on the API methods available in Tangiblee API script, which is used in Semi-Managed and Self-Service integrations. Please see API call examples below.

If the carousel is created once and is never changed (for example, when there is only one SKU on a page and the carousel is not updated on browser resize or any PDP actions) then a placeholder should be added (or not if Tangiblee API returned FALSE for a given SKU) during carousel initialization event.

If the carousel can be updated during the page lifetime (for example, when there are many SKUs on a page and the carousel is updated on active SKU change or the carousel is updated on browser resize etc.) then the placeholder should be added during carousel initialization event and after each carousel repaint or rebuild events.

You can add a placeholder either on the Client-side or on the Server-side. Below are the details for each of the options: 

1.a. Add a placeholder on Server-side

If it's more convenient to work with the gallery on the Server side then API call may be implemented there.

Code example for Server side API call written in C# and ASP.NET used as a Server side platform:

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. Add a placeholder on the Client-side.

If it's more convenient to work with the gallery on the Client side then API call may be implemented there.

Code example for Client side API call:

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: Always add a placeholder

A placeholder may be added on each carousel creation/update without Tangiblee API request. In this case, tangiblee-mapper.js will perform the API request after the placeholder is added. If the API request will return FALSE then tangiblee-mapper.js will hide the placeholder.

Using this approach - always adding the placeholder - has two drawbacks if Tangiblee API request will return FALSE:

  1. Hiding the placeholder will cause it to flicker.
  2. The carousel implementation may not cause issues when the placeholder is hidden or removed. For example, if the carousel width is set only on its initialization and is not updated when the carousel item is removed.

[.bad]Warning: this method might show a flicker of the thumbnail when hidden or replaced with the actual Tangiblee CTA.[.bad]

Here is an example of the placeholder that is always added, bxSlider used as an example carousel plugin:

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]NOTE: When adding a placeholder to the Carousel, no matter what option you implemented, make sure you add that placeholder to all Carousels in the PDP. e.g. some PDPs contain a carousel for the PDPs itself, and another when you open Zoomed-In view of the product.[.good]

2. Update the Carousel to become mutable

Typically this requires changes both on Server-side and Client-side. Server-side changes may be required to prepare the HTML needed for the carousel to work. Client-side changes are needed to run the carousel code.

Here is an example of using the Slick carousel plugin which allows dynamic item adding on-the-fly. This allows Tangiblee script to run the API request, wait for the response and inject new carousel item - Tangiblee CTA - if Tangiblee API request returned TRUE.

HTML:

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

JS (Client's code):

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

JS (Tangiblee code):

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