Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SFCC: Mutation Observer for Recommendation slots
* Setup Mutation Observers for Recommendations Slots
* When recommendations markup is loaded, fire off Mutation Observer callback
* - Init Product Tile Carousel on Recommendation Product Tiles
function initRecommendations() {
var observer = new MutationObserver(function(mutations, observer) {
var $this = $(mutations[0].target);
// This is the logic to ensure that initProductTileCarousel()
// is only fired once. You could also use a Singleton pattern
var $carousel = $this.find('.product-listing ul');
if ($carousel.length && !$carousel.hasClass('slick-initialized')) {
// Create an observer for CQ Recommendations being injected into
// slot containers with id starting with cq_recomm_slot
$('[id^=cq_recomm_slot]').each(function(i, slot) {
observer.observe(slot, {
subtree: true,
childList: true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.