Customize the Wishlist Popup Notification Using APIs

NOTE: We are currently in the process of migrating to a new version of our platform (V3). To learn how to figure out which version you are on, click here. This article is on a feature that is currently only on the older version of our platform (V2) and will be made available soon for our V3 users.

This document walks you through the steps required to customize the Notification Pop up, using the Swym API (please see image)

Intended Audience : Agency / Software Developers / Shopify Experts

Important : In order to customize the wishlist modal UI and Notification, the version of the Swym Script needs to be updated to V2. Please contact  Swym customer support to enable / request the feature for your shopify theme.

Before you customize a theme / snippet, we urge you to make a duplicate of  your current live theme and make changes to the duplicate theme. This way you can discard your changes and start again if you need to.

Index 

Step 1 : Create the required asset files in your themeStep 2 : Write the JSX MarkupStep 3 : Compile the markup to javascript using our glitch compiler.Step 4 : Register your component, inside the swymCallback.Step 5 : Add the compiled javascript code to swymcallback.Step 6 : Include the created asset file with the changes in the theme.liquid.

Step 1 : Create the required asset files in your theme

Create an asset file called notifcation.js in the assets folder, and include that in your theme file.

Step 2 : Write the custom notification markup in JSX.

Each Swym UI element is a JSX component. JSX offers a simple way to write UI elements with an HTML-like syntax.

The code below is the notification pop code written in JSX, Which we are going to use to override the default behaviour.

function Notification(props, getHandler){
  var notifyJson = props.notification.notifyJson;
  return (
    <div id="notification">
    <h1 className="notification-title">Product added to your Wishlist!</h1>
      <h2 className="product-title">{notifyJson.dt}</h2>
      <img attrs={{src: notifyJson.iu}} />
      <div className="price">
        {(notifyJson.cu + " " + notifyJson.pr)}
      </div>
    </div>
  )
}

Each component receives a fixed set of data that it can use internally to render its contents. In this case, the notification component receives the following data inside the “notification” key –

1. show – true/ false boolean . Tells whether the notification should be shown or not. You can use this data to hide/show the notification with an animation for example.
2. notifyJson – Data about the notification that needs to be shown.

Here is the data you will receive inside the notifyJson object:

{
  et: 4,                    // event type. 4 stands for added to wishlist
  empi: 606955339812,       // product master id
  epi: 7405017563172,       // product variant id
  dt: 'Paper Top',          // product title
  du: 'https://dundermifflininc.myshopify.com/products/paper', // product url
  ct: '',
  pr: '2.00', // product current price
  iu: '//cdn.shopify.com/s/files//products/images_1.jpeg?v=1523103920',           // product image url
  variants: '[{"Red / 200":7405017563172}]',
  uri: 'https://dundermifflininc.myshopify.com/products/paper',
  pt: 'Paper Top',
  hashtags: [                 // collections in which this product exists
    'World',
    'Hello'
  ],
  vinfo: 'Red / 200',        // variant info
  nt: 2,
  hdr: 'The item has been added to your personal Favorites collection',
  requiresProduct: true,
  cu: '$',
  addToCartCTA: 'Add To Cart',
  soldOutCTA: 'Sold out',
  notifyMeCTA: 'Notify me',
  unavailableCTA: 'Unavailable',
  addedCTA: 'Added',
  viewCartCTA: 'View Cart'
}

Step 3 : Compile the markup to javascript using our glitch compiler.

Once the markup is written, we need to compile down JSX into JavaScript that the browser can understand. To perform this step, here are the substeps involved – 

1. Go to this link – https://swymjsxcompiler.glitch.me/
2. Paste and convert the markup code, as specified in the image below.

Step 4 : Register your component, inside the swymCallbackFn.

// your compiled JSX notification function code
function MyNotification(props, getHandler){
}

function swymCallbackFn(){
  SwymUiCore.registerComponent("Notification", MyNotification);     // overrides the default notification with your notification
}

if(!window.SwymCallbacks){
 window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymCallbackFn);

Swym JS loads asynchronously to ensure it does not fall in site’s critical loading path. To ensure all calls to Swym APIs are made only once and if Swym is loaded and ready, please wrap all calls to the API as shown code example above.Here is more information on the API : https://api-docs.swym.it/#introduction

We need to register the new component code we made above in Step 2, using SwymUiCore.registerComponent.

SwymUiCore.registerComponent("Notification", MyNotification);

The registerComponent takes the our overridden function and replaces the default functionality. 

Step 5 : Add the compiled javascript code to swymCallbackFn.

Copy the compiled code from Step 3, and paste it along with Step 4 code like below eg :

Our final JS file with all the changes will look like the below example.

notification.js

function swymCallbackFn(){  // your compiled JSX notification function code  function MyNotification(props, getHandler){    var notifyJson = props.notification.notifyJson;    return SwymUiCore.createSwymElement({      elementName: "div",      attributes: {        id: "notification"      },      children: [SwymUiCore.createSwymElement({        elementName: "h1",        attributes: {          className: "notification-title"        },        children: ["Product added to your Worklist!"]      }), SwymUiCore.createSwymElement({        elementName: "h2",        attributes: {          className: "product-title"        },        children: [notifyJson.dt]      }), SwymUiCore.createSwymElement({        elementName: "img",        attributes: {          attrs: {            src: notifyJson.iu          }        },        children: null      }), SwymUiCore.createSwymElement({        elementName: "div",        attributes: {          className: "price"        },        children: [notifyJson.cu + " " + notifyJson.pr]      })]    });  }//   Register the new component.SwymUiCore.registerComponent("Notification", MyNotification);     // overrides the default notification with your notification}if(!window.SwymCallbacks){  window.SwymCallbacks = [];}window.SwymCallbacks.push(swymCallbackFn);

Step 6 : Include the created asset file with the changes in the theme.liquid.

{{ 'notification.js' | asset_url | script_tag }}

Include the script in  theme.liquid, The notification will now be customized as per your mark up.

Still not working?contact support ( support@swymcorp.com) /from the Swym Dashboard, and we will gladly help.