Skip to main content

Faslet NPM Module

For Javascript/Typescript development, we provide a NPM package, which has source code available in our public Github.

tip

In order to provide full insights, Faslet requests that you implement both size-me and try-on on the Product Page and Order Tracking on the Thank You page. To validate your installation, please see our Integration Checklist

Usage​

To install the Faslet NPM module:

npm install @faslet/widget

size-me and try-on (Product page)​

Example usage:

import { createWidget } from "@faslet/widget";

const widget = createWidget(SHOP_ID)
  .withBrand(BRAND_IDENTIFIER)
  .withProductId(PRODUCT_IDENTIFIER)
  .withProductImage(PRODUCT_IMAGE_URL)
  .withProductName(PRODUCT_NAME)
  .withAddToCart(myAddToCartFunction)
  .withOnResult(myResultCallback);

widget.addColor(COLOR_1_ID, COLOR_1_NAME).addColor(COLOR_2_ID, COLOR_2_NAME);

widget
  .addVariant(VARIANT_1_ID, VARIANT_1_SIZE_LABEL, VARIANT_1_IN_STOCK, VARIANT_1_SKU, VARIANT_1_COLOR_ID, VARIANT_PRICE, VARIANT_IMAGE)
  .addVariant(VARIANT_2_ID, VARIANT_2_SIZE_LABEL, VARIANT_2_IN_STOCK, VARIANT_2_SKU, VARIANT_2_COLOR_ID, VARIANT_PRICE, VARIANT_IMAGE);

// Adds the faslet-app.min.js to the page
widget.injectScriptTag();

// Adds the button to this css selector in your HTML
widget.addToDom("#faslet-container");

Order Tracking (After checkout/Thank You page)​

Example usage with shop id Faslet Demo

import { createOrderTracking } from "@faslet/widget";

// GET THE SHOP_ID FROM YOUR FASLET REPRESENTITIVE
const ot = createOrderTracking(SHOP_ID).withOrderNumber(ORDER_NUMBER).withPaymentStatus(ORDER_STATUS);

ot.addProduct(PRODUCT_ID, VARIANT_ID, PRODUCT_NAME, VARIANT_NAME, PRODUCT_PRICE_TIMES_QUANTITY, QUANTITY, VARIANT_SKU);

ot.buildOrderTracking();

Examples​

In the project's Github Repository, you can find an example implementation.

Help​

In case of any questions, please don’t hesitate to contact us on support@faslet.me