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:
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:
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:
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:
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:
[.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:
[.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]
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.
JS (Client's code):
JS (Tangiblee code):