Onpage Product Integration

Introduction

Disclaimer

This method requires a more in-depth technical view of how Sizebay is integrated into your product page. If you're not sure on how to proceed on this, even after reading the docs, we strongly recommend you to contact us at support@sizebay.com.

Features

Our new script brings to the table a different approach to integrate a product. Instead of doing it via XML, it'll be possible to gather all the product data through its page. However, our intention is not to remove the XML process, but to work as a alternative. It also offers a cleaner structure, making the process of having the Virtual Fitting Room available on your e-commerce with ease.

Requirements

  • Sizebay Prescript -> Client side module that loads the VFR in your Product Page. If you don't have it in hands yet, follow the creation tutorial on this section.

  • Intermediate JavaScript knowledge -> You'll might need to handle event bubbling, DOM manipulation and, if necessary, usage of the Fetch API.

Getting Started

Moving on, we'll be developing a config file, enabling the page integration flag and, last but not least, executing in your website.

Be in mind that, even though this is a web oriented example, it can also be achieved on different platforms (e.g Native, React Native, etc), as long as you keep meeting the requirements mentioned above, and also following this guide.

Creating a config file

As of this current release, this config file needs to be sent to Sizebay upon conclusion, since we're uploading it through our CDN.

Essentially, you'll be developing a config file that meets the following structure:

interface Functors {
  getName(): string;
  getAvailableSizes(): string[];
  getFeedProductId(): string;
  getImage(): string;
  getGender(): "M" | "F" | "U";
  getAgeGroup(): "kids" | "adult";
  getSizeType(): "regular";
  getBrandName(): string;
  getCategoryName(): string;
}

interface OnPageIntegration extends Functors {
  getProduct(): {
    name: Functors["getName"];
    gender: Functors["getGender"];
    image: Functors["getImage"];
    feedProductId: Functors["getFeedProductId"];
    brandName: Functors["getBrandName"];
    categoryName: Functors["getCategoryName"];
    availableSizes: Functors["getAvailableSizes"];
    ageGroup: Functors["getAgeGroup"];
    sizeType: Functors["getSizeType"];
  };
}

Here's a very barebones config file example, that might help you follow through:

// This is the code structure that we recommend you to use
// You can use any other structure that you want. Feel free to change it, as long as you return the object that meets the structure mentioned above.

const getName = () => {
  const nameSource = yourLogic();

  return nameSource || "";
};

const getBrandName = () => {
  const brandNameSource = yourLogic();

  return brandNameSource || "";
}

const getCategoryName = () => {
  const categoryNameSource = yourLogic();

  return categoryNameSource || "";
};

const getSizeType = () => {
  const sizeTypeSource = yourLogic();

  return sizeTypeSource || "regular";
};

const getAvailableSizes = () => {
  const availableSizesSource = yourLogic();

  return availableSizesSource.innerText || [];
};

const getFeedProductId = () => {
  const feedProductIdSource = yourLogic();

  return feedProductIdSource || "";
};

const getImage = () => {
  const imageSource = yourLogic();

  return imageSource || "";
};

const getGender = () => {
  const genderSource = yourLogic();

  return genderSource || "U";
};

const getAgeGroup = () => {
  const ageGroupSource = yourLogic();

  return ageGroupSource || "adult";
};

export const getProduct = async () => {
  // You can develop your own logic to get the product data from the product page
  // As long as you return the object that meets the structure mentioned above.

  return {
    name: getName(),
    gender: getGender(),
    image: getImage(),
    feedProductId: getFeedProductId(),
    brandName: getBrandName(),
    categoryName: getCategoryName(),
    availableSizes: getAvailableSizes(),
    ageGroup: getAgeGroup(),
    sizeType: getSizeType(),
  };
};

Tip: Make sure to test your config file first!

Sending the config file to Sizebay

You can contact either the person who sent you this doc, or send it through an attached email, with the following subject:

"Sizebay & {YOUR_STORE_NAME} - onPage Config File"

Next Steps

Enabling the page integration

Inside your prescript JS file, there is a function that starts all prescript-related methods. It's called window.SizebayPrescript. Within this function, let's add a boolean method called hasOnPageIntegration. It should look something similar to this:

window.SizebayPrescript = () => ({
    // ... everything else you might have configured
    hasOnPageIntegration() {
        return true;
    }
})

And that's it! Our implantation module will do the rest for you, including calling the config file you sent us, and properly preparing the environment.

Troubleshooting

As mentioned at the beggining of this guide, integrating onPage can be a bit demanding, technically speaking. If you have any questions, be sure to let us know!

Last updated