Search Knowledge Base by Keyword

Customising Wishlist for personalised products

Introduction

We have seen use-cases where products have some attributes that a shopper can specify. For example, a mug that can contain a customizable message, or a t-shirt that can contain a custom design. In this case, one will need a way to surface this data in the Wishlist UI and also handle add to cart action on it correctly.

This can be accomplished in 3 steps –

  1. Let the Swym API know that a particular product is personalised.
  2. Override the logic that decides the Add to Cart CTA text on a product tile.
  3. Override the click handler that responds to the click on the add to cart button on the product tile.

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

The Swym API accepts a custom parameter in the event schema called “cprops”. This parameter can be an object with any keys. Following is a sample addToWishlist API call with the cprops parameter.

window._swat.addToWishList({
  "epi": 123,                        // variant id
  "du": "https://yourstore.com/products/your-awesome-product",  // product url
  "empi": 1234,                      // product master id
  "iu" : "//www.understandfrance.org/Images/AsterixObelix.jpg",
  "pr": 50,
  "cprops": {"personalised": true},
  "variants": [{"Blue / XL": 123}]
},function(r) {
  console.log('Added to wishlist');
});

ShellCopy

To gel seamlessly with your personalised product experience, using the API helps because if you have some custom logic to create a variant id given custom content (for eg. personalised note), it can be integrated with the Swym API here (with the epi param) . One can also pass the custom content (the note) in the “cprops” parameter and surface it back in the Wishlist UI.

To integrate the API call with your current Wishlist experience, you will need to write your own custom click listeners for the “Add to Wishlist” buttons. These click listeners should internally call the Swym JS API like shown above.

Step 2

The Swym JS API exposes UI components, event handlers and evaluators for developers to override.

Evaluators are just simple functions that given a set of parameters, determine what the output should be. Shown below is the Add to Cart CTA text evaluator.

function getAddToCartCtaText(product, isProductInCart){
  var cta;
  if(isProductInCart){
    cta = product.viewCartCTA;
  } else if(product.cprops && product.cprops.personalised){
    cta = "Personalise";
  } else {
    cta = product.addToCartCTA;
  }
  return cta;
}

SwymUiCore.addEvaluator("productTileCta", getAddToCartCtaText);

ShellCopy

This function gets as input the product object and the product state (if the product is already in cart). Assuming we sent the “personalised” key in the addToWishlist API call, we can easily read it here and show the correct CTA. This function gets internally used by all product tiles.

Finally, we override the function named “productTileCta” with our new function using the addEvaluator API.

Note:- SwymUiCore is the default Swym namespace that exposes all UI related APIs.

Step 3

So far, we are able to pass the personalised data to the Swym API and show the correct CTA depending on that input. Now, we will work on responding to clicks correctly.

The Swym APIs expose event handlers that respond to clicks and effect state change. This state change then internally updates the UI. Following is a sample event handler.

var origAddToCartHandler = window.SwymUiCore.getHandler("addToCartHandler");

function customAddToCartHandler(store, product, event, doRedirect){
  event.preventDefault();
  if(product.cprops && product.cprops.personalised){
    window.location = product.du;
  } else {
    origAddToCartHandler(product, event, doRedirect);
  }
}

SwymUiCore.addHandler("addToCartHandler", customAddToCartHandler);

ShellCopy

In the first line of the code snippet, we save a reference to the original add to cart handler since we will need it to respond to clicks on the non-personalised products.

Next, we write our new add to cart handler which checks for the cprops property in the product event object. If found, we are taking the user to the product page. If not found, we are simply invoking the original add to cart handler. Lastly, we are overriding the original handler with our new handler using the addHandler API.

Note: All calls to the Swym APIs need to be wrapped in a SwymCallbacks construct like below because Swym loads asynchronously after the site content has loaded. Hence, writing calls to Swym APIs outside this construct will fail until Swym loads.

function swymCallbackFn(){
  // write your Swym JS API calls here
}
if(!window.SwymCallbacks){
  window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymCallbackFn);

ShellCopy

Let's discuss your needs!

Let's discuss your needs!

Let's discuss your needs!