console.log("connected"); // ─── Debug Panel ─────────────────────────────────────────────── const IS_DEBUG = new URLSearchParams(window.location.search).has("debug"); let debugPanel = null; let debugContent = null; function getCleanParams() { const params = new URLSearchParams(window.location.search); params.delete("debug"); return params; } function buildDebugPanel() { if (!IS_DEBUG) return; if (debugPanel) return; debugPanel = document.createElement("div"); debugPanel.style.cssText = ` position: fixed; top: 0; right: 0; width: 380px; height: 100vh; background: rgba(13, 15, 20, 0.97); color: rgba(255,255,255,0.92); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; z-index: 2147483647; border-left: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,0.5); `; const header = document.createElement("div"); header.style.cssText = ` padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; `; header.innerHTML = `

Debug Panel ?debug active

`; const statusBar = document.createElement("div"); statusBar.id = "dbg-status"; statusBar.style.cssText = ` padding: 8px 16px; font-size: 11px; opacity: 0.6; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; `; statusBar.textContent = "Waiting for product click…"; debugContent = document.createElement("div"); debugContent.style.cssText = ` flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; `; debugContent.innerHTML = `

No product added yet.
Click a product to basket to see data here.

`; debugPanel.appendChild(header); debugPanel.appendChild(statusBar); debugPanel.appendChild(debugContent); document.body.appendChild(debugPanel); debugPanel.addEventListener("click", async (e) => { const btn = e.target?.closest("button[data-action]"); if (!btn) return; const action = btn.getAttribute("data-action"); if (action === "close") { debugPanel.remove(); debugPanel = null; debugContent = null; return; } if (action === "clear") { debugContent.innerHTML = `

Cleared. Click a product to see data.

`; document.getElementById("dbg-status").textContent = "Cleared."; document.getElementById("dbg-dot").style.background = "#ffd166"; return; } if (action === "copy") { try { await navigator.clipboard.writeText(debugContent.innerText || ""); document.getElementById("dbg-status").textContent = "Copied to clipboard ✅"; } catch { document.getElementById("dbg-status").textContent = "Copy failed. Select text manually."; } } }); } // ✅ Build section as a real DOM element (no innerHTML escaping issues) function makeSection(title, color, rows) { const wrap = document.createElement("div"); wrap.style.cssText = ` border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); overflow: hidden; `; const titleEl = document.createElement("div"); titleEl.style.cssText = ` padding: 8px 12px; background: rgba(255,255,255,0.07); font-weight: 700; font-size: 11px; color: ${color}; letter-spacing: 0.05em; text-transform: uppercase; `; titleEl.textContent = title; const body = document.createElement("div"); body.style.cssText = ` padding: 10px 12px; font-size: 11px; line-height: 1.7; word-break: break-all; display: flex; flex-direction: column; gap: 4px; `; // rows = array of { label, value, valueColor } rows.forEach(row => { const line = document.createElement("div"); if (row.raw) { // raw HTML line (for JSON pre block) line.innerHTML = row.raw; } else { const labelEl = document.createElement("span"); labelEl.style.cssText = `color: rgba(255,255,255,0.45); margin-right: 6px;`; labelEl.textContent = row.label; const valueEl = document.createElement("span"); valueEl.style.cssText = `color: ${row.valueColor || "rgba(255,255,255,0.9)"};`; valueEl.textContent = row.value; line.appendChild(labelEl); line.appendChild(valueEl); } body.appendChild(line); }); wrap.appendChild(titleEl); wrap.appendChild(body); return wrap; } function updateDebugPanel(product, originalUrl, newUrl) { if (!IS_DEBUG) return; buildDebugPanel(); if (!debugContent) return; const cleanParams = getCleanParams(); const consultorId = cleanParams.get("consultor-id"); const consultorName = cleanParams.get("consultor-name"); const dot = document.getElementById("dbg-dot"); if (dot) dot.style.background = "#69db7c"; const statusEl = document.getElementById("dbg-status"); if (statusEl) statusEl.textContent = `Last update: ${new Date().toLocaleTimeString()} — window.open BLOCKED in debug mode`; // Clear content debugContent.innerHTML = ""; // ── 1. Product JSON ── const jsonPre = document.createElement("pre"); jsonPre.style.cssText = ` margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 11px; color: rgba(255,255,255,0.85); line-height: 1.6; `; jsonPre.textContent = JSON.stringify(product, null, 2); const jsonSection = makeSection("Product Object (JSON)", "#74c0fc", []); jsonSection.querySelector("div:last-child").appendChild(jsonPre); debugContent.appendChild(jsonSection); // ── 2. product.description ── debugContent.appendChild(makeSection("product.description (original URL)", "#ffd166", [ { label: "", value: originalUrl || "—", valueColor: "#ffd166" } ])); // ── 3. Querystrings ── const paramEntries = [...cleanParams.entries()]; const paramRows = paramEntries.length === 0 ? [{ label: "", value: "No querystrings found (excluding ?debug)", valueColor: "rgba(255,255,255,0.3)" }] : paramEntries.map(([k, v]) => ({ label: k + " =", value: v, valueColor: "#a9e34b" })); debugContent.appendChild(makeSection("Querystrings (excl. ?debug)", "#a9e34b", paramRows)); // ── 4. Consultor Detection ── const consultorRows = [ consultorId ? { label: "✅ consultor-id =", value: consultorId, valueColor: "#a9e34b" } : { label: "✗ consultor-id", value: "not found", valueColor: "#ff6b6b" }, consultorName ? { label: "✅ consultor-name =", value: consultorName, valueColor: "#a9e34b" } : { label: "✗ consultor-name", value: "not found", valueColor: "#ff6b6b" }, ]; debugContent.appendChild(makeSection("Consultor Detection", "#69db7c", consultorRows)); // ── 5. Rule Applied ── let ruleLabel, ruleValue, ruleColor; if (consultorId) { ruleLabel = "consultor-id found →"; ruleValue = `/consultor → /tienda/${consultorId}`; ruleColor = "#a9e34b"; } else if (consultorName) { ruleLabel = "consultor-name found →"; ruleValue = `/consultor → /${consultorName}`; ruleColor = "#a9e34b"; } else { ruleLabel = "no params →"; ruleValue = "/consultor → /tienda"; ruleColor = "#ffd166"; } debugContent.appendChild(makeSection("URL Rule Applied", "#cc99ff", [ { label: ruleLabel, value: ruleValue, valueColor: ruleColor } ])); // ── 6. Generated URL ── debugContent.appendChild(makeSection("Generated URL (window.open BLOCKED in debug)", "#ff6b6b", [ { label: "", value: newUrl || "—", valueColor: "#69db7c" } ])); } // ─── Core Logic ──────────────────────────────────────────────── if (IS_DEBUG) buildDebugPanel(); const instance = iPaperJsApi(3); instance.basket.onProductAdd((product) => { const params = new URLSearchParams(window.location.search); const consultorId = params.get("consultor-id"); const consultorName = params.get("consultor-name"); let urlLocation; if (consultorId) { urlLocation = `tienda/${consultorId}`; } else if (consultorName) { urlLocation = `${consultorName}`; } else { urlLocation = "tienda"; } const originalUrl = product.description; const newUrl = originalUrl.replace("consultor", urlLocation); updateDebugPanel(product, originalUrl, newUrl); // ✅ Only open URL when NOT in debug mode if (!IS_DEBUG) { window.open(newUrl, "_blank"); } });