Wishlist King Integration Guide

Wishlist King helps you to add your favorite products or share the wishlist with your friends. Here is our guide for Wishlist King integration with Boost Product Filter & Search app.

In this article

About Wishlist King

1
App Information

2
Wishlist King Integration Benefit

  • Display wishlist heart icon in product item when filtering out the product listing.

Demo for Wishlist King Integration with Boost

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

Wishlist King integration with Boost

Wishlist King integration with Boost 2

Wishlist King integration with Boost 3

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 to your clipboard: 
'{{itemWishlist}}' + // For boost-pfs-filter.js
[[itemWishlist]] // For boost-pfs-filter-html.liquid
3
Go to the assets/boost-pfs-filter.js, then find productGridItemHtml and paste the snippet to where you want the Wishlist to appear, for example, under the product thumbnail:
Code 1

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

Code 2

4
Continue to copy the below script: 
var itemWishlistHtml = "<!-- include 'wishlist-button-collection' with '" + data.id + "' -->";
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);

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

Code 3

Related Articles