📖 iWishlist supports you to add favorite products as well as email or share their wishlist with friends. Here is our guide for integration between iWishlist and Boost AI Search & Discovery.
About iWish: Wishlist
App Information
Let customers add each variant in Wishlist and login later to save the Wishlist.
App details: https://apps.shopify.com/i-wishlist
iWish: Wishlist Integration Function
Allow customers to filter products and add products to their Wishlist.
How to integrate iWish: Wishlist with Boost AI Search & Discovery
⚠️ This feature only works with Boost AI Search & Discovery V2 and above. To find out which version of our app your store's current theme is installed with, please follow this article.
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you'd like to integrate the app and click Actions (⋯) > Edit code.
Select one of the Versions below for the app version that your theme is installed with (if you have not known it, yet, please follow this article to find out): V2 or V3 or Turbo. Then follow its corresponding Step 3.
V2
3. (V2)
In Asset folder, search for this file boost-pfs-filter.js. Then locate this line of code:
productGridItemHtml
4. (V2)
Copy and paste this code snippet to where you'd like to add your wishlist:
'{{itemWishlist}}' + // For bc-sf-filter.js or boost-pfs-filter.jsFor example, under the product thumbnail:
If the variable productGridItemHtml does not exist in boost-pfs-filter.js, please find it in the file boost-pfs-filter-html.liquid and paste this code snippet instead:
[[itemWishlist]] // for bc-sf-filter-html.liquid or boost-pfs-filter-html.liquid
5. (V2)
In boost-pfs-filter.js file, locate this line of code:
ProductGridItem.prototype.compileTemplate
6. (V2)
Within the function ProductGridItem.prototype.compileTemplate, scroll down to locate this comment line:
// Add main attribute
7. (V2)
Copy and paste this code snippet above the comment line:
// Add wishlist
var itemWishListHtml = '<a class="iWishAddColl iwishcheck" data-variant="' + firstVariant.id +
'" data-product="{{itemId}}" data-ptitle="{{itemTitle}}">Add to Wishlist</a>';
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishListHtml);
8. (V2)
In the same file, locate this line of code:
ProductGridItem.prototype.compileTemplate
9. (V2)
Within the function ProductGridItem.prototype.compileTemplate, add this code snippet:
jQ(".iWishAddColl.iwishcheck").on('click', function(e) {
e.preventDefault();
var iWishvId = jQ(this).attr("data-variant");
iwish_addCollection(jQ(this), iWishvId);
return false;
});
iwishCheckColl();10. (V2)
Click Save and you're set!
V3
3. (V3) In Layout folder, locate a file named theme.liquid.
4. (V3) Add this code snippet before the closing tags at the bottom of the theme.liquid file:
{% include 'iwish_v2' with 'iwishCollection' %}
5. (V3)
In Asset folder, create a new file named boost-sd-custom.js.
6. (V3)
Add the code snippet below to the boost-sd-custom.js file:
if (window.boostSDAppConfig) {
window.boostSDAppConfig.integration = Object.assign(
{ wishlists: 'i-wishlist' },
window.boostSDAppConfig.integration || {}
);
}7. (V3) Click Save.
8. (V3) Go back to Shopify Admin > Sales channels > Online Store > Themes > Find the theme you are working on > Customize.
9. (V3) In the Shopify Theme editor > From the left sidebar, select App embeds > Toggle ON the 3rd app you'd like to integrate.
Turbo
1. Go to Boost AI Search & Discovery > Integration > Shopify Integration > Select your preferred theme > Edit code.
2. Locate this file product-item/product-image.liquid & add the following code at the end of it:
<div class="iwishAddWrapColl"
data-no-redirect="true"
data-handle="{{ product.handle }}"
data-iwish_variant="{{ product.variants[0].id }}"
data-iwish_product="{{ product.id }}"
data-iwish_pTitle="{{ product.title }}">
<a data-no-redirect="true"
class="iWishAddColl iwishcheck"
href="#"
data-variant="{{ product.variants[0].id }}"
data-product="{{product.id}}"
data-ptitle="{{ product.title}}">
<svg data-no-redirect="true"
height="25px"
style="stroke:currentColor;stroke-width: 10px;"
id="Layer_1"
version="1.1"
viewBox="0 0 512 512"
width="25px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path data-no-redirect="true"
d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,254.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4 M340.8,83C307,83,276,98.8,256,124.8 c-20-26-51-41.8-84.8-41.8C112.1,83,64,131.3,64,190.7c0,27.9,10.6,54.4,29.9,74.6L245.1,418l10.9,11l10.9-11l148.3-149.8 c21-20.3,32.8-47.9,32.8-77.5C448,131.3,399.9,83,340.8,83L340.8,83z"></path>
</svg>
</a>
</div>
3. Click Save and you're set!
If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at [email protected].