@wewear/virtual-try-on 1.4.26 → 1.4.28

package/dist/index.d.ts

@@ -3,11 +3,12 @@ export interface VirtualTryOnConfig {
     baseUrl: string;
     productPageSelector: string[];
     gallerySelector: string;
+    galleryElement?: HTMLElement;
     productImageSelector: string;
     buttonPosition: ButtonPosition;
     modelTier: string;
-    greenSuit: string;
     outfitID: string;
+    singleton?: boolean;
 }
 export interface VirtualTryOnResult {
     imageUrl: string | null;
@@ -16,5 +17,5 @@ export interface VirtualTryOnResult {
         type: "error" | "warning";
     };
 }
-export { getWidgetInstance, initVirtualTryOn, } from "./installer.js";
+export { getWidgetInstance, getWidgetInstances, initVirtualTryOn, } from "./installer.js";
 export { VirtualTryOnWidget } from "./widget.js";

package/dist/index.esm.js

@@ -20,12 +20,6 @@ function getPositionStyles(position) {
             return "right: 20px; bottom: 20px;";
     }
 }
-function removeElements(selector) {
-    const elements = document.querySelectorAll(selector);
-    elements.forEach((element) => {
-        element.remove();
-    });
-}
 
 function createButtonContainer(buttonPosition, hasVirtualTryOn = false, onCameraClick, onRefreshClick, onToggleClick, isShowingVirtualTryOn = false) {
     const container = document.createElement("div");
@@ -395,7 +389,9 @@ class VirtualTryOnWidget {
         this.isShowingVirtualTryOn = false;
         this.lastModelImage = null;
         this.cameraButton = null;
+        this.modalElement = null;
         this.iframeMessageListener = null;
+        this.instanceId = ++VirtualTryOnWidget.instanceCounter;
         this.config = {
             baseUrl: config.baseUrl,
             productPageSelector: config.productPageSelector,
@@ -403,10 +399,19 @@ class VirtualTryOnWidget {
             productImageSelector: config.productImageSelector,
             buttonPosition: config.buttonPosition,
             modelTier: config.modelTier,
-            greenSuit: config.greenSuit,
             outfitID: config.outfitID,
+            singleton: config.singleton,
+            galleryElement: config.galleryElement,
         };
     }
+    getContainer() {
+        const configContainer = this.config.galleryElement;
+        if (configContainer && configContainer.isConnected) {
+            return configContainer;
+        }
+        const queriedContainer = document.querySelector(this.config.gallerySelector);
+        return queriedContainer instanceof HTMLElement ? queriedContainer : null;
+    }
     async init() {
         try {
             const selectors = this.config.productPageSelector;
@@ -415,8 +420,8 @@ class VirtualTryOnWidget {
             if (!matches) {
                 return;
             }
-            const container = document.querySelector(this.config.gallerySelector);
-            if (!container || !(container instanceof HTMLElement)) {
+            const container = this.getContainer();
+            if (!container) {
                 console.warn("[WeWear VTO] Gallery container not found:", this.config.gallerySelector);
                 return;
             }
@@ -463,7 +468,10 @@ class VirtualTryOnWidget {
         }
     }
     getAllProductImages() {
-        const productImageElements = document.querySelectorAll(this.config.productImageSelector);
+        const container = this.getContainer();
+        const scopedElements = container === null || container === void 0 ? void 0 : container.querySelectorAll(this.config.productImageSelector);
+        const fallbackElements = document.querySelectorAll(this.config.productImageSelector);
+        const productImageElements = ((scopedElements === null || scopedElements === void 0 ? void 0 : scopedElements.length) ? scopedElements : fallbackElements);
         const images = [];
         productImageElements.forEach((img) => {
             const imageUrl = img.src ||
@@ -479,7 +487,8 @@ class VirtualTryOnWidget {
         return images;
     }
     showPhotoUploadModal(url) {
-        removeElements(`.${CSS_CLASSES.MODAL}`);
+        this.closeModal();
+        VirtualTryOnWidget.activeWidgetId = this.instanceId;
         const modal = document.createElement("div");
         modal.className = CSS_CLASSES.MODAL;
         modal.style.cssText = `
@@ -573,7 +582,7 @@ class VirtualTryOnWidget {
             modal.style.opacity = "0";
             iframeContainer.style.transform = "scale(0.95)";
             iframeContainer.style.opacity = "0";
-            setTimeout(() => modal.remove(), 300);
+            setTimeout(() => this.closeModal(), 300);
         };
         iframeContainer.appendChild(iframe);
         iframeContainer.appendChild(closeButton);
@@ -584,12 +593,25 @@ class VirtualTryOnWidget {
                 closeButton.click();
             }
         };
+        this.modalElement = modal;
+    }
+    closeModal() {
+        if (this.modalElement) {
+            this.modalElement.remove();
+            this.modalElement = null;
+        }
+        if (VirtualTryOnWidget.activeWidgetId === this.instanceId) {
+            VirtualTryOnWidget.activeWidgetId = null;
+        }
     }
     setupIframeListener() {
         if (this.iframeMessageListener) {
             window.removeEventListener("message", this.iframeMessageListener);
         }
         this.iframeMessageListener = (event) => {
+            if (VirtualTryOnWidget.activeWidgetId !== this.instanceId) {
+                return;
+            }
             if (event.origin !== new URL(this.config.baseUrl).origin) {
                 return;
             }
@@ -601,7 +623,7 @@ class VirtualTryOnWidget {
                     }
                     break;
                 case "CLOSE_MODAL":
-                    removeElements(`.${CSS_CLASSES.MODAL}`);
+                    this.closeModal();
                     break;
             }
         };
@@ -626,58 +648,18 @@ class VirtualTryOnWidget {
         if (modal && modal instanceof HTMLElement) {
             modal.style.display = "none";
         }
-        const container = document.querySelector(this.config.gallerySelector);
-        if (container instanceof HTMLElement) {
+        const container = this.getContainer();
+        if (container) {
             showProductLoading(container, "Preparing your personalized look");
         }
-        let hasPreview = false;
         try {
             const submitResponse = await this.callVtoApi(this.lastModelImage, this.originalProductImages);
             let status = await this.fetchJobStatus(submitResponse.job_id);
-            let lastPreviewCount = 0;
             while (status.status !== "COMPLETED" && status.status !== "FAILED") {
-                if (!hasPreview && container instanceof HTMLElement) {
-                    let statusMessage = "Preparing your personalized look";
-                    if (status.current_iteration === 1) {
-                        statusMessage = "Refining your look";
-                    }
-                    else if (status.current_iteration && status.current_iteration > 1) {
-                        statusMessage = "Finalizing your look";
-                    }
+                if (container instanceof HTMLElement) {
+                    const statusMessage = "Preparing your personalized look";
                     showProductLoading(container, statusMessage);
                 }
-                else if (hasPreview && container instanceof HTMLElement) {
-                    let statusMessage = "Refining your look";
-                    if (status.current_iteration && status.current_iteration > 1) {
-                        statusMessage = "Finalizing your look";
-                    }
-                    showStatusBadge(container, statusMessage);
-                    this.hideButtonContainer(container);
-                }
-                if (status.preview_count > lastPreviewCount) {
-                    try {
-                        const previewUrl = await this.fetchJobImage(submitResponse.job_id);
-                        if (!hasPreview && container instanceof HTMLElement) {
-                            this.replaceProductImage(previewUrl);
-                            let statusMessage = "Refining your look";
-                            if (status.current_iteration && status.current_iteration > 1) {
-                                statusMessage = "Finalizing your look";
-                            }
-                            showStatusBadge(container, statusMessage);
-                            this.hideButtonContainer(container);
-                            removeProductLoading(container);
-                            hasPreview = true;
-                        }
-                        else if (hasPreview) {
-                            this.replaceProductImage(previewUrl);
-                        }
-                        lastPreviewCount = status.preview_count;
-                    }
-                    catch (e) {
-                        if (!(e instanceof Error && e.message === "202_PROCESSING"))
-                            throw e;
-                    }
-                }
                 await new Promise((r) => setTimeout(r, 3000));
                 status = await this.fetchJobStatus(submitResponse.job_id);
             }
@@ -694,12 +676,7 @@ class VirtualTryOnWidget {
             if (status.status === "FAILED") {
                 console.error("[WeWear VTO] VTO process failed:", status.message);
                 if (container instanceof HTMLElement) {
-                    if (!hasPreview) {
-                        showProductLoading(container, "We are experiencing some technical issues and apologise for any inconvenience caused. Please come back later again");
-                    }
-                    else {
-                        showStatusBadge(container, "We are experiencing some technical issues and apologise for any inconvenience caused. Please come back later again");
-                    }
+                    showStatusBadge(container, "We are experiencing some technical issues and apologise for any inconvenience caused. Please come back later again");
                 }
                 await new Promise((r) => setTimeout(r, 5000));
             }
@@ -707,12 +684,7 @@ class VirtualTryOnWidget {
         catch (error) {
             console.error("[WeWear VTO] Error during virtual try-on process:", error);
             if (container instanceof HTMLElement) {
-                if (!hasPreview) {
-                    showProductLoading(container, "We are experiencing technical issues and apologise for any inconvenience caused. Please come back later again");
-                }
-                else {
-                    showStatusBadge(container, "We are experiencing technical issues. Please try again later.");
-                }
+                showProductLoading(container, "We are experiencing technical issues and apologise for any inconvenience caused. Please come back later again");
             }
             await new Promise((r) => setTimeout(r, 5000));
         }
@@ -722,7 +694,7 @@ class VirtualTryOnWidget {
                 removeStatusBadge(container);
                 this.showButtonContainer(container);
             }
-            removeElements(`.${CSS_CLASSES.MODAL}`);
+            this.closeModal();
         }
     }
     async callVtoApi(modelImage, productImages) {
@@ -732,7 +704,6 @@ class VirtualTryOnWidget {
         formData.append("product_image_urls", JSON.stringify(productImages));
         formData.append("page_url", window.location.href);
         formData.append("model_tier", this.config.modelTier);
-        formData.append("green_suit", this.config.greenSuit);
         const outfitID = (_a = this.config.outfitID) === null || _a === void 0 ? void 0 : _a.trim();
         if (outfitID)
             formData.append("outfit_id", outfitID);
@@ -769,8 +740,8 @@ class VirtualTryOnWidget {
     replaceProductImage(imageUrl) {
         try {
             this.virtualTryOnImageUrl = imageUrl;
-            const container = document.querySelector(this.config.gallerySelector);
-            if (!container || !(container instanceof HTMLElement)) {
+            const container = this.getContainer();
+            if (!container) {
                 console.warn("[WeWear VTO] Gallery container not found for image replacement:", this.config.gallerySelector);
                 return;
             }
@@ -807,12 +778,6 @@ class VirtualTryOnWidget {
             console.error("[WeWear VTO] Error replacing product image:", error);
         }
     }
-    hideButtonContainer(container) {
-        const buttonContainer = container.querySelector(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
-        if (buttonContainer) {
-            buttonContainer.style.display = "none";
-        }
-    }
     showButtonContainer(container) {
         const buttonContainer = container.querySelector(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
         if (buttonContainer) {
@@ -901,8 +866,12 @@ class VirtualTryOnWidget {
     }
     destroy() {
         try {
-            removeElements(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
-            removeElements(`.${CSS_CLASSES.MODAL}`);
+            const container = this.getContainer();
+            if (container) {
+                const existingButtons = container.querySelectorAll(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
+                existingButtons.forEach((btn) => btn.remove());
+            }
+            this.closeModal();
             this.cameraButton = null;
             if (this.iframeMessageListener) {
                 window.removeEventListener("message", this.iframeMessageListener);
@@ -920,30 +889,45 @@ class VirtualTryOnWidget {
         }
     }
 }
+VirtualTryOnWidget.instanceCounter = 0;
+VirtualTryOnWidget.activeWidgetId = null;
 
-let widgetInstance = null;
+let widgetInstances = [];
 function initVirtualTryOn(config) {
     try {
-        if (widgetInstance) {
-            widgetInstance.destroy();
-            widgetInstance = null;
-        }
+        widgetInstances.forEach((instance) => instance.destroy());
+        widgetInstances = [];
         if (!config) {
             console.log("[WeWear VTO] Missing configuration. Widget not initialized.");
             return;
         }
-        widgetInstance = new VirtualTryOnWidget(config);
-        if (document.readyState === "loading") {
-            document.addEventListener("DOMContentLoaded", () => {
-                widgetInstance === null || widgetInstance === void 0 ? void 0 : widgetInstance.init().catch((error) => {
-                    console.error("[WeWear VTO] Failed to initialize after DOM ready:", error);
-                });
+        const allContainers = Array.from(document.querySelectorAll(config.gallerySelector)).filter((container) => container instanceof HTMLElement);
+        const shouldUseSingleton = config.singleton !== false;
+        if (allContainers.length > 1 && !shouldUseSingleton) {
+            widgetInstances = allContainers.map((galleryElement) => {
+                return new VirtualTryOnWidget(Object.assign(Object.assign({}, config), { galleryElement }));
             });
         }
         else {
-            widgetInstance.init().catch((error) => {
-                console.error("[WeWear VTO] Failed to initialize:", error);
+            const firstContainer = allContainers[0];
+            widgetInstances = [
+                new VirtualTryOnWidget(Object.assign(Object.assign({}, config), { galleryElement: firstContainer })),
+            ];
+        }
+        const initializeWidgets = () => {
+            widgetInstances.forEach((widget) => {
+                widget.init().catch((error) => {
+                    console.error("[WeWear VTO] Failed to initialize:", error);
+                });
             });
+        };
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", initializeWidgets, {
+                once: true,
+            });
+        }
+        else {
+            initializeWidgets();
         }
     }
     catch (error) {
@@ -951,11 +935,15 @@ function initVirtualTryOn(config) {
     }
 }
 function getWidgetInstance() {
-    return widgetInstance;
+    var _a;
+    return (_a = widgetInstances[0]) !== null && _a !== void 0 ? _a : null;
+}
+function getWidgetInstances() {
+    return [...widgetInstances];
 }
 if (typeof window !== "undefined") {
     initVirtualTryOn();
 }
 
-export { VirtualTryOnWidget, getWidgetInstance, initVirtualTryOn };
+export { VirtualTryOnWidget, getWidgetInstance, getWidgetInstances, initVirtualTryOn };
 //# sourceMappingURL=index.esm.js.map