iSock｜襪子設計工作室：給襪廠的說明

一、怎麼掛在自己的網站上

在你要放的頁面貼一段 iframe：

<iframe
  src="https://<你的部署網址>/embed"
  style="width:100%;height:820px;border:0"
  allow="clipboard-write"
  title="襪子設計"
></iframe>

安全設定：我們只允許白名單內的網域嵌入（NEXT_PUBLIC_EMBED_PARENT_ORIGINS＋ EMBED_PARENT_ORIGINS）。把貴公司的網域告訴我們，我們設好你才嵌得起來—— 這是為了不讓別人拿你的工作室去收單。

二、詢價怎麼到你手上

1. 顧客填姓名與聯絡方式（姓名必填、Email 或電話至少一個），按下下載或送出。
2. 每一筆都有詢價編號，格式 SS-YYYYMMDD-XXXXXXXX。編號印在畫面、zip 檔名、 詢價單與 zones.json 上。回覆顧客時請帶著它（信件主旨直接寫編號）。
3. 沒有接收件系統時，顧客會看到「請把檔案寄到 drnogreasy@gmail.com， 主旨寫編號」。接了收件系統（M21）之後就會直接送到你的收件匣。

⚠️ 顧客看到「已下載」不代表你收到了——我們在畫面上講得很清楚， 但請把「收到信」當成唯一的受理依據。

三、（選用）在你的頁面上接收詢價狀態

工作室會在顧客下載或送出之後，用 postMessage 通知你的頁面。三件事一定要驗，否則任何一個分頁都能偽造這則訊息：

const iframe = document.querySelector("#sock-studio");

  window.addEventListener("message", (event) => {
    // ① 來源網域：必須是工作室的網址（不是你自己的、也不是 "*"）
    if (event.origin !== "https://<你的工作室網址>") return;

    // ② 來源視窗：必須是那個 iframe 本人（擋掉別的分頁或彈出視窗冒名）
    if (event.source !== iframe.contentWindow) return;

    // ③ 訊息結構：型別、編號格式都要對
    const data = event.data;
    if (!data || data.type !== "sockmap.inquiry") return;
    if (!/^SS-d{8}-[0-9A-Z]{8}$/.test(data.inquiryId ?? "")) return;

    // data.status 是 "downloaded" | "accepted" | "failed" | "pack-failed"
    // 🔴 "downloaded" 不是「已下單」：那只代表顧客把檔案存到自己電腦
    console.log("詢價狀態", data.inquiryId, data.status);
  });

訊息裡只有編號與狀態，沒有顧客的姓名、Email 或電話—— 那些只在你收到的 zip（詢價單.html）裡。

四、zip 裡面有什麼

五、還沒確認的事（我們需要你的答案）

• 七種襪長的上管圈數：目前只有中筒襪是真實打樣單，其餘是用比例推的草案（畫面上都標著「估計」）。 你確認之前，我們可以只開中筒襪給顧客選（NEXT_PUBLIC_ENABLED_SOCK_LENGTHS）。
• 隱形襪的襪口工法（傳統羅紋？矽膠止滑帶？）。
• 上管最多幾圈不會掉針。
• 最低量、報價方式、交期。

六、支援的瀏覽器（支援矩陣）

手機上的縮放請用畫面上的「大小」滑桿（我們不鎖頁面縮放，看不清楚可以自己放大整頁）。