SizeMe React

Development

A React-app, build and packaged with yarn and webpack (or npm, that should work also):

1. yarn install
2. yarn start to build dev version once
3. yarn watch to serve dev version on http://localhost:8080 and build automatically on file change
4. yarn build to build prod version

File index.html is a test file, containing a static copy of a product page at https://www.sizemedemo.com/magento19/t-shirt-db.html.

SizeMe Options

Application expects to find an object named sizeme_options (TODO: rename to SizemeOptions?) with following properties:

{
  serviceStatus: "on",
  pluginVersion: "MAG1-0.1.0",
  contextAddress: "https://test.sizeme.com"
  shopType: "magento",
  debugState: false,
  uiOptions: {},
  additionalTranslations: {}
}

• [serviceStatus] (String): is SizeMe enabled? Default: "on"; other values: "off", "ab".

• [pluginVersion] (String): version of the webstore plugin. Optional.

• [contextAddress] (String): URL to the SizeMe backend service.

• [shopType] (String): webstore provider (magento|printmotor|pupeshop|woocommerce|shopify)

• [debugState] (Boolean): write debugging info to console. Default: false

• [uiOptions] (Object): Optionally override default UI options. Defaults per shopType are specified in uiOptions.js

  • [lang] (String): language to use (fi, sv, en, en is fallback).
  • [appendContentTo] (String): DOM element where SizeMe is injected.
  • [invokeElement] (String): DOM element that handles size changes
  • [disableSizeGuide] (Boolean): disable size guide
  • [outsideSizeGuide] (Boolean): write size guide outside (somewhat) sizeme-content. Can be used together with toggler for a sticky size guide option.
  • [sizeSelectorType] (String): type of the size selector used in the shop. Possible values at the moment: "default" (default, doh) and "swatches"
  • [addToCartElement] (String): DOM element to listen to for add-to-cart events
  • [addToCartEvent] (String): DOM event for add-to-cart
  • [maxRecommendationDistance] (Integer): maximum difference between optimal fit and total fit for SizeMe to consider the size for pre-selection. Default not set, meaning all sizes that are not too small are considered.
  • [skinClasses] (String): contents will be appended to the class attribute of SizeMe container element. Empty by default.
  • [toggler] (Boolean): enable/disable functionality that can be used to toggle the visibility of SizeMe content
  • [firstRecommendation] (Boolean): do and show a size recommendation when possible. Default: true
  • [flatMeasurements] (Boolean): show product circumference measurements (chest, waist etc) as measured on a flat surface in the size guide. Default: true
  • [measurementUnit] (String): default measurement unit. Possible values: "cm" for metric, "in" for imperials. Default: "cm"
  • [measurementUnitChoiceDisallowed] (Boolean): disallow user from switching measurement unit. Default: false
  • [matchGenderFromNameMale] (String): a reg exp string to match that product is for men. Otherwise measuring videos etc. default to women. Default: ""

• [additionalTranslations] (Object): Optionally override translations defined under 'i18n'. Example of how to override the Swedish translation for chest:

{
  sv: {
    humanMeasurements: {
      chest: "Bröst";
    }
  }
}

Similarly override any other key in any other language.