@wewear/virtual-try-on 1.4.27 → 1.4.29

package/dist/index.d.ts

@@ -3,10 +3,12 @@ export interface VirtualTryOnConfig {
     baseUrl: string;
     productPageSelector: string[];
     gallerySelector: string;
+    galleryElement?: HTMLElement;
     productImageSelector: string;
     buttonPosition: ButtonPosition;
     modelTier: string;
     outfitID: string;
+    singleton?: boolean;
 }
 export interface VirtualTryOnResult {
     imageUrl: string | null;
@@ -15,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,
@@ -404,8 +400,18 @@ class VirtualTryOnWidget {
             buttonPosition: config.buttonPosition,
             modelTier: config.modelTier,
             outfitID: config.outfitID,
+            singleton: config.singleton,
+            galleryElement: config.galleryElement,
         };
     }
+    getContainer() {
+        const configContainer = this.config.galleryElement;
+        if (configContainer === null || configContainer === void 0 ? void 0 : 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;
@@ -414,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;
             }
@@ -462,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 ||
@@ -478,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 = `
@@ -572,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);
@@ -583,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;
             }
@@ -600,7 +623,7 @@ class VirtualTryOnWidget {
                     }
                     break;
                 case "CLOSE_MODAL":
-                    removeElements(`.${CSS_CLASSES.MODAL}`);
+                    this.closeModal();
                     break;
             }
         };
@@ -625,8 +648,8 @@ 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");
         }
         try {
@@ -671,17 +694,62 @@ class VirtualTryOnWidget {
                 removeStatusBadge(container);
                 this.showButtonContainer(container);
             }
-            removeElements(`.${CSS_CLASSES.MODAL}`);
+            this.closeModal();
+        }
+    }
+    async fetchVtoData(outfitId, userBrand) {
+        try {
+            const vtoDataUrl = new URL("/api/vto/data", this.config.baseUrl);
+            vtoDataUrl.searchParams.set("outfit_id", outfitId);
+            vtoDataUrl.searchParams.set("user_brand", userBrand);
+            const response = await fetch(vtoDataUrl.toString());
+            if (response.status === 404)
+                return null;
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.warn(`[WeWear VTO] Failed to retrieve VTO data (${response.status}): ${errorText}`);
+                return null;
+            }
+            return (await response.json());
+        }
+        catch (error) {
+            console.warn("[WeWear VTO] Error retrieving VTO data:", error);
+            return null;
         }
     }
     async callVtoApi(modelImage, productImages) {
         var _a;
+        const outfitID = (_a = this.config.outfitID) === null || _a === void 0 ? void 0 : _a.trim();
+        let resolvedProductImages = productImages;
+        let resolvedGeminiModel = null;
+        let resolvedAdditionalPrompt = null;
+        if (outfitID) {
+            const userBrand = window.location.href.split("#")[0];
+            const vtoData = await this.fetchVtoData(outfitID, userBrand);
+            if (vtoData) {
+                if (Array.isArray(vtoData.images) && vtoData.images.length > 0) {
+                    resolvedProductImages = vtoData.images;
+                }
+                if (typeof vtoData.gemini_model === "string" && vtoData.gemini_model) {
+                    resolvedGeminiModel = vtoData.gemini_model;
+                }
+                if (typeof vtoData.additional_prompt === "string" &&
+                    vtoData.additional_prompt) {
+                    resolvedAdditionalPrompt = vtoData.additional_prompt;
+                }
+                console.log(`[WeWear VTO] Using stored VTO data for outfit_id=${outfitID}, user_brand=${userBrand}`);
+            }
+        }
         const formData = new FormData();
         formData.append("model_image", modelImage, "model_image.png");
-        formData.append("product_image_urls", JSON.stringify(productImages));
+        formData.append("product_image_urls", JSON.stringify(resolvedProductImages));
         formData.append("page_url", window.location.href);
         formData.append("model_tier", this.config.modelTier);
-        const outfitID = (_a = this.config.outfitID) === null || _a === void 0 ? void 0 : _a.trim();
+        if (resolvedGeminiModel)
+            formData.append("gemini_model", resolvedGeminiModel);
+        if (resolvedAdditionalPrompt) {
+            formData.append("additional_prompt", resolvedAdditionalPrompt);
+        }
         if (outfitID)
             formData.append("outfit_id", outfitID);
         const res = await fetch(`${this.config.baseUrl}/api/vto`, {
@@ -717,8 +785,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;
             }
@@ -843,8 +911,14 @@ 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);
@@ -862,42 +936,63 @@ 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) {
         console.error("[WeWear VTO] Initialization error:", error);
     }
 }
 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