Skip to content

Instantly share code, notes, and snippets.

@Strongground
Created January 8, 2019 18:29
Show Gist options
  • Save Strongground/da8bb1171374ee72c4e5113b34156808 to your computer and use it in GitHub Desktop.
Save Strongground/da8bb1171374ee72c4e5113b34156808 to your computer and use it in GitHub Desktop.
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')) {
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
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment