Add new fields from widget

Author: dgoemans

README.md

@@ -17,12 +17,12 @@ 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' },
-        {variantId: 'variant-2', sizeLabel: 'S', inStock: true, sku: 'sku-2', colorId: 'blue' },
-        {variantId: 'variant-3', sizeLabel: 'M', inStock: true, sku: 'sku-3', colorId: 'red' },
-        {variantId: 'variant-4', sizeLabel: 'M', inStock: false, sku: 'sku-4', colorId: 'blue' },
-        {variantId: 'variant-5', sizeLabel: 'L', inStock: false, sku: 'sku-5', colorId: 'red' },
-        {variantId: 'variant-6', sizeLabel: 'L', inStock: false, sku: 'sku-6', colorId: 'blue' }
+        {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
@@ -38,6 +38,7 @@ function ExampleProductPage() {
                 colors={colors}
                 variants={variants}
                 onAddToCart={addToCart}
+                onResult={handleResult}
             />
         </>
     );

examples/src/ProductPage.jsx

@@ -6,14 +6,18 @@ export function ProductPage() {
         window.alert(`Add ${id} to cart`);
     };
 
+    const onResult = ({ label }, resultType) => {
+        console.log(`Got Result ${label} from resultType ${resultType}`);
+    }
+
     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' },
-        {variantId: 'variant-2', sizeLabel: 'S', inStock: true, sku: 'sku-2', colorId: 'blue' },
-        {variantId: 'variant-3', sizeLabel: 'M', inStock: true, sku: 'sku-3', colorId: 'red' },
-        {variantId: 'variant-4', sizeLabel: 'M', inStock: false, sku: 'sku-4', colorId: 'blue' },
-        {variantId: 'variant-5', sizeLabel: 'L', inStock: false, sku: 'sku-5', colorId: 'red' },
-        {variantId: 'variant-6', sizeLabel: 'L', inStock: false, sku: 'sku-6', colorId: 'blue' }
+        {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' }
     ];
 
     return <>
@@ -70,6 +74,7 @@ export function ProductPage() {
                             colors={colors}
                             variants={variants}
                             onAddToCart={addToCart}
+                            onResult={onResult}
                         />
                     </div>
                 </div>

src/faslet-widget.tsx

@@ -11,6 +11,8 @@ export interface Variant {
   inStock: boolean;
   sku: string;
   colorId: string;
+  price?: number;
+  imageUrl?: string;
 }
 
 export interface FasletWidgetProps {
@@ -25,6 +27,10 @@ export interface FasletWidgetProps {
   colors?: Color[];
   shopPageUrl?: string;
   onAddToCart?: (id: string) => Promise<unknown>;
+  onResult?: (
+    { label: string },
+    resultType: 'auto' | 'result-screen'
+  ) => unknown;
 }
 
 export function FasletWidget({
@@ -38,7 +44,8 @@ export function FasletWidget({
   variants,
   colors,
   onAddToCart,
-  shopPageUrl
+  shopPageUrl,
+  onResult
 }: FasletWidgetProps) {
   // Add script tag to head
   useEffect(() => {
@@ -70,11 +77,14 @@ export function FasletWidget({
       sku: variant.sku,
       id: variant.variantId,
       available: variant.inStock,
-      color: variant.colorId
+      color: variant.colorId,
+      price: variant.price,
+      imageUrl: variant.imageUrl
     })),
     colors,
     shopUrl: shopPageUrl,
-    addToCart: onAddToCart
+    addToCart: onAddToCart,
+    onResult
   };
 
   return (

src/global.d.ts

@@ -6,12 +6,21 @@ interface Window {
     addToCart?: (variantId: string) => Promise<unknown>;
     onButtonShow?: () => unknown;
     onButtonHidden?: () => unknown;
+    openWidget?: () => unknown;
+    onResult?: (
+      { label: string },
+      resultType: 'auto' | 'result-screen'
+    ) => unknown;
+    onColorSelected?: (colorId: string) => unknown;
+    selectColor?: (colorId: string) => unknown;
     variants: {
       size: string;
       color?: string;
       id: string;
       available: boolean;
       sku: string;
+      price?: number;
+      imageUrl?: string;
     }[];
     colors?: {
       id: string;