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

[kautuk_sahni]

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.