xactsize-webcomponents 1.0.32 → 1.0.34

package/README.md

@@ -13,65 +13,97 @@ npm install xactsize-webcomponent
 
 ```html
 <body-measurer
-        culture="pt-BR"
-        product-name="Shirt"
-        skus='[{"dimensions":{"Size":"M"},"measures":{"height":50,"length":70,"width":40}}]'
+  culture="pt-BR"
+  product-name="Shirt"
+  skus='[{"dimensions":{"Size":"M"},"measures":{"height":50,"length":70,"width":40}}]'
 ></body-measurer>
 <script>
-    import { BodyMeasurer } from 'xactsize-webcomponent';
-
-    // Select the body-measurer element
-    const bodyMeasurer = document.querySelector('body-measurer');
-
-    // Check if the element exists
-    if (bodyMeasurer) {
-        // Add event listener for measurementAccepted
-        bodyMeasurer.addEventListener('measurementAccepted', (e) => {
-            const size = e.detail.size;
-            alert(`Size selected: ${size}`);
-            console.log('Measurement accepted:', e.detail);
-        });
-
-        // Add event listener for measurementCanceled
-        bodyMeasurer.addEventListener('measurementCanceled', (e) => {
-            alert('Measurement canceled');
-            console.log('Measurement canceled');
-        });
-    } else {
-        console.error('body-measurer element not found');
-    }
+  import { BodyMeasurer } from "xactsize-webcomponent";
+
+  // Select the body-measurer element
+  const bodyMeasurer = document.querySelector("body-measurer");
+
+  // Check if the element exists
+  if (bodyMeasurer) {
+    // Add event listener for measurementAccepted
+    bodyMeasurer.addEventListener("measurementAccepted", (e) => {
+      const size = e.detail.size;
+      alert(`Size selected: ${size}`);
+      console.log("Measurement accepted:", e.detail);
+    });
+
+    // Add event listener for measurementCanceled
+    bodyMeasurer.addEventListener("measurementCanceled", (e) => {
+      alert("Measurement canceled");
+      console.log("Measurement canceled");
+    });
+  } else {
+    console.error("body-measurer element not found");
+  }
 </script>
 ```
+
 </details>
 
 <details>
 <summary>With CDN</summary>
 
 ```html
-<body-measurer culture="pt-BR" product-name="Calça Legging" skus='[{"dimensions":{"Size":"S"},"measures":{"height":39,"length":78,"width":78}},{"dimensions":{"Size":"M"},"measures":{"height":40,"length":82,"width":82}}]'></body-measurer>
-<script type="module" src="https://cdn.jsdelivr.net/npm/xactsize-webcomponents@1.0.6/dist/body-measurer.es.js"></script>
+<body-measurer
+  culture="pt-BR"
+  product-name="Calça Legging"
+  skus='[{"dimensions":{"Size":"S"},"measures":{"height":39,"length":78,"width":78}},{"dimensions":{"Size":"M"},"measures":{"height":40,"length":82,"width":82}}]'
+></body-measurer>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/xactsize-webcomponents@1.0.6/dist/body-measurer.es.js"
+></script>
 
 <script>
-    // Select the body-measurer element
-    const bodyMeasurer = document.querySelector('body-measurer');
-
-    // Check if the element exists
-    if (bodyMeasurer) {
-        // Add event listener for measurementAccepted
-        bodyMeasurer.addEventListener('measurementAccepted', (e) => {
-            const size = e.detail.size;
-            alert(`Size selected: ${size}`);
-            console.log('Measurement accepted:', e.detail);
-        });
-
-        // Add event listener for measurementCanceled
-        bodyMeasurer.addEventListener('measurementCanceled', (e) => {
-            alert('Measurement canceled');
-            console.log('Measurement canceled');
-        });
-    } else {
-        console.error('body-measurer element not found');
-    }
+  // Select the body-measurer element
+  const bodyMeasurer = document.querySelector("body-measurer");
+
+  // Check if the element exists
+  if (bodyMeasurer) {
+    // Add event listener for measurementAccepted
+    bodyMeasurer.addEventListener("measurementAccepted", (e) => {
+      const size = e.detail.size;
+      alert(`Size selected: ${size}`);
+      console.log("Measurement accepted:", e.detail);
+    });
+
+    // Add event listener for measurementCanceled
+    bodyMeasurer.addEventListener("measurementCanceled", (e) => {
+      alert("Measurement canceled");
+      console.log("Measurement canceled");
+    });
+  } else {
+    console.error("body-measurer element not found");
+  }
+</script>
 </script>
 ```
+
 </details>
+
+## Virtual Try-On (VTON)
+
+The component supports generating a Virtual Try-On image of the user wearing a specific garment. The generated image will be shown on the final results step alongside the size recommendation.
+
+To enable this feature, provide the following properties to the `<body-measurer>` element:
+
+- `vton` (boolean): Set this attribute to enable the Virtual Try-On flow.
+- `garment-url` (string): The URL of the garment image you want the user to try on.
+- `vton-url` (string, optional): The API endpoint for generating the VTON image. Defaults to `https://xactsize-dotnet-api-923169850574.southamerica-east1.run.app/api/VirtualTryOn/generate`.
+
+### Example
+
+```html
+<body-measurer
+  culture="pt-BR"
+  product-name="Shirt"
+  vton
+  garment-url="https://example.com/images/shirt.jpg"
+  skus='[{"dimensions":{"Size":"M"},"measures":{"height":50,"length":70,"width":40}}]'
+></body-measurer>
+```