SAIA Perfect Fit Widget

Widget, that implements getting garment size for user based on SAIA Perfect Fit API.

How to run

1. Install all dependencies with the following command:

npm install

2. To run the project in development mode, type in a terminal the following command:

npm start

3. To build the widget for production use this command:

npm run build:prod

Build for Shopify (for internal usage only):

npm run build:shopify

Build configuration file

Configuration file should be named like this:

saia-config.<config type>.js

File should export an object, which contains the following:

module.exports = {
  // saia api host url
  API_HOST: '',
  // client api key
  API_KEY: '',
  // widget host url
  WIDGET_HOST: '',
  // path to widget assets for url configuration
  // this folder needs to contain widget-assets folder
  // should end with /
  WIDGET_ASSETS_URL: '/wp-content/widget/',
};

Deployment requirements

To properly host widget for your website, you need to host index.html file of subdomain, for example, https://widget.example.com, and then call it from your website. This is required for widget navigation to work.

Example of usage

Let's configure widget for your store, that is located on this domain https://test-store.com/. Clone this repository to your computer. After that go to the widget directory in the terminal and run the following command:

npm install

This command will install all the dependencies. Then create a configuration file for your shop with name like this:

saia-config.test-store.js

Enter required information to this file:

// saia-config.test-store.js
module.exports = {
  // saia api host url
  API_HOST: 'https://saia.3dlook.me',
  // client api key
  API_KEY: 'h2f98h13fh934hv91b3h51345b245yqeg255y',
  // widget host url
  WIDGET_HOST: 'https://test-store.com/wp-content/my-widget-build/index.html',
  // path to widget assets for url configuration
  // this folder needs to contain widget-assets folder
  // should end with /
  WIDGET_ASSETS_URL: '/wp-content/my-widget-build/',
};

After that, run in the terminal the following command:

export NODE_ENV=production && export CONFIG=test-store && webpack --progress

You will get dist folder, that has this structure:

dist/
--widget-assets/
....*image assets*
--index.html
--saia-pf-button.js
..ignore other files

Then you should upload the content of dist folder to your hosting in the folder, that you have already specified in the configuration file (WIDGET_ASSETS_URL). saia-pf-button.js should be included on the pages, on which you want to display a button and widget modal. This file could be included with this code:

<script src="/wp-content/my-widget-build/saia-pf-button.js"></script>

After this tag you can initialize the button. Example code:

(async () => {
  const button = new SaiaButton({
    // widget container element selector
    container: '.product-single__meta',
    // your SAIA API key
    key: 'fnqiwhf9v9y9ty13bt783yugyiurygb3v78gvt',
    // widget domain
    // if you set this url in the configuration file (saia-config.test-store.js), then you may not use this parameter
    widgetUrl: 'https://test-store.com/wp-content/my-widget-build/index.html',
    // brand name
    brand: 'Nike',
    // body part
    bodyPart: 'top',
    // product information
    product: {
      // product image url for results page
      imageUrl: 'https://imagehost.com/images/products/product.jpg',
      // product description for results page
      description: 'The Nike Air Rally Women\'s Crew',
    },
  });

  // init button
  button.init();

  // try to get size recomendation for user,
  // that already has passed the widget flow
  // and has its measurements in localStorage
  const recomendations = await button.getSize();

  // display size recomendations
  if (recomendations) {
    button.displaySize(recomendations);
  }
})();

After that you will get "Your perfect fit" button on the page.

SaiaButton

Kind: global class

SaiaButton
- new SaiaButton(options)
- .init()
- .checkGetParamsForMeasurements()
- .checkButtonVisibility()
- .showWidget()
- .getSize() ⇒ Object | null
- .displaySize(recomendations)

new SaiaButton(options)

SaiaButton constructor

Param	Type	Description
options	`Object`	parameters
options.container	`string`	selector for button container
options.key	`string`	SAIA PF API key
[options.widgetUrl]	`string`	url to the widget host to open it in the iframe
[options.buttonStyle]	`string`	button style. Could be 'gradient', 'gradient-reversed', 'black', 'white'
[options.product]	`Object`	object with product parameters (optional)
[options.product.description]	`string`	product description. Will be displayed on final results page
[options.product.imageUrl]	`string`	url to product image Will be displayed on final results page
[options.product.url]	`string`	url to product. For shopify usage only. Instead use brand and bodyPart options to determine right sizecharts
[options.brand]	`string`	brand name. If brand and bodyPart are set, then product.url is ignored
[options.bodyPart]	`string`	body part name. If brand and bodyPart are set, then product.url is ignored
[options.id]	`number` \| `string`	unique id of the button
[options.returnUrl]	`string`	product page url on which user will be redirected after he pressing close button at results screen after he complite the mobile flow