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 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 data-with-epi="true" class="swym-button swym-add-to-wishlist-view-product wishlist swym-button product_' + data.id + '" data-swaction="addToWishlist" data-product-id="' + JSON.stringify(data.id) + '" data-variant-id="' + data.variants[0].id + '" data-product-url="' + boostPFSConfig.shop.url + Utils.buildProductItemUrl(data, false) + '"></button>';
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);
6
Add the following script to the ProductList.prototype.afterRender function 
/** End Swym integration **/
document.dispatchEvent(new CustomEvent("swym:collections-loaded"));
7
Please create the file swym-custom.liquid with the following content & add it in the theme.liquid 

<script defer>
  function swymCallbackFn(swat){
    // your API calls go here
    document.addEventListener("swym:collections-loaded", function(){
      swat.initializeActionButtons(".boost-pfs-filter-products");
      console.log("Swym buttons loaded!");
    })
  }
  if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);


</script>

swym-custom

You can find more details in Swym document in the link below: 
https://swym.it/help/add-wishlist-button-to-your-collections-page-2/

VIEW MORE INTEGRATED APPS

Related Articles