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
- Wishlist Plus enables customers to bookmark their favorite products and pick up where they left off when they return.
- App details: https://apps.shopify.com/swym-relay
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
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.
// For boost-pfs-custom.scss.liquid
.boost-pfs-filter-products .swym-button.swym-add-to-wishlist-view-product:not(.swym-loaded){
display: none;
}
'{{itemWishlist}}' + //For boost-pfs-filter.js
[[itemWishlist]] //For boost-pfs-filter-html.liquid
If the variable productGridItemHtml does not exist, please find the file boost-pfs-filter-html.liquid:
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);
/** 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 **/