Skip to content

Latest commit

 

History

History
72 lines (56 loc) · 3.66 KB

README.md

File metadata and controls

72 lines (56 loc) · 3.66 KB

SizeMe React CircleCI

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.