Faslet 重现部件

使用量

要在您的应用程序中使用此组件, 请将此组件拖出

npm install @faslet/react-widget

部件( 生产页)

商店标识的示例用法 Faslet Demo

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

function ExampleProductPage() {

    // Get the product variants and colors
    const colors = [{ id: 'red', name: 'Magnificent Red'},{ id: 'blue', name: 'Dashing Blue'}];
    const variants = [
        {variantId: 'variant-1', sizeLabel: 'S', inStock: true, sku: 'sku-1', colorId: 'red', price: 11.99, imageUrl: 'https://placekitten.com/300/500' },
        {variantId: 'variant-2', sizeLabel: 'S', inStock: true, sku: 'sku-2', colorId: 'blue', price: 11.99, imageUrl: 'https://placekitten.com/300/500' },
        {variantId: 'variant-3', sizeLabel: 'M', inStock: true, sku: 'sku-3', colorId: 'red', price: 11.99, imageUrl: 'https://placekitten.com/300/500' },
        {variantId: 'variant-4', sizeLabel: 'M', inStock: false, sku: 'sku-4', colorId: 'blue', price: 11.99, imageUrl: 'https://placekitten.com/300/500' },
        {variantId: 'variant-5', sizeLabel: 'L', inStock: false, sku: 'sku-5', colorId: 'red', price: 11.99, imageUrl: 'https://placekitten.com/300/500' },
        {variantId: 'variant-6', sizeLabel: 'L', inStock: false, sku: 'sku-6', colorId: 'blue', price: 11.99, imageUrl: 'https://placekitten.com/300/500' }
    ];
    
    // Render the widget
    return  (
        <>
            <FasletWidget
                productId="product-1"
                shopId="Faslet Demo"
                brandId="Faslet Demo Brand"
                productImageUrl="https://placekitten.com/100/150"
                productName="Jacket"
                colors={colors}
                variants={variants}
                onAddToCart={addToCart}
                onResult={handleResult}
            />
        </>
    );
}

命令跟踪( 退出后/ 感谢您的页面)

商店标识的示例用法 Faslet Demo

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

export function ExampleThankYouPage() {
    const productsInOrder = [
        {
            productId: 'product-1',
            variantId: 'variant-1',
            productName: 'Jacket',
            variantName: 'Red Jacket/S',
            priceTimesQuantity: 100,
            quantity: 1,
            sku: 'sku-1'
        }, {
            productId: 'product-1',
            variantId: 'variant-2',
            productName: 'Jacket',
            variantName: 'Blue Jacket/S',
            priceTimesQuantity: 200,
            quantity: 2,
            sku: 'sku-2'
        }
    ];

    useFasletOrderTracking('Faslet Demo', 'Order-1', 'paid', productsInOrder)

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

实例

实例用 Creat-React-App 构建 . 从示例文件夹中 :

npm install
npm start

然后在浏览器中导航到:

http://localhost:3:00/ (英语)

对部件示例和

http://localhost:3:00/thank-you (英语)

以秩序跟踪为例。 请注意, Order 跟踪只发送事件, 您可以在浏览器的 Dev- 工具的网络标签中看到 .

发展

这个项目使用npm. 开始开发前先安装 :

npm install