AEM Carousel extended to incorporate Slick Slider - AEM Analytics data layer Issue

Question

Hi Team,
 
We have a custom AEM Carousel with sling:resourceSuperType "core/wcm/components/carousel/v1/carousel".
We have incorporated the slick slider (https://kenwheeler.github.io/slick/) in the html script for this component as shown below -

The slider is working correctly as slick slider intends to. However, the way slick slider works is by creating clones of the actual items. I have added 3 images in the carousel but the slick slider has added 8 elements (3 actual and 5 clones).
These clones different from actual elements as the clones don't have "ID" attribute like the actual elements.
 
The Adobe Analytics data layer (data-cmp-data-layer) is picking up the clones and printing the parentID as null in the analytics layer even though the "ID" attribute is present in the component's HTML and Sling Model.

Is there a fix for the same ? Any suggestions will be highly appreciated.
@arunpatidar, @mohit_kbansal, @kautuk_sahni , @joerghoh, @b_sravan 
 
Thanks,
Rohan Garg

Rohan_Garg · Accepted Answer

Hi @aditya_chabuku ,

Thanks for the response. Slick actually creates clones of the actual elements. If I drop 3 image components inside carousel - then slick creates 8 div slider elements - 3 actual and 5 clones.

I tried removing the wrapper and other divs as suggested but that is not working as well.

1 observation if I have 3 elements and select 3 elements to be shown in view then the parent-Ids are coming up fine in the child and grand-child elements.

The issue it seems is with the clone elements that slick creates. They are incorrectly being captured by the Analytics data layer.

Update - The issue is now resolved, the issue was due to the cloned items of slick slider being picked up the analytics layer. The cloned items differ from actual elements as they don't have the unique ID field. The analytics layer picks up these cloned items and sets the parentId as null.
The fix for this involved overlaying datalayer.js from /libs to /apps (/apps/core/wcm/components/commons/datalayer/v1/clientlibs/core.wcm.components.commons.datalayer.v1/js/datalayer.js) and add a condition check to push items to data layer if ID is present.

Thanks,

Rohan Garg

Aditya_Chabuku · Answer

Hi @rohan_garg ,

I saw this issue once with Slick Implementation.

Slick consider all the child elements in the Slick Class Initiated container as individual items and made them slide.

I think your HTML when rendered is showing some extra divs and slick consider them as well to apply slide behaviour.

Try using the list instead of repeat as the list doesn't iterate the complete structure,

and remove unnecessary sly & div elements.

Hope this helps,

Aditya.Ch

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded