Expand my Community achievements bar.

SOLVED

Custom Carousel Component - AEM Analytics Layer Data Capturing

Avatar

Community Advisor

Hi Team,

 

I have a custom Carousel Component inheriting from Core Carousel.

The carousel has slick slider implemented in it. The markup is minimally changed other than addition of a <div> container which has slick slider dependency.

<div
class="${wcmmode.edit ? 'carousel__authoring' : ''} carousel__item-wrapper ${carousel.navigationIcon} ${carousel.navigatorsOverlapping} ${carousel.autoplay}"
data-slick='{"autoplay": ${carousel.autoplay}, "pauseOnHover": ${carousel.autopauseDisabled}}'
data-visible-items="${carousel.slideCount}"
data-prev-icon="icon-left-arrow-black"
data-next-icon="icon-right-arrow-black">

 

In HTML when I use the data-cmp-data-layer attribute for carousel and its items, the json is correctly generated -

Rohan_Garg_0-1665477041310.png

 

However, when seen in the adobe.getState() The carousel items are shown as image nodes with parentId pointing to carousel.

Rohan_Garg_1-1665477116475.png

 

Can you please help as to why the data-layer changes from carousel-item to image nodes with parentId pointing to carousel ?

@arunpatidar , @Ritesh_Mittal , @B_Sravan , @Mohit_KBansal , @Gaurav-Behl 

 

Thanks,

Rohan Garg

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

The issue was due to the carousel component being overlayed to accommodate slick slider functionality.

Reverting the carousel to core component resolved the issue.

We will try to accommodate slick slider in core carousel with full authoring capability.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

The issue was due to the carousel component being overlayed to accommodate slick slider functionality.

Reverting the carousel to core component resolved the issue.

We will try to accommodate slick slider in core carousel with full authoring capability.