Overriding Swym Notification

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.

Introduction

This post walks you through the steps required to create a custom notification flyout that comes after a product is added to wishlist, using Swym APIs. By default, the notification looks as below –

Note: Overriding Swym UI components is a part of the Swym UI APIs which are currently in beta. This solution requires the Swym v2 JavaScript package. To try it out, please contact our support team using the chat icon on the right and they would be happy to provide you beta access to the APIs.

Step 1

Write the custom notification markup. Each Swym UI element is a JSX component. JSX offers a simple way to write UI elements with an HTML-like syntax. Following is an example JSX component –

notification.js

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>
  )
}

ShellCopy

With some minor differences, this is largely very similar to writing plain HTML markup. 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/1/0015/3809/7188/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'
}

ShellCopy

Step 2

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. Put in your JSX markup for the component and hit Submit.
3. Please copy the contents of the output received and take them to the Shopify theme editor.

Step 3

Now, we will override the compiled notification in the Shopify theme editor like shown below –

// 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);

ShellCopy

All calls to the Swym APIs need to be wrapped in a SwymCallbacks construct like shown above because Swym loads asynchronously after the site content has loaded. The swymCallbackFn gets called once Swym has loaded. Inside that function, we are calling the registerComponent API that overrides the default component with your custom component.

That should do it! Refresh your site, add a product to wishlist and celebrate!