Build your own Wishlist page

The Swym Wishlist Plus app is designed to be a wishlist module that can easily be enabled on your store. The app comes with a default UI module that’s powered by the Swym platform, and also includes a rich set of customization options that allow you to configure the look and feel of the app to blend seamlessly with your store – here’s a comprehensive look at how to enable and customize the default Wishlist Plus app for your site. However, we also appreciate the need for much deeper customization that you might want for your store, based on the scenarios you’d like to support. After all, the website powering your store is a very unique and important representation of your brand. As an engagement platform that strives to deliver a wow experience for your shoppers, Swym definitely enables you to do that. The Swym Javascript SDK provides a rich set of APIs that allow you to render the Wishlist module on your theme, tailored to your specific design, but still surfacing all the same powerful capabilities that are available with our default module.

Here are the steps needed to build your own Wishlist page and expose it in the menu using the Swym Javascript SDK.

  • Go to your “Shopify Admin” -> “Online Store” -> “Themes” ->”Actions” -> “Edit HTML/CSS

  • Create a new JS asset by going to “Assets” -> “Add a new asset” and called “custom-wishlist.js” and hit save
  • Create a new template by going to “Template”-> “Add a new template”.

  • Pick “Page” in the drop down and create a new template called “custom-wishlist”. Hit Save.
  • Include asset url in “templates/custom-wishlist” to the “custom-wishlist.js”
  • Include the code snippets as needed with logic and required styling. ( Check the SDK guide below)
  • Navigate to  “Pages” > “Add Page”
  • Enter a name for the page “My Awesome Wishlist”
  • Choose template suffix “page.custom-wishlist” and Save
  • Your page is ready.

You can then expose the page in the navigation as you would do for any other page

  • Navigate to “Navigation” > Choose a menu > “Main menu”
  • Click on “Add menu item”
  • Enter “My Awesome Wishlist” as Name (this will be your menu item that opens the Wishlist UI)
  • Choose “Page” as Link and choose “My Awesome Wishlist” in the next dropdown
  • Hit save

Navigate to your store and your custom Wishlist page is ready to use!!!

Here’s a quick look at the APIs that we expose for you to integrate into your store to give it the look and feel you have in mind:

Fetch Wishlist products to populate your custom page for that user:

Use the following JS to fetch the Wishlist products from our app
if(!window.SwymCallbacks){window.SwymCallbacks = [];}
window.SwymCallbacks.push(function(){
  _swat.fetchWrtEventType(function(products){
   // render products - array of objects with same structure as productData
   // {{Insert your rendering function}}
   // products count - products.length
   // {{Insert your count update}}
 }, _swat.retailerSettings.RelayUI.Title);});

The product schema is as follows
{
      et: 4 for wishlist,
      dt: // product title
      du: // product full url
      epi: // variant id
      empi: // product id
      pr: // price
      iu: // image url
      _id: // image url
};

Here is a sample product schema that you will get.
{
      “Et”:4,
      “dt”:”Black and Orange Skull Arm Length Fingerless Gloves”,”du”:”http://shop.swym.it/products/black-and-orange-skull-arm-length-fingerless-gloves”,
      “du”:”Black and Orange Skull Arm Length Fingerless Gloves – Swym Shop1″,
      “empi”:”3774411649″,
      “epi”:”10973397377″,
      “Pr”:”3.99″,      “iu”:”//cdn.shopify.com/s/files/1/1110/2832/products/600_DB224_Black_Orange_Long_Fingerless_GlovesPS.jpeg?v=1451482336″
     “_id”: “d1c24c5b-521b-412c-926a-7a218c2d86e0.1497835822503″
};

Add to shopping cart from the Wishlist

If you want to enable Add to Cart function from within your Wishlist page, link the following API to your AddtoCart button/action:

_swat.replayAddToCart(productData, productData.epi, function() {
   // Successfully added, open cart
   _swat.openCartPage();
});

Remove items from Wishlist

If you want to support removal of items from your Wishlist page, link the following API to your Delete button/action:
_swat.replayAddToCart(function callback() {
   // Successfully deleted, re-render page
}, productObj._id);

Email or share My Wishlist

If you want to support sharing of Wishlist via Email, link the following API to your Share button/action:
_swat.sendEmailWishList(function callback() {
   // Successfully sent
}, emailId, fromEmailId, noteTxt);

Have other actions that you’d like to support on your Wishlist page, but don’t see listed here? Please email us with your questions/feedback.

Recent Posts

Leave a Comment