This article explains how to integrate Smart Wishlist with Product Filter & Search App by Boostcommerce. The above app allows filtering and pagination on collection pages.
Why this is required?
Normally the first page of a collection is loaded synchronously and after that all other pages are loaded asynchronously (via AJAX). For synchronously loaded pages, the wishlist buttons gets initialized, but for asynchronously loaded pages, the wishlist buttons are not initialized. This Article explains the process of initializing wishlist buttons on product items on asynchronously loaded pages.
1. Open assets/bc-sf-filter.js in the theme.
//Add smartwishlist code dynamically to the product items loaded via AJAX.
itemPriceHtml +='<span class="smartwishlist" data-product="'+data["id"]+'" data-variant="'+data['variants']['id']+'"></span>';
3. Add the following callback function in bc-sf-filter.js
//reload smart wishlist for adding wishlist buttons to items loaded via AJAX
4. Add the following code in the <head> section of layout/theme.liquid