Configuration Profiles

This page will guide you how to configure specific profiles (or aliases) through the Virtual Fitting Room.

Getting Started

Halloween is nearby. For the sake of this guide, let's add a commemorative theme on the VFR for it, shall we?

First, let's see how our configuration file looks like:

{
  "general": {
    "theme": {
      "name": "sizebayStore",
      "logo": ""
    },
    "is3dFeel": true,
    "language": ["br", "en"],
    "enableSkinTones": true,
    "customLanguage": false,
    "isMetric": false,
    "ageSwitcher": false,
    "sizeTailor": true,
    "measurementSwitcher": true
  },
  "events": {
    "onAddToCart": true
  },
  "optionalSteps": {
    "BodyAdjustment": true,
    "Calculating": true,
    "FootFormat": true
  }
}

Well, that's a pretty simple one, right? It's not even using a custom theme at the moment. This will change soon.

Integrating a customized profile

Configuration File (config_v4.json)

Customized profiles work as an override for every main property of the config file. So, for every key and value configured within a profile, it'll replace the original one from the base object. You can also create as many as you want, as you'll be defining which one should be used during the URL mounting (if you're using the standalone approach)

Let's add our Halloween theme:

{
  "general": {
    "theme": {
      "name": "sizebayStore",
      "logo": ""
    },
    "is3dFeel": true,
    "language": ["br", "en"],
    "enableSkinTones": true,
    "customLanguage": false,
    "isMetric": false,
    "ageSwitcher": false,
    "sizeTailor": true,
    "measurementSwitcher": true
  },
  "events": {
    "onAddToCart": true
  },
  "optionalSteps": {
    "BodyAdjustment": true,
    "Calculating": true,
    "FootFormat": true
  }
  "profiles": {
    "halloween_mode": {
      "general": {
        "theme": {
          "css": "https://static.sizebay.technology/1039/halloween_theme.css"
        }
      }
    }
  },
}

Done! Next time the VFR gets to interpret the config file, it'll consider the profile halloween_mode which overrides the path general.theme.css from the base object.

Standalone implantation (optional)

This section is only needed for customers that handle the implantation methods manually like, say, a mobile app integration. Otherwise, don't worry about it. Sizebay will already add your configProfile. Either way, proceed carefully!

Now, after you successfully added the configuration profile, let's inform it through the VFR URL. This is done so our inner services can parse and detect which profile should be considered to be looked upon.

Your URL probably follows this template:

https://vfr-v3-production.sizebay.technology/V4/?mode=vfr&id=PRODUCT_ID&sid=YOUR_SID&lang=YOUR_LANG&tenantId=YOUR_TENANT_ID

Adding the profile is a simple append, using the key configProfile. In JavaScript, that's how we'd do:

if (hasHalloweenMode) {
    customModalFromCustomer.src += '&configProfile=halloween_mode'
}

This would turn your URL into:

https://vfr-v3-production.sizebay.technology/V4/?mode=vfr&id=PRODUCT_ID&sid=YOUR_SID&lang=YOUR_LANG&tenantId=YOUR_TENANT_ID&configProfile=halloween_mode

Great job! Everything should be looking Halloween-ish by now.

Palette-d simplified example for Halloween