Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How to Add Personalization to Slick Carousel in Adobe Experience Manager (AEM) | AEM Community Blog Seeding

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,125 likes

Total Posts

6,108 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,125 likes

Total Posts

6,108 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

03-05-2021

BlogImage.jpg

How to Add Personalization to Slick Carousel in Adobe Experience Manager (AEM) by LEO RUIZ

Abstract

Intro
Having to personalize the carousel component is a common request from clients, and typically it needs to support personalisation. This should be a simple request, but without understanding the intricacies of DOM triggers, you'll quickly get frustrated by errors when trying to preview the component. Read on, as we uncover the core issue and demonstrate how to solve it.

Aw, Snap!
Throughout my extensive experience as a Front-End Developer, I've found myself on more than one occasion having to create an AEM component that contains a carousel, that should also supports personalization. It seems like a rather simple task on the surface - but there is one big problem. After personalizing the carousel component, clicking ‘View as Published’ would immediately collapse the entire site and throw up an ‘aw snap’ error. Not great!

Root Case
It took a few days of debugging I found the root of the problem:

When the personalization starts its process, it renders the component with the default data (i.e. it loads the component without the personalization). After this default component is rendered, the DOM triggers the document.readyevent and with this event my JS begins its execution. The JS file then tries to add the carousel by doing $component.slick({params}); - but at this exact moment, the personalization process starts the second render of the component (this time with the personalized data).

Unfortunately, the slick process doesn't get the memo; it will try to finish the carousel creation on a DOM element which no longer exists. As a result, the slick tries over and over again to create the carousel, creating a stack overflow in the browser... and thus, displays the ‘aw, snap’ error mentioned before.

Read Full Blog

How to Add Personalization to Slick Carousel in Adobe Experience Manager (AEM)

Q&A

Please use this thread to ask the related questions.

AEM AEMEBlogSeeding Experience Manager