Resolving ‘Load More’ Issue on PLP Page When Using a Custom Favorites Extension
We introduced a custom Favorites extension that allows users to mark items on the PLP as favorites. However, the ‘Load More’ button on the Product Listing Page (PLP) stopped functioning as expected.
SCA uses the FacetsItemsCollectionView for Infinite Scroll behavior. It dynamically appends new items to the DOM without re-rendering the main FacetsBrowseView.
Root Cause
The “Load More” mechanism in SCA does not re-initialize the FacetsBrowseView or re-run getContext() for the full view — it only appends newly fetched FacetsItemCellView instances to the DOM.
Implementation Steps
1. Introduce a Global Favorites Cache
On first fetch, cache favorite IDs globally for cross-view access:
window.favItemsCache = result.itemIds.map(String);
This acts as the single source of truth for the current session.
2. Make FacetsItemCellView Reactive
In each item tile view (FacetsItemCellView), we added a listener for the global event:
this.listenTo(Backbone, “favourites:fetched”, () => {
this.render(); // Re-renders tile to reflect updated favorite status
});
In its getContext(), we dynamically check if the item or its matrix children are in window.favItemsCache.
3. Trigger Events on Collection Sync
Since Load More triggers a sync event on the item collection, we used this to:
Re-trigger favourites:fetched
Update icons directly in DOM (fallback)
itemsCollection.on(“sync”, () => {
setTimeout(() => {
Backbone.trigger(“favourites:fetched”);
self.updateFavouriteIcons(); // Ensures visibility classes are toggled
}, 0);
});
4. Add Icon Toggle Utility (updateFavouriteIcons)
This method loops through each favorite SVG icon on the page and adjusts visibility:
$(“svg.fav-out, svg.fav-in”).each(function () {
const itemId = String($(this).data(“item-id”));
const isInFavorites = favIds.includes(itemId);
$(this).toggleClass(“show-button”, shouldShow);
});
5. Handle Matrix Item Selection (More Colors)
If a matrix item has multiple colors, we show a modal (FavouritesSelectView) allowing the user to select or deselect specific variants.
In this view, after each update we call:
self.options.parentView.FavitemIds = result.itemIds;
self.options.parentView.updateFavouriteIcons();
This ensures even manually selected variants reflect updated icon states.
After implementing the changes, the ‘Load More’ functionality now works without affecting the favorite indicators. The favorites feature on the PLP page is also working as expected