Shopline 客製化語法探針

對應計畫書 §6 答案 #2 與 P7。這一頁本身不會去碰 zoila.tw—— 那是有真實訂單在跑的店，硬規則第 4 條。操作方式一律是在後台新增一個測試分頁，把下面的程式碼貼進客製化語法區塊，然後回來把結果填進表格。

要驗的四件事

項目	貼什麼	看什麼
A. 內嵌 `<script type="module">`	探針 1	頁面上有沒有出現「MODULE OK」。沒有 → Shopline 濾掉 module script，Demo C 要改走 iframe。
B. 外部 script 來源	探針 2	能不能從外部網域載入 JS。被 CSP 擋 → 主控台會出現 `Refused to load the script`。
C. `<iframe>`	探針 3	iframe 有沒有被移除；有的話 `frame-ancestors` / `X-Frame-Options` 是否放行。
D. 自訂元素 + WebGL	探針 4	選物間能不能在客製化語法區塊裡真的跑起來。這是拓撲 A 成不成立的最終判準。

探針 1 — 內嵌 module script

<div id="probe-1">（等待）</div>
<script type="module">
  document.getElementById('probe-1').textContent = 'MODULE OK · ' + new Date().toISOString();
</script>

探針 2 — 外部 script

<div id="probe-2">（等待）</div>
<script>
  var s = document.createElement('script');
  s.src = 'https://<你的 demo 網域>/probe.js';
  s.onload  = function(){ document.getElementById('probe-2').textContent = 'EXTERNAL OK'; };
  s.onerror = function(){ document.getElementById('probe-2').textContent = 'EXTERNAL BLOCKED'; };
  document.head.appendChild(s);
</script>

探針 3 — iframe

<iframe src="https://<你的 demo 網域>/showroom.html?item=ceramic-mug-01&style=pixel"
        style="width:100%;aspect-ratio:16/10;border:0;border-radius:12px"
        allow="xr-spatial-tracking; accelerometer; gyroscope"></iframe>

iframe 是拓撲 B 的退路：就算 script 被濾掉，只要 iframe 活著，商品頁按鈕仍然可以叫出選物間，只是換花色要靠 postMessage 回傳。

探針 4 — 完整選物間（拓撲 A）

<script type="module" src="https://<你的 demo 網域>/assets/element.js"></script>
<pixel-showroom inline assets="https://<你的 demo 網域>/assets/"
                item="ceramic-mug-01" data-style="pixel"
                style="display:block;width:100%;aspect-ratio:16/10"></pixel-showroom>

結果（實測後回填）

探針	結果	備註
A 內嵌 module script	待測
B 外部 script	待測
C iframe	待測
D 自訂元素 + WebGL	待測
CSP 標頭實際內容	待測	從 DevTools → Network → 文件回應標頭抄下來

不管結果如何都不致命

正式產品本來就走拓撲 B（並列式）：Shopline 商品頁上只放一顆按鈕，選物間跑在自己的站台上，靠深連結 ?item=…&variant=…&style=… 對接。探針只影響「能不能順便做到拓撲 A」。

本機自我驗證

下面這塊是把探針 4 的程式碼跑在自己站台上的樣子——它證明的是「元件本身沒問題」，真正的變因只有 Shopline 的過濾規則。