{"product_id":"be-0023r紋界-副本","title":"【BE】0023R紋界 (副本)","description":"\u003c!-- ARZS Designer — 商品頁「加 LOGO \/ 號碼」按鈕 + 全螢幕 iframe --\u003e\n\u003c!-- 使用方式：Shopify Admin → 商品頁 Theme Editor → 加入 Custom Liquid section → 貼上這段 --\u003e\n\n\u003cstyle\u003e\n  .arzs-designer-cta {\n    background: #000;\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 12px;\n    padding: 32px 24px;\n    margin: 20px 0;\n    text-align: center;\n  }\n  .arzs-designer-cta__badge {\n    font-size: 11px;\n    letter-spacing: 4px;\n    color: #d4a84b;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n  }\n  .arzs-designer-cta__title {\n    margin: 0 0 8px;\n    font-size: 20px;\n    font-weight: 700;\n    color: #fff;\n  }\n  .arzs-designer-cta__desc {\n    margin: 0 0 20px;\n    color: rgba(255,255,255,0.45);\n    font-size: 13px;\n    line-height: 1.6;\n  }\n  .arzs-designer-cta__btn {\n    display: inline-block;\n    padding: 14px 36px;\n    background: #E8001D;\n    color: #fff;\n    border: none;\n    border-radius: 50px;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 1px;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .arzs-designer-cta__btn:hover {\n    background: #cc0019;\n  }\n  .arzs-designer-cta__btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n  \/* 全螢幕 iframe 遮罩 *\/\n  .arzs-overlay {\n    display: none;\n    position: fixed;\n    inset: 0;\n    z-index: 99999;\n    background: #000;\n  }\n  .arzs-overlay.active { display: block; }\n  .arzs-overlay iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n  .arzs-overlay__close {\n    position: fixed;\n    top: 12px;\n    right: 16px;\n    z-index: 100000;\n    background: rgba(0,0,0,0.7);\n    color: #fff;\n    border: 1px solid rgba(255,255,255,0.2);\n    border-radius: 8px;\n    padding: 8px 16px;\n    font-size: 13px;\n    cursor: pointer;\n    font-family: inherit;\n  }\n  .arzs-overlay__close:hover {\n    background: rgba(255,255,255,0.15);\n  }\n\u003c\/style\u003e\n\n\u003c!-- ========== 按鈕區塊 ========== --\u003e\n\u003cdiv class=\"arzs-designer-cta\"\u003e\n  \u003cdiv class=\"arzs-designer-cta__badge\"\u003e✦ Custom Design\u003c\/div\u003e\n  \u003cdiv class=\"arzs-designer-cta__title\"\u003e在這個花色上加入你的設計\u003c\/div\u003e\n  \u003cdiv class=\"arzs-designer-cta__desc\"\u003e上傳 LOGO、加背號隊名，3D 即時預覽\u003c\/div\u003e\n  \u003cbutton class=\"arzs-designer-cta__btn\" id=\"arzs-open-designer\" onclick=\"arzsOpenDesigner()\"\u003e\n    🎨 加 LOGO \/ 號碼\n  \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- ========== 全螢幕 iframe 遮罩 ========== --\u003e\n\u003cdiv class=\"arzs-overlay\" id=\"arzs-overlay\"\u003e\n  \u003cbutton class=\"arzs-overlay__close\" onclick=\"arzsCloseDesigner()\"\u003e✕ 返回商品頁\u003c\/button\u003e\n  \u003ciframe id=\"arzs-iframe\" src=\"about:blank\" allow=\"clipboard-write\" loading=\"lazy\"\u003e\u003c\/iframe\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n(function() {\n  \/\/ ==========================================\n  \/\/ ★ 顏色 → GLB URL 對照表（每個商品不同，需手動更新）\n  \/\/ ==========================================\n  var GLB_MAP = {\n    '深海藍': 'https:\/\/cdn.shopify.com\/3d\/models\/487efd8a484bc424\/22BA-1004-ARZS-L_fixed.glb',\n    '甜橙橘': 'https:\/\/cdn.shopify.com\/3d\/models\/3e38489ae1d43e66\/22BA-1004-ARZS-L_fixed.glb',\n    '檸檬黃': 'https:\/\/cdn.shopify.com\/3d\/models\/074e2486f9c4db38\/22BA-1004-ARZS-L_fixed.glb',\n    '櫻花粉': 'https:\/\/cdn.shopify.com\/3d\/models\/4d49b20626df5c85\/22BA-1004-ARZS-L_fixed.glb',\n    '森林綠': 'https:\/\/cdn.shopify.com\/3d\/models\/bd89c4934a25cadd\/22BA-1004-ARZS-L_fixed.glb',\n    '湖水藍': 'https:\/\/cdn.shopify.com\/3d\/models\/c333ee9660210ce7\/22BA-1004-ARZS-L_fixed.glb'\n  };\n\n  var DESIGNER_BASE = 'https:\/\/arzs-designer.arzs-cloth.workers.dev';\n  var PRODUCT_TITLE = document.title || '';\n\n  \/\/ 取得目前選取的顏色名稱\n  function getSelectedColor() {\n    \/\/ 方法 1：找 Shopify 的 variant selector（Horizon 主題）\n    var selectors = document.querySelectorAll('[data-option-value][aria-checked=\"true\"], .swatch--active, input[name*=\"option\"]:checked');\n    for (var i = 0; i \u003c selectors.length; i++) {\n      var text = selectors[i].getAttribute('data-option-value') \n              || selectors[i].getAttribute('value')\n              || selectors[i].textContent.trim();\n      if (text \u0026\u0026 GLB_MAP[text]) return text;\n    }\n    \/\/ 方法 2：從 URL 的 variant 參數反查\n    var params = new URLSearchParams(window.location.search);\n    var variantId = params.get('variant');\n    \/\/ 方法 3：找頁面上含有顏色名稱的已選元素\n    var allLabels = document.querySelectorAll('.product-option label, .variant-label, [class*=\"option\"] [class*=\"active\"], [class*=\"swatch\"][class*=\"active\"]');\n    for (var j = 0; j \u003c allLabels.length; j++) {\n      var t = allLabels[j].textContent.trim();\n      if (GLB_MAP[t]) return t;\n    }\n    \/\/ 找不到就回傳第一個\n    return Object.keys(GLB_MAP)[0];\n  }\n\n  \/\/ 開啟 Designer\n  window.arzsOpenDesigner = function() {\n    var color = getSelectedColor();\n    var glbUrl = GLB_MAP[color] || GLB_MAP[Object.keys(GLB_MAP)[0]];\n    var src = DESIGNER_BASE \n      + '?model=' + encodeURIComponent(glbUrl) \n      + '\u0026mode=locked'\n      + '\u0026return=' + encodeURIComponent(window.location.href)\n      + '\u0026title=' + encodeURIComponent(PRODUCT_TITLE + ' - ' + color);\n    \n    document.getElementById('arzs-iframe').src = src;\n    document.getElementById('arzs-overlay').classList.add('active');\n    document.body.style.overflow = 'hidden'; \/\/ 防止背景捲動\n  };\n\n  \/\/ 關閉 Designer\n  window.arzsCloseDesigner = function() {\n    document.getElementById('arzs-overlay').classList.remove('active');\n    document.getElementById('arzs-iframe').src = 'about:blank'; \/\/ 釋放記憶體\n    document.body.style.overflow = '';\n  };\n\n  \/\/ ESC 關閉\n  document.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape' \u0026\u0026 document.getElementById('arzs-overlay').classList.contains('active')) {\n      arzsCloseDesigner();\n    }\n  });\n})();\n\u003c\/script\u003e\n","brand":"BE","offers":[{"title":"Default Title","offer_id":49138315264252,"sku":null,"price":750.0,"currency_code":"TWD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0790\/9241\/6764\/files\/9b9a1160cc807f38aa7c4d5295d8492e.png?v=1776791180","url":"https:\/\/arzs.com.tw\/products\/be-0023r%e7%b4%8b%e7%95%8c-%e5%89%af%e6%9c%ac","provider":"ARZS","version":"1.0","type":"link"}