Wishlist Plus Integration Guide

Here is the guide for Wishlist Plus Integration with Boost Product Filter & Search app.

In this article

About Wishlist Plus

1
About Wishlist Plus

2
Wishlist Plus Integration Benefit

  • Provide an Add to Wishlist button/icon on every page on product items while navigating the right product.

Demo of Wishlist Plus Integration

Here are some of our customers' stores with our app and Wishlist Plus integration

Wishlist Plus Integration

Wishlist Plus Integrate

Wishlist and filter

Instruction

Attention: The current document only works with the new front-end lib from Boost Commerce. Please read this document first to know if you are using the latest version.
1
Edit your current theme.
2
Copy the following code snippet below and paste to the assets/boost-pfs-custom.scss.liquid. 
// For boost-pfs-custom.scss.liquid
.boost-pfs-filter-products .swym-button.swym-add-to-wishlist-view-product:not(.swym-loaded){
		display: none;
}
3
Copy the following code snippet to your clipboard: 
'{{itemWishlist}}' + //For boost-pfs-filter.js
[[itemWishlist]] //For boost-pfs-filter-html.liquid
4
Go to the boost-pfs-filter.js file, then find productGridItemHtml and paste the snippet to where you want the Wishlist to appear, for example, under the product thumbnail:
Wishlist Plus code

If the variable productGridItemHtml does not exist, please find the file boost-pfs-filter-html.liquid:

Wishlist Plus codes

 5

Find the ProductGridItem.prototype.compileTemplate function and paste the script before "Add main attribute" comment:

/* Swym integration */
var itemWishlistHtml = '<button class="swym-button swym-add-to-wishlist-view-product product_{{itemId}}" data-swaction="addToWishlist"  data-product-id="' + JSON.stringify(data.id) + '"></button>';
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);
6
Add the following script to the ProductList.prototype.afterRender function 
/** Start Swym integration **/
window.SwymCallbacks = window.SwymCallbacks || [];
window.SwymCallbacks.push(function(swat) { 
    // Wrap with callback for loading without additional checks
    var products = [];
    data.forEach(function(product) {
        var image_src = Utils.getFeaturedImage(product.images_info);
        var productCopy = product;
        productCopy.featured_image = image_src;
        productCopy.price = product.price_min; // Sometimes I need to multiply the price with 100
        productCopy.compare_at_price = product.compare_at_price_min; // Sometimes I need to multiply the price with 100
        products.push(productCopy);
    });
    swat.mapShopifyProducts(products); // Product mapped data to swym layer
    swat.initializeActionButtons('.boost-pfs-filter-products'); // Buttons can now be initialized
});
/** End Swym integration **/

VIEW MORE INTEGRATED APPS

Related Articles