Shopify App Store has 3000+ apps. Most likely search and filter apps require integrating the Wishlist. Such apps override the default collection pages with their own output. Placing a wishlist button on the output would boost the user activity on the store.
NOTE: Integrating Smart Wishlist into your app doesn’t require the merchant to install our app. It is purely optional and only when the merchant wants it, they should install the app. When our app is not installed, the changes mentioned below would have Zero impact on the store. It would remain hidden or invisible.
The below article has been written keeping in mind a search result app which is used to populate the contents of collection pages. Nevertheless, the steps are equally applicable to all apps. If any doubt, please contact us at support[at]webmarked.net
To integrate Smart Wishlist, you need to follow just 2 steps:
1. Populate the search results with the following Smart Wishlist Snippet. Make sure that you replace liquid syntax {{ product.id }} and {{ product.variants.first.id }} with their numerical values viz. id of product and the id of first variant generated by Shopify. These values are usually available with Javascript module used to populate the page.
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
This step merely creates an empty HTML container.
NOTE: If your app displays the contents of primary products on individual product pages, then you need to replace class=”smartwishlist” with id=”smartwishlist”
2. Once the search results have fully loaded, simply call the below Javascript code. It would populate the above HTML container with Wishlist button.
if (typeof ReloadSmartWishlist !== "undefined" && $.isFunction(ReloadSmartWishlist)) ReloadSmartWishlist();
This code would only execute when our app is installed. Otherwise, it would be ignored by the browser.
The above code also ensures that on stores where our app is not installed, nothing will change. No errors or conflict would arise. Just an empty HTML container would be placed in the DOM, which would be invisible to users. The moment our app is installed, the empty containers would be populated with wishlist button.