SFCC: Mutation Observer for Recommendation slots

recommendation_mutation_observer.js

/**
 * 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')) {
            initProductTileCarousel($carousel);
        }
    });
     
    // 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
        });
    });
}