@wewear/virtual-try-on 1.4.26 → 1.4.28

package/dist/index.js

@@ -26,12 +26,6 @@
                 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");
@@ -401,7 +395,9 @@
             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,
@@ -409,10 +405,19 @@
                 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;
@@ -421,8 +426,8 @@
                 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;
                 }
@@ -469,7 +474,10 @@
             }
         }
         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 ||
@@ -485,7 +493,8 @@
             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 = `
@@ -579,7 +588,7 @@
                 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);
@@ -590,12 +599,25 @@
                     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;
                 }
@@ -607,7 +629,7 @@
                         }
                         break;
                     case "CLOSE_MODAL":
-                        removeElements(`.${CSS_CLASSES.MODAL}`);
+                        this.closeModal();
                         break;
                 }
             };
@@ -632,58 +654,18 @@
             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);
                 }
@@ -700,12 +682,7 @@
                 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));
                 }
@@ -713,12 +690,7 @@
             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));
             }
@@ -728,7 +700,7 @@
                     removeStatusBadge(container);
                     this.showButtonContainer(container);
                 }
-                removeElements(`.${CSS_CLASSES.MODAL}`);
+                this.closeModal();
             }
         }
         async callVtoApi(modelImage, productImages) {
@@ -738,7 +710,6 @@
             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);
@@ -775,8 +746,8 @@
         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;
                 }
@@ -813,12 +784,6 @@
                 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) {
@@ -907,8 +872,12 @@
         }
         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);
@@ -926,30 +895,45 @@
             }
         }
     }
+    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) {
@@ -957,7 +941,11 @@
         }
     }
     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();
@@ -965,6 +953,7 @@
 
     exports.VirtualTryOnWidget = VirtualTryOnWidget;
     exports.getWidgetInstance = getWidgetInstance;
+    exports.getWidgetInstances = getWidgetInstances;
     exports.initVirtualTryOn = initVirtualTryOn;
 
 }));