@komposit/smartsize

Komposit SmartSize component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@komposit/smartsize
1.11.122 days ago3 years agoMinified + gzip package size for @komposit/smartsize in KB

Readme

Smartsize
npm
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
  • 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)

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)
  }
});

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 
        label: "30 years old ", // concatenation of value and unit
        summary: {label: "Age"} // parameter label to display (for summary screen)
    },
    // 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 
        label: "average shape", // translated label for the guide locale (value displayed on the guide)
        summary: {label: "Shape"} // parameter label for the guide locale (for summary screen)
    }
  } 
});

// 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();

Analytic

SmartSize component use Google analytic tag on every buttons:
  • gotostepXscreenY: describe a navigation on step X / screen Y
  • gotolinkstepXscreenY: describe a navigation on link screen (step X / screen Y)
  • gotoparameterstable: describe a navigation to parameters table screen (second optional screen of result step)
  • getmysize: describe a click on 'get size' button
  • selectmysize: describe a click on 'select size' button