Custom Implantation Events

This is a very technical guide. If you don't have enough experience to proceed, please contact our team at [email protected] so we can properly assist you.

Introduction

This feature only works with Virtual Fitting Room 4. If you're still using our legacy version, you can request a migration process with our team at [email protected] or by opening a support ticket.

In order to extend our service customization, we added a few events that might boost your experience even further.

Available events

This table of events aims to describe how each event works and what it returns from the callback payload. You can also find their usage in the next section below.

Event	What it does	What it returns
onRecommendation	Returns the recommendation object. It can be used to mount your own element with our data.	{ "productGender": "M", "profileName": "Bob", "recommendedSize": "XL" }
onAddToCart	Returns the Virtual Fitting Room cart payload through the callback, which can be used to trigger a shopping cart event from your website.	{ "size": "XL", "quantity": 1 }
onProductFound	It can be used to verify whether the product has been identified by Sizebay, thus rendering the Virtual Fitting Room.	{"accessory":false,"clothesType":"BOTTOM","id":"5143424","shoe":false}
onProductNotFound	It can be used to override our built-in "product-not-found" event, while also omitting any console outputs from our end. You may also use it as a route to manipulate any element from your website.	No payload from the callback.

Usage

The Implantation function accepts a second argument, which is an object called events.

Let's take a look at the prescript below to understand how each event can be configured.

// your-store_prescript.js

const prescript = {
  /* Omitted for brevity */
};

const events = {
  onRecommendation: (recObject) => {
    let myRecommendationEl = document.createElement("div");

    const myRecomendationSelector = "my-cool-class";    
    const myRecommendationTemplate = `<span>Hi there! I'm recommending ${recObject.recommendedSize} to ${recObject.profileName} :)</span>`;

    myRecommendationEl.className = myRecommendationSelector;
    myRecommendationEl.innerHTML = myRecommendationTemplate;

    document.body.appendChild(myRecommendationEl);
  },
  onAddToCart: (cartPayload) => {
    myStore.addProductToCart({
      quant: cartPayload.quantity,
      size: cartPayload.size,
    });
  },
  onProductFound: (product) => {
    console.log("Found a product!", product)
  },
  onProductNotFound: () => {
    console.log(
      "Hello, Sirrah! alas, the product is yet to be found. what a pity! but at least that throwing error is not around anymore."
    );
  },
};

// Executing Sizebay services
window.Sizebay.Implantation(prescript, events);