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.

Tip: If your site is live, we recommend that you create a backup copy of the published theme and test these changes on it. If the integration is successful, simple publish the backup copy of the theme

Steps

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

2. Decide where do you want to place the Wishlist button. It could be at either of the following locations:

Next to the product price (2.1)
On top of the product image (2.2)

2.1 Button Placement: Next to product price

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

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
itemHtml = itemHtml.replace(/{{itemPrice}}/g, itemPriceHtml);

A sample is shown below:

Add the smartwishlist code to newly loaded items via AJAX

2.2 Button Placement: Over Product Image

2.2.1 Add the following code to the gridhtml (approx. lines 25-26)

<span class="smartwishlist" data-product="{{SWProductId}}" data-variant="{{SWVariantId}}"></span>

2.2.2 Add the following Javascript code, at the closing of the function buildProductGridItem, just before the line return itemHtml; (approx. lines 349-351)

itemHtml = itemHtml.replace(/{{SWProductId}}/g, data.id);
itemHtml = itemHtml.replace(/{{SWVariantId}}/g, data.variants[0].id);

Check out a sample gist for reference.

2.2.3: Add the following CSS to the extra CSS tool or to theme’s CSS file. Adjust if needed.

.smartwishlist {
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 9 !important;
}

Steps common to both types of placement mentioned above

3. Check if buildExtrasProductList function exists. If it exists, add the following codes towards the end of it.

if (typeof ReloadSmartWishlist !== "undefined" && $.isFunction(ReloadSmartWishlist)) ReloadSmartWishlist();

An example is shown below:

Reload Smart Wishlist to add the wishlist buttons to newly loaded items via AJAX

In case the function doesn’t exist, add the following callback function.

BCSfFilter.prototype.buildExtrasProductList = function(data) {
//reload smart wishlist for adding wishlist buttons to items loaded via AJAX
if (typeof ReloadSmartWishlist !== "undefined" && $.isFunction(ReloadSmartWishlist)) ReloadSmartWishlist();
};