@spotsize/js-sdk

v1.2.1

Published

2 years ago

The spotsize Javascript SDK enables the integration of the spotsize service into a browser based flow.

Downloads

232

0High
0Medium
0Low

bma

spotsize-dev

@spotsize/js-sdk

The spotsize Javascript SDK enables the integration of the spotsize service into a browser based flow.

Usage

UMD

Import via script tag

<script src="https://unpkg.com/@spotsize/js-sdk/dist/spotsize.min.js"></script>

Using HTML data attributes

You can use special HTML data attributes to integrate spotsize without the need of writing Javascript code.

Attributes

| Attribute | Description | |:------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------| | data-spotsize-organization-id | Your organizationId |
| data-spotsize-product-id | The productId of the shoe for which a size recommendation is to be generated. | | data-spotsize-product-name | (optional) The product name to be shown in the native app result screen. | | data-spotsize-use-mock-data | (optional) Directly receive mock data and bypass the actual scan flow. | | data-spotsize-button | HTML element that triggers the spotsize service. | | data-spotsize-qr-container | HTML element where the generated QR code shall be added to. Hidden by default. Use data-spotsize-qr-container="visible" to not hide it. | | data-spotsize-result-container | HTML element that shows the recommendation result. Hidden by default. Use data-spotsize-result-container="visible" to not hide it. | | data-spotsize-no-result-container | HTML element that is shown in case of no recommendation could be created. | | data-spotsize-error-container | (optional) HTML element that is shown in case of an error |

Placeholders

The following placeholder can be used to display the returned recommendation result.
The placeholders will be replaced with the according values, when the result element is shown.

| Placeholder | Description | |:------------------------|:-------------------------------------------------------------------------------------| | {length} | Length in millimeters |
| {width} | Width in millimeters |
| {size} | Default size, renders e.g. "42" |
| {size_label} | Default size label, renders e.g. "42 EU" |
| {size_[category]} | Size for the according catergory, e.g. {size_uk} {size_us} ... |
| {size_label_[category]} | Size label for the according catergory, e.g. {size_label_uk} {size_label_us} ... |

The data attributes could be added to any tag.

Setup organizationId, productId, the QR code container and the spotsize button, that starts the scan flow.


<div data-spotsize-organization-id="YOUR_ORGANIZATION_ID" data-spotsize-product-id="YOUR_PRODUCT_ID"></div>

<div data-spotsize-qr-container></div> <!-- Will be hidden by default -->

<div data-spotsize-button>Spot Your Size</div>

Define result elements

<!-- Will be hidden by default -->
<div data-spotsize-result-container>
    <div>Length: {length} Width: {width}</div>
    <div>Your recommended size is {size_label}</div>
</div>

<!-- Will be hidden by default -->
<div data-spotsize-no-result-container>
    Sorry, but we couldn't find a size.
</div>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>SDK Test</title>
  <script src="https://unpkg.com/@spotsize/js-sdk/dist/spotsize.min.js"></script>
</head>
<body>
<h1>spotsize JS-SDK</h1>

<div data-spotsize-organization-id="YOUR_ORGANIZATION_ID" data-spotsize-product-id="YOUR_PRODUCT_ID"></div>

<button data-spotsize-button>Spot Your Size</button>

<div data-spotsize-qr-container></div>

<div data-spotsize-result-container>
  <h3>Your recommended size</h3>
  <p>{length} {width}</p>
  <p>{size_label}</p>
</div>

<div data-spotsize-no-result-container>Sorry, but we couldn't find a size.</div>
<div data-spotsize-error-container>{error}</div>

</body>
</html>

Using the Javascript API

The JS SDK lets you control

Single product

To request a size for a single product, just pass your according productId:

spotsize.init('YOUR_ORGANIZATION_ID');

spotsize.events.onQRShown = function () {
    console.log('QR code shown');
}

spotsize.start('YOUR_PRODUCT_ID', qrCodeContainer)
    .then((result) => {
        if (result.status == 'SUCCESS') {
            //Get default size
            const sizeInfo = result.getSize();
            const value = sizeInfo.value; // e.g. "42"
            const category = sizeInfo.category; // e.g. "EU"
            const label = sizeInfo.label; // e.g. "EU 42"
        } else {
            //No matching size/product found                    
        }
    })
    .catch((error) => {
        //An error occured
        console.log('error', error);
    });

Multiple products

Pass a list of productIds to request sizes for multiple products in one call:

spotsize.init('YOUR_ORGANIZATION_ID');

spotsize.start(['YOUR_PRODUCT_ID1', 'YOUR_PRODUCT_ID2'], qrCodeContainer)
    .then((result) => {
        if (result.status == 'SUCCESS') {
            console.log(result.products);
            const product = result.getProduct('YOUR_PRODUCT_ID2');

            const sizeInfo = product.getSize();
            const value = sizeInfo.value; // e.g. "42"
            const category = sizeInfo.category; // e.g. "EU"
            const label = sizeInfo.label; // e.g. "EU 42"
        } else {
            //No matching sizes/products found                    
        }
    })
    .catch((error) => {
        //An error occured
        console.log('error', error);
    });

You can also pass the following options:

const options = {
    productName: 'The product name',
    payload: {},
    useMockData: true
}

spotsize.start('YOUR_PRODUCT_ID', qrCodeContainer, options)

productName (String) The product name to be shown in the native app result screen.

useMockData (Boolean) Set to 'true' to directly receive mock data and bypass the actual scan flow

payload (Object) Custom payload that is returned along with the recommendation.

ESM

To use with a bundler (only Javascript API)

Installation

npm i @spotsize/js-sdk -S

import {init, start, events} from '@spotsize/js-sdk';

init('YOUR_ORGANIZATION_ID');

events.onQRShown = () => {
    console.log('QR code shown');
}

try {
    const result = await start('YOUR_PRODUCT_ID', qrCodeContainer);
    if (result.status == 'SUCCESS') {
        //Get default size
        const sizeInfo = result.getSize();

        const value = sizeInfo.value; // e.g. "42"
        const category = sizeInfo.category; // e.g. "EU"
        const label = sizeInfo.label; // e.g. "EU 42"
    } else {
        //No matching size/product found                    
    }
} catch (error) {
    console.log('Error', error);
}

Result Object

The result object has the following properties and methods

spotsize.start('YOUR_PRODUCT_ID', qrCodeContainer)
    .then((result) => {
    })

status (String) The status of the recommendation request

SUCCESS: Matching Product/size found
NO_PRODUCT_FOUND: No matching product found

length (Number) Length of the scanned foot

width (Number) Width of the scanned foot

getSize(category) (Object) The default size info {value:, category:}

const sizeInfo = result.getSize();

returns default category, e.g.

{
    value: "42",
        category
:
    "EU",
        label
:
    "EU 42"
}

const sizeInfo = result.getSize('uk');

returns requested category if available, e.g.

{
    value: "41",
        category
:
    "UK"
}

(Only relevant if multiple products are queried):

getProduct(productId) (Object) Returns the according product

const product = result.getProduct('YOUR_PRODUCT_ID');
const sizeInfo = product.getSize();

products (Array) A list of all matched products

Events

The following events are supported:

event.onQRShown

event.onQRRemoved

event.onStart

event.onStop

event.onError

event.onComplete

import {events} from '@spotsize/js-sdk';

events.onError = (error) => {
    console.log('Error', error);
}

Examples

https://github.com/spotsize/spotsize-js-sdk-examples

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@spotsize/js-sdk

Usage

UMD

Using HTML data attributes

Attributes

Placeholders

Using the Javascript API

Single product

Multiple products

ESM

Installation

Result Object

Events

Examples