@primestyleai/tryon 2.1.0 → 2.2.0

package/dist/react/index.d.ts

@@ -45,5 +45,7 @@ export interface PrimeStyleTryonProps {
         name: string;
         values?: string[];
     }>;
+    /** Scan the page DOM for size guide tables/modals (like the Shopify widget does) */
+    scanPageForSizeGuide?: boolean;
 }
 export declare function PrimeStyleTryon(props: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/index.js

@@ -21,6 +21,150 @@ function lsSet(key, value) {
   } catch {
   }
 }
+function extractTableData(table) {
+  const headers = [];
+  const headerRow = table.querySelector("thead tr") || table.querySelector("tr");
+  if (!headerRow) return null;
+  for (const cell of headerRow.querySelectorAll("th, td")) {
+    const txt = (cell.textContent || "").trim();
+    if (txt) headers.push(txt);
+  }
+  if (headers.length < 2) return null;
+  const rows = [];
+  for (const tr of table.querySelectorAll("tbody tr, tr")) {
+    if (tr === headerRow) continue;
+    const cells = tr.querySelectorAll("td, th");
+    if (cells.length < 2) continue;
+    const row = [];
+    for (const c of cells) row.push((c.textContent || "").trim());
+    if (row.some((v) => v.length > 0)) rows.push(row);
+  }
+  return rows.length > 0 ? { headers, rows } : null;
+}
+const SIZE_KEYWORDS = /size|chest|bust|waist|hips|shoulder|sleeve|length|inseam|\b(XS|S|M|L|XL|XXL|2XL|3XL)\b/i;
+const SG_BUTTON_KEYWORDS = /size.?(guide|chart|table)|sizing|fit.?guide|measurement/i;
+function findSizeTables(container) {
+  const results = [];
+  for (const table of container.querySelectorAll("table")) {
+    if (SIZE_KEYWORDS.test(table.textContent || "")) {
+      const data = extractTableData(table);
+      if (data) results.push(data);
+    }
+  }
+  return results;
+}
+function detectUnit(container) {
+  for (const sel of [".active", ".selected", "[aria-selected=true]", "[class*=active]"]) {
+    try {
+      for (const tab of container.querySelectorAll(sel)) {
+        const t = (tab.textContent || "").trim().toLowerCase();
+        if (t.length > 20) continue;
+        if (/\bcm\b|centimeter/i.test(t)) return "cm";
+        if (/\binch|inches/i.test(t)) return "inches";
+      }
+    } catch {
+    }
+  }
+  for (const th of container.querySelectorAll("th")) {
+    const h = (th.textContent || "").toLowerCase();
+    if (/\(cm\)/.test(h)) return "cm";
+    if (/\(in|inch/.test(h)) return "inches";
+  }
+  return null;
+}
+function findSizeGuideButton() {
+  for (const el of document.querySelectorAll("button, a, [role=button], .size-guide, .size-chart, [data-action*=size], [class*=size-guide], [class*=size-chart], [class*=sizeguide], [class*=sizechart]")) {
+    const text = (el.textContent || "").trim();
+    const cls = el.className || "";
+    const ariaLabel = el.getAttribute("aria-label") || "";
+    if (SG_BUTTON_KEYWORDS.test(text) || SG_BUTTON_KEYWORDS.test(cls) || SG_BUTTON_KEYWORDS.test(ariaLabel)) {
+      return el;
+    }
+  }
+  return null;
+}
+function scanDomForSizeGuide() {
+  const containerSelectors = [
+    "[class*=kiwi]",
+    "[class*=esc-size]",
+    "[class*=size-matters]",
+    "[class*=avada-size]",
+    "[class*=size-guide]",
+    "[class*=sizeguide]",
+    "[class*=size-chart]",
+    "[class*=sizechart]",
+    "[class*=fit-guide]",
+    "[class*=fitguide]",
+    "[id*=size-guide]",
+    "[id*=sizeguide]",
+    "[id*=size-chart]",
+    "[id*=sizechart]"
+  ];
+  for (const sel of containerSelectors) {
+    try {
+      for (const el of document.querySelectorAll(sel)) {
+        const tables = findSizeTables(el);
+        if (tables.length > 0) {
+          return { found: true, ...tables[0], unit: detectUnit(el) };
+        }
+      }
+    } catch {
+    }
+  }
+  const pageTables = findSizeTables(document);
+  if (pageTables.length > 0) {
+    return { found: true, ...pageTables[0] };
+  }
+  const sizeBtn = findSizeGuideButton();
+  if (sizeBtn) {
+    try {
+      sizeBtn.click();
+    } catch {
+    }
+    return { found: false, buttonClicked: true };
+  }
+  return { found: false };
+}
+function scanAfterClick() {
+  const images = [];
+  const overlaySelectors = [
+    "[class*=modal]",
+    "[class*=drawer]",
+    "[class*=popup]",
+    "[class*=overlay]",
+    "[role=dialog]",
+    "[aria-modal=true]",
+    "[class*=kiwi]",
+    "[class*=size-guide]",
+    "[class*=sizeguide]",
+    "[class*=size-chart]",
+    "[class*=sizechart]"
+  ];
+  for (const sel of overlaySelectors) {
+    try {
+      for (const el of document.querySelectorAll(sel)) {
+        if (el.classList.contains("ps-tryon-overlay")) continue;
+        const style = window.getComputedStyle(el);
+        if (style.display === "none" || style.visibility === "hidden") continue;
+        const tables = findSizeTables(el);
+        if (tables.length > 0) {
+          for (const img of el.querySelectorAll("img")) {
+            let src = img.src || img.getAttribute("data-src") || "";
+            if (src.startsWith("//")) src = `https:${src}`;
+            const w = img.naturalWidth || img.width || 0;
+            const h = img.naturalHeight || img.height || 0;
+            if (src.startsWith("http") && (w === 0 || w > 100) && (h === 0 || h > 100)) images.push(src);
+          }
+          return { found: true, ...tables[0], unit: detectUnit(el), images };
+        }
+      }
+    } catch {
+    }
+  }
+  const pageTables = findSizeTables(document);
+  if (pageTables.length > 0) return { found: true, ...pageTables[0], images };
+  return { found: false, images };
+}
 const SIZING_COUNTRIES = [
   { code: "US", label: "United States" },
   { code: "UK", label: "United Kingdom" },
@@ -185,7 +329,8 @@ function PrimeStyleTryonInner({
   productType,
   productTags,
   productVariants,
-  productOptions
+  productOptions,
+  scanPageForSizeGuide = false
 }) {
   const [view, setView] = useState("idle");
   const [selectedFile, setSelectedFile] = useState(null);
@@ -294,27 +439,51 @@ function PrimeStyleTryonInner({
       setSizeGuide(sizeGuideProp);
       return;
     }
-    setSizeGuideFetching(true);
-    const baseUrl = getApiUrl(apiUrl);
-    const key = getApiKey();
-    const productPayload = {
-      title: productTitle,
-      variants: productVariants || []
-    };
-    if (productDescription) productPayload.description = productDescription;
-    if (productVendor) productPayload.vendor = productVendor;
-    if (productType) productPayload.productType = productType;
-    if (productTags?.length) productPayload.tags = productTags;
-    if (productOptions?.length) productPayload.options = productOptions;
-    fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
-      body: JSON.stringify({ product: productPayload })
-    }).then((r) => r.ok ? r.json() : null).then((data) => {
-      if (data) setSizeGuide(data);
-      else setSizeGuide({ found: false });
-    }).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
-  }, [view, apiUrl, productTitle, sizeGuideProp]);
+    if (scanPageForSizeGuide) {
+      setSizeGuideFetching(true);
+      const domResult = scanDomForSizeGuide();
+      if (domResult.found && domResult.headers && domResult.rows) {
+        setSizeGuide({ found: true, headers: domResult.headers, rows: domResult.rows });
+        setSizeGuideFetching(false);
+        return;
+      }
+      if (domResult.buttonClicked) {
+        setTimeout(() => {
+          const afterClick = scanAfterClick();
+          if (afterClick.found && afterClick.headers && afterClick.rows) {
+            setSizeGuide({ found: true, headers: afterClick.headers, rows: afterClick.rows });
+            setSizeGuideFetching(false);
+            return;
+          }
+          fetchSizeGuideFromApi();
+        }, 800);
+        return;
+      }
+    }
+    fetchSizeGuideFromApi();
+    function fetchSizeGuideFromApi() {
+      setSizeGuideFetching(true);
+      const baseUrl = getApiUrl(apiUrl);
+      const key = getApiKey();
+      const productPayload = {
+        title: productTitle,
+        variants: productVariants || []
+      };
+      if (productDescription) productPayload.description = productDescription;
+      if (productVendor) productPayload.vendor = productVendor;
+      if (productType) productPayload.productType = productType;
+      if (productTags?.length) productPayload.tags = productTags;
+      if (productOptions?.length) productPayload.options = productOptions;
+      fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
+        body: JSON.stringify({ product: productPayload })
+      }).then((r) => r.ok ? r.json() : null).then((data) => {
+        if (data) setSizeGuide(data);
+        else setSizeGuide({ found: false });
+      }).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
+    }
+  }, [view, apiUrl, productTitle, sizeGuideProp, scanPageForSizeGuide]);
   const stepIndex = useMemo(() => {
     switch (view) {
       case "welcome":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",