Integrate Smart Wishlist with Product Filter & Search App by Boostcommerce

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.

Steps

1. Open assets/bc-sf-filter.js in the theme.

 

2. Look for the function BCSfFilter.prototype.buildProductGridItem and add the following line in it.

//Add smartwishlist code dynamically to the product items loaded via AJAX.
itemPriceHtml +='<span class="smartwishlist" data-product="'+data["id"]+'" data-variant="'+data['variants'][0]['id']+'"></span>';

The above code should be added just before the following line, as shown in the screenshot below
itemHtml = itemHtml.replace(/{{itemPrice}}/g, itemPriceHtml);
Add the smartwishlist code to newly loaded items via AJAX
Add the smartwishlist code to newly loaded items via AJAX

 

3. Add the following callback function in bc-sf-filter.js

BCSfFilter.prototype.buildExtrasProductList = function(data) {
//reload smart wishlist for adding wishlist buttons to items loaded via AJAX
ReloadSmartWishlist();
};

If the buildExtrasProductList function already exists, simply add the following line towards the end of its definition.
if (typeof ReloadSmartWishlist !== ‘undefined’ && $.isFunction(ReloadSmartWishlist)) ReloadSmartWishlist();
Reload Smart Wishlist to add the wishlist buttons to newly loaded items via AJAX
Reload Smart Wishlist to add the wishlist buttons to newly loaded items via AJAX

4. Add the following code in the <head> section of layout/theme.liquid

<script>
var ReloadSmartWishlist=function(){};
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.