(() => { const SUPABASE_FN = "https://jewbhprivetimofuqbwn.supabase.co/functions/v1/get-gob"; const MODEL_VIEWER_SRC = "https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"; const LOADER_ID = "zid-model-viewer-loader"; /* ------------------------------- Load only once --------------------------------*/ function ensureModelViewer() { return new Promise((resolve, reject) => { if (customElements.get("model-viewer")) return resolve(); if (!document.getElementById(LOADER_ID)) { const s = document.createElement("script"); s.type = "module"; s.src = MODEL_VIEWER_SRC; s.id = LOADER_ID; s.onload = () => customElements.whenDefined("model-viewer").then(resolve).catch(reject); s.onerror = () => reject(new Error("Failed to load model-viewer")); document.head.appendChild(s); } customElements.whenDefined("model-viewer").then(resolve).catch(reject); }); } /* ------------------------------- Get Product ID (Zid Global) --------------------------------*/ const getProductId = () => { try { const pv = productViewd; return pv?.id ?? null; } catch { return null; } }; function waitForProductId(timeoutMs = 7000, intervalMs = 120) { return new Promise((resolve) => { const t0 = Date.now(); (function loop() { const id = getProductId(); if (id) return resolve(id); if (Date.now() - t0 > timeoutMs) return resolve(null); setTimeout(loop, intervalMs); })(); }); } /* ------------------------------- Build Floating UI --------------------------------*/ async function buildUI() { const productId = await waitForProductId(); if (!productId) return; /* Overlay */ const overlay = document.createElement("div"); Object.assign(overlay.style, { position: "fixed", inset: "0", background: "rgba(0,0,0,0.5)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)", zIndex: "999", display: "none", }); /* Popup */ const popup = document.createElement("div"); Object.assign(popup.style, { display: "none", position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", background: "#f3f4f6", border: "none", padding: "24px", zIndex: "1000", maxWidth: "90vw", width: "700px", maxHeight: "85vh", boxShadow: "0 10px 40px rgba(0,0,0,.4)", color: "#111827", borderRadius: "16px", overflow: "hidden", fontFamily: "'Inter', sans-serif", animation: "fadeIn 0.3s ease", }); /* Animations */ const styleTag = document.createElement("style"); styleTag.textContent = ` @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } `; document.head.appendChild(styleTag); popup.innerHTML = ` StoreInside Logo

Loading model...

`; /* Floating 3D Button */ const btn = document.createElement("button"); btn.type = "button"; btn.textContent = "👁️ View in 3D"; Object.assign(btn.style, { position: "fixed", bottom: "24px", right: "24px", background: "#111827", color: "#f9fafb", border: "none", padding: "14px 20px", borderRadius: "50px", fontSize: "16px", fontWeight: "600", cursor: "pointer", transition: "all 0.25s ease", boxShadow: "0 8px 20px rgba(0,0,0,0.2)", fontFamily: "'Inter', sans-serif", zIndex: "1002", }); btn.onmouseover = () => { btn.style.background = "#1f2937"; btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)"; btn.style.transform = "scale(1.05)"; }; btn.onmouseout = () => { btn.style.background = "#111827"; btn.style.boxShadow = "0 8px 20px rgba(0,0,0,0.2)"; btn.style.transform = "scale(1)"; }; document.body.appendChild(btn); document.body.appendChild(overlay); document.body.appendChild(popup); const container = popup.querySelector("#zid-3d-container"); async function loadAndShow() { overlay.style.display = "block"; popup.style.display = "block"; container.innerHTML = `

Loading model...

`; try { await ensureModelViewer(); const resp = await fetch( `${SUPABASE_FN}?product_id=${encodeURIComponent(productId)}` ); const data = await resp.json(); if(data.error) { container.innerHTML = `

No 3D model available for this product

`; return; } if (!data.file_url) throw new Error("file_url is missing."); container.innerHTML = ` `; } catch (err) { container.innerHTML = `

Failed to load model: ${err.message}

`; } } btn.addEventListener("click", loadAndShow); popup.querySelector("#zid-3d-close").addEventListener("click", () => { popup.style.display = "none"; overlay.style.display = "none"; }); } /* Init on DOM Ready */ if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", buildUI, { once: true }); } else { buildUI(); } })();

Barq

Related Products

barq

Barq

Ask a Question