Skip to main content

Faslet React Widget

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 the Widget 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

Widget (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