Skip to main content

Faslet React NPM Module

For Javascript/Typescript development, we provide a React Component 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/react-widget

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

Example usage with shop id Faslet Demo

import { FasletWidget } from '@faslet/react-widget';

function ExampleProductPage() {

    // Get the product variants and colors
    const colors = [{ id: COLOR_1_ID, name: COLOR_1_NAME},{ id: COLOR_2_ID, name: COLOR_2_NAME}];
    const variants = [
        {variantId: VARIANT_1_ID, sizeLabel: VARIANT_1_SIZE_LABEL, inStock: VARIANT_1_IN_STOCK, sku: VARIANT_1_SKU, colorId: VARIANT_1_COLOR_ID, price: VARIANT_PRICE, imageUrl: VARIANT_IMAGE },
        {variantId: VARIANT_2_ID, sizeLabel: VARIANT_2_SIZE_LABEL, inStock: VARIANT_2_IN_STOCK, sku: VARIANT_2_SKU, colorId: VARIANT_2_COLOR_ID, price: VARIANT_PRICE, imageUrl: VARIANT_IMAGE },
    ];

    // Render the widget
    return  (
        <>
            <FasletWidget
                productId=PRODUCT_IDENTIFIER
                shopId=SHOP_ID
                brandId=BRAND_IDENTIFIER
                productImageUrl=PRODUCT_IMAGE_URL
                productName=PRODUCT_NAME
                colors={colors}
                variants={variants}
                onAddToCart={myAddToCartFunction}
                onResult={myResultFunction}
            />
        </>
    );
}


Order Tracking (After checkout/Thank You page)​

Example usage with shop id Faslet Demo

import { useFasletOrderTracking } from "@faslet/react-widget";

export function ExampleThankYouPage() {
  const productsInOrder = [
    {
      productId: PRODUCT_ID,
      variantId: VARIANT_ID,
      productName: PRODUCT_NAME,
      variantName: VARIANT_NAME,
      priceTimesQuantity: PRODUCT_PRICE_TIMES_QUANTITY,
      quantity: QUANTITY,
      sku: VARIANT_SKU
    },
  ];

  useFasletOrderTracking(SHOP_ID, ORDER_NUMBER, ORDER_STATUS, productsInOrder);

  return <p>Thank you for your order!</p>;
}

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