@komposit/smartsize

Smartsize

The friendly and clever sizeguide for Decathlon products !

Setup

At first, install the component in your project.

npm i @komposit/smartsize

Depending of your project setup or capabilities, you can import the component to different forms :

Svelte source

todo

Compiled vanilla ES6 module

todo

Webcomponent

todo

Usage

Before initializing the component, you will need to call the Smartsize API (or a facade on a http endpoint of your project). (todo: a little schema ?). You will send the modelCode (ex:8514799) and the language needed (ex: fr-FR).

In return you will get a JSON response containing the sizeguide content (steps, question, etc.).

You will then feed this data to the component, for its initialization.

After the user has completed the questions, the responses are sent to the Smartsize API (or your backend http endpoint), and the API will send the recommended size. A configurable callback will then be called, allowing you to do business code on your side (like preselecting a size on a product page for example).

Init component

Declare the component with its properties data:

• jsonFormDatas: the guide on json format (retrieved by the first API call)
• callBack: the function called when user click on 'get size' button
• trackCallback: the function called when a smartsize event is tracked (see Analytics below), used for non svelte host apps
• sizeResultBtn: object which represent the 'get size' button (detailed in 'Set options example after storage form datas' section)
• sizeResultError: the message containing the error if size could not be performed
• colorSize: the background color of the recommended size (displayed in a square)
• valueSize: the size to display
• conceptionSizesDetails: the table of each parameters to determine the good size (optional, sometimes not returned, depends of the guide)
• bodyApiResponse: object which represents the measures response from Decathlon member ({ status: xxx, data: [])

const smartsize = new Smartsize({
  target: document.getElementById('smartsize'), // HTML target element
  props: {
    jsonFormDatas: SmartSizeGuideDatas, // JSON coming from Smartsize API
    callBack: smartsizeGetsize, // callback function called when the Smartsize API has returned its recommended size.
    sizeResultBtn: null,
    sizeResultError: '', // init result error message
    colorSize: '', // init color (default : #ccc)
    valueSize: '-', // init display size value 
    conceptionSizesDetails: null, // init conception parameters value
    userMeasures: {}, // user morphology measures to pre-populate forms (not mandatory)
    trackCallback: () => {}, // Track callback for non svelte host apps (not mandatory)
    bodyApiResponse: null // Measures Response from Member API
  }
});

Call size in callback function

To compute the size, you have to call the size endpoint with parameters (user inputs). A callback function is passed on the component declaration (see 'Init component' section). This function has to return the recommended size, with color and conception parameters (optionnal) for update the component.

const smartsizeGetsize = (formDatas, cb) => {
  // here storage form datas 
  // set smartsize options (callback button, sizeResultError, colorSize, valueSize)

  // callback to smartsize
  cb();
};

Update component with data and display size

After retrieved data from size endpoint, you have to passed this information to component:

• sizeResultBtn: the 'get size' button and its properties:
  • activate: enable/disable the button
  • className: add class name to button
  • label: the button label
  • handleClick: the action to do when user click on 'select size' button

Other properties have been already described on previous section (see 'Init component')

// Callback button
const btn = {
  activate: '', // '' or  'disabled'
  className: 'ss_validBtn_store', // button class
  availlable: 'ss_validBtn_store', // availlable class
  label: 'Osmose_store_label', // button label
  handleClick: e => { // 'select size' button click
    e.preventDefault();
    // actions to do here
  }
};

// Set smartsize options
smartsize.$set({
  sizeResultBtn: btn, // state and callback button
  sizeResultError: '', // Result error message
  colorSize: '', // color hexa code
  valueSize: '', // display size value
  conceptionSizesDetails: null, // display conception parameters value,
  userMeasures: { // user morphology measures to pre-populate forms (not mandatory)
    // example on a numerical parameter 
    age: {
      value: "30", // value in string format
      unit: "years old", // unit value for the parameter 
    },
    // example on a categorical parameter 
    shape: { // user morphology measures to pre-populate forms (not mandatory)
      value: "AVERAGE_SHAPE", // value in string format
      unit: null, // always null 
    }
  } 
});

// Component also expose measure store in its context.
// This store contains measures of current step only.
// Be careful of what you do with this.
smartsize.$$.context.get("measures");

Destroy component

smartsize.$destroy();

Analytics

SmartSize component uses a Svelte native event (on:trackSmartsize) and a callback (for non svelte host apps) to track smartsize events :

• view_size_guide: describe the navigation when users lands on smartsize
• change_step: describe a navigation between steps
• view_size_table: describe a navigation to the size table tab
• get_recommendation: describe a click on 'get size' button
• select_size: describe a click on 'select size' button

For the on:trackSmartsize event, all of the tracking details are injected into the detail property