${n}${label}${q}${hint?`${hint}`:''}

`; } function renderTabs(field, groupName){ let opts = field.options.map(o=>{ const sel = o===field.selected; return `

${o} ${ICONS.checkTiny}

`; }).join(''); return `

${fieldLabel(field.n,field.label,field.hint||null,{required:field.req, q:field.q, labelQ:field.labelQ, tooltipText:field.tooltipText})}

${opts}

`; } function renderTag(field){ return `

${fieldLabel(field.n,field.label,field.hint||null,{required:field.req, q:field.q, labelQ:field.labelQ, tooltipText:field.tooltipText})}

${field.value}${ICONS.checkTiny}

`; } function renderSelect(field){ const opts = field.options.map(o=>``).join(''); const dataField = field.field ? ` data-field="${field.field}"` : ''; return `

${fieldLabel(field.n,field.label,field.hint||null,{required:field.req, q:field.q, labelQ:field.labelQ, tooltipText:field.tooltipText})}

${opts} ${ICONS.chev}

`; } function renderImageDropdown(field){ const images = field.images || {}; const hideText = field.hideText || []; const selected = (field.values || []).filter(v => v!=='None'); // 所有多选下拉框统一在列表顶部加入 None 选项，点击即清空所有选择 const optsList = field.options.includes('None') ? field.options : ['None', ...field.options]; const tagsHtml = selected.length ? selected.map(v=>`${v}×`).join('') : ''; const headContent = selected.length ? `

${tagsHtml}

` : `None`; const opts = optsList.map(o=>{ // None 选项不显示图片预览 const thumb = o==='None' ? '' : (images[o] || ADDON_THUMBS[o] || ''); const sel = selected.includes(o); const textHtml = hideText.includes(o) ? '' : `

${o}

`; const thumbHtml = thumb ? `

${thumb}

` : ''; return `

${thumbHtml} ${textHtml} ${ICONS.checkGreen}

`; }).join(''); return `

${fieldLabel(field.n,field.label,field.hint||null,{required:field.req, q:field.q, labelQ:field.labelQ, tooltipText:field.tooltipText})}

${headContent}

${ICONS.chev}

${opts}

`; } function renderSize(field){ return `

${fieldLabel(field.n,field.label||'Size',field.unit||'(mm)',{labelQ:field.labelQ, tooltipText:field.tooltipText})}

Length (L)

Width (W)

Height (H)

`; } function renderQuantity(field){ return `

${fieldLabel(field.n,field.label||'Quantity','(MOQ:500 pieces)',{labelQ:field.labelQ, tooltipText:field.tooltipText})}

pcs

`; } function renderImageSelect(field){ const thumb = STYLE_THUMBS[field.img] || ''; return `

${fieldLabel(field.n,field.label,null,{required:field.req, q:field.q, labelQ:field.labelQ, tooltipText:field.tooltipText})}

${thumb}

${field.text}

`; } function renderSingleImageSelect(field){ const images = field.images || {}; const value = field.value || field.options[0]; const group = field.group || 'style'; const opts = field.options.map(o=>{ const thumb = images[o] || STYLE_THUMBS[field.img] || ''; const sel = o===value; return `

${thumb}

${o}

${ICONS.checkGreen}

`; }).join(''); const headThumb = (group==='insert' || group==='extra') ? '' : `

${images[value]||STYLE_THUMBS[field.img]||''}

`; return `

${fieldLabel(field.n,field.label,null,{required:field.req, q:field.q, labelQ:field.labelQ, tooltipText:field.tooltipText})}

${headThumb}

${value}

${ICONS.chev}

${opts}

`; } function renderSplit(a,b){ return `

${a}

${b}

`; } // 渲染 middle 项：支持 split（并排对半等宽）、solo（单独一排占左半右半留空）与普通字段 function renderMiddleItem(item){ if(item.split){ return `

${item.split.map(f=>`

${renderField(f)}

`).join('')}

`; } if(item.solo){ return `

${renderField(item)}

`; } return renderField(item); } function renderField(f){ switch(f.type){ case 'tabs': return renderTabs(f, f.group||'tab'); case 'tag': return renderTag(f); case 'select': return renderSelect(f); case 'size': return renderSize(f); case 'quantity': return renderQuantity(f); case 'image-select': return renderImageSelect(f); case 'single-img-select': return renderSingleImageSelect(f); case 'addon': return renderImageDropdown(f); } return ''; } /* ---------- states config ---------- */ function getConfig(type, material){ if(type==='tuck'){ const isCard = material==='cardstock'; if(isCard){ const finishingOpts = ['Gloss Aqueous Coating','Matte Aqueous Coating','Gloss Lamination','Matte Lamination','Soft Touch Lamination']; const finishing = finishingOpts.includes(state.finishing) ? state.finishing : 'Matte Lamination'; const spotUVFinishes = ['Matte Aqueous Coating','Matte Lamination','Soft Touch Lamination']; const addonOpts = spotUVFinishes.includes(finishing) ? ['Hot Foil Stamping','Emboss','Deboss','Emboss Texture','PVC Window','Spot UV'] : ['Hot Foil Stamping','Emboss','Deboss','Emboss Texture','PVC Window']; const addonVals = (state.addons||[]).filter(v => addonOpts.includes(v)); const extraOpts = ['PVC Windows','Corrugated Insert']; const extraVals = (state.insert||[]).filter(v => extraOpts.includes(v)); return { middle:[ {n:2, type:'tabs', label:'Material Type', group:'materialType', options:['Cardstock','Corrugated'], selected:'Cardstock'}, {n:4, type:'select', label:'Material', req:true, labelQ:true, tooltipText:"Material tooltip here", q:true, options:['Coated (C1S)','Uncoated (White Kraft)','Uncoated (Brown Kraft)'], value:'Coated (C1S)'}, {n:6, type:'select', label:'Printing', req:true, q:true, qBefore:true, options:['Outside Print Only','Outside & Inside Print'], value:'Outside Print Only'}, {n:8, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, qBefore:true, group:'addon', options:addonOpts, values:addonVals}, ], right:[ {n:3, type:'size'}, {n:5, type:'select', label:'Weight', req:true, options:['350g /19 pt/250 lbs','400g /21 pt/285 lbs'], value:'350g /19 pt/250 lbs'}, {n:7, type:'select', label:'Finishing', req:true, q:true, qBefore:true, field:'finishing', options:['Gloss Aqueous Coating','Matte Aqueous Coating','Gloss Lamination','Matte Lamination','Soft Touch Lamination'], value:finishing}, {n:9, type:'addon', label:'Extra', hint:'(optional)', q:true, group:'insert', options:extraOpts, images:INSERT_THUMBS, values:extraVals}, {n:10, type:'quantity'}, ], splitLast:true }; } // tuck corrugated 模式，第4点Material增加 labelQ:true return { middle:[ {n:2, type:'tabs', label:'Material Type', group:'materialType', options:['Cardstock','Corrugated'], selected:'Corrugated'}, {n:4, type:'select', label:'Material', req:true, labelQ:true, tooltipText:"Material tooltip here", q:true, options:['White Cardboard Outside','Brown Kraft Outside'], value:'White Cardboard Outside'}, {n:6, type:'select', label:'Finishing', req:true, q:true, qBefore:true, options:['Gloss Aqueous Coating','Matte Aqueous Coating','Gloss Lamination','Matte Lamination','Soft Touch Lamination'], value:'Matte Lamination'}, {n:8, type:'addon', label:'Extra', hint:'(optional)', q:true, group:'extra', images:ADDON_THUMBS, options:['PVC Window','Self-Seal Strip'], values:[]}, ], right:[ {n:3, type:'size'}, {n:5, type:'tag', label:'Printing', q:true, qBefore:true, value:'Outside Print Only'}, {n:7, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, qBefore:true, options:['Hot Foil Stamping','Spot UV','Emboss','Deboss'], values:[]}, {n:9, type:'quantity', qtyHalf:true}, ], splitLast:false }; } if(type==='mailer'){ const fullColorStyles = ['Outside Full Color Print Only','Both Sides Full Color Print','Inside Full Color Print Only']; const noFinishingStyles = ['Kraft Material Outside Black Ink Only','Outside White Ink Only']; const glossFinishes = ['Gloss Aqueous Coating','Gloss Lamination']; const defaultAddons = ['Hot Foil Stamping','Spot UV','Emboss','Deboss']; const styleOpts = ['Outside Full Color Print Only','Both Sides Full Color Print','Inside Full Color Print Only','Kraft Material Outside Black Ink Only','Outside White Ink Only','Outside White Ink, Inside full color print']; const style = styleOpts.includes(state.style) ? state.style : 'Outside White Ink, Inside full color print'; const finishingOpts = ['Gloss Aqueous Coating','Matte Aqueous Coating','Gloss Lamination','Matte Lamination','Soft Touch Lamination']; const finishing = finishingOpts.includes(state.finishing) ? state.finishing : 'Matte Lamination'; let addonOpts, finishingField; if(fullColorStyles.includes(style)){ if(glossFinishes.includes(finishing)){ addonOpts = ['Hot Foil Stamping','Emboss']; } else { addonOpts = ['Hot Foil Stamping','Emboss','Spot UV']; } finishingField = {n:5, type:'select', label:'Finishing', q:true, qBefore:true, field:'finishing', options:finishingOpts, value:finishing}; } else if(noFinishingStyles.includes(style)){ addonOpts = defaultAddons; finishingField = {n:5, type:'tag', label:'Finishing', value:'None'}; } else { addonOpts = defaultAddons; finishingField = {n:5, type:'select', label:'Finishing', q:true, qBefore:true, field:'finishing', options:finishingOpts, value:finishing}; } const addonVals = (state.addons||[]).filter(v => addonOpts.includes(v)); return { middle:[ {n:2, type:'single-img-select', label:'Style', img:'magnetic', req:true, q:true, options:styleOpts, value:style}, finishingField, {n:7, type:'addon', label:'Extra', q:true, group:'extra', images:ADDON_THUMBS, options:['Easy‑tear strip','Carrying Handle'], values:[]}, ], right:[ {n:3, type:'size'}, {n:4, type:'tag', label:'Corrugated Board', q:true, qBefore:true, value:'F Flute / E Flute / B Flute'}, {n:6, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, qBefore:true, options:addonOpts, values:addonVals}, {n:8, type:'quantity'}, ], splitLast:false }; } if(type==='magnetic'){ const styleOpts = ['Full Cover','Half Cover with Silk Ribbon']; const style = styleOpts.includes(state.style) ? state.style : 'Half Cover with Silk Ribbon'; const finishingOpts = ['Gloss Lamination','Matte Lamination','Soft Touch Lamination']; const finishing = finishingOpts.includes(state.finishing) ? state.finishing : 'Matte Lamination'; const spotUVFinishes = ['Matte Lamination','Soft Touch Lamination']; const addonOpts = spotUVFinishes.includes(finishing) ? ['Hot Foil Stamping','Emboss','Emboss Texture','Spot UV'] : ['Hot Foil Stamping','Emboss','Emboss Texture']; const addonVals = (state.addons||[]).filter(v => addonOpts.includes(v)); return { middle:[ {n:2, type:'single-img-select', label:'Style', img:'magnetic', req:true, q:true, options:styleOpts, value:style}, {n:6, type:'select', label:'Thickness', req:true, labelQ:true, tooltipText:"Thickness tooltip here", q:true, options:['1000g 1.8mm Thick','1200g 2.0mm Thick','1500g 2.6mm Thick'], value:'1000g 1.8mm Thick'}, {n:8, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, qBefore:true, group:'addon', options:addonOpts, values:addonVals}, ], right:[ {n:3, type:'size'}, {split:[ {n:4, type:'select', label:'Material', req:true, q:true, qBefore:true, options:['Coated Paper 157g','Coated Paper 200g'], value:'Coated Paper 157g'}, {n:5, type:'tag', label:'Printing', req:true, q:true, qBefore:true, value:'Full Color Print'} ]}, {n:7, type:'select', label:'Finishing', req:true, q:true, qBefore:true, field:'finishing', options:finishingOpts, value:finishing}, {n:9, type:'quantity'}, ], splitLast:false }; } if(type==='bag'){ const styleOpts = ['Handle Knotted Material: Grosgrain','Handle Knotted with Ribbon Material: Silk Ribbon','Rope Handle Paper Bag Rope with plastic end','Hidden Handle Material: Woven','Handle Glued Paper Bag Material: Rope','Die Cut Handle Paper Bag']; const style = styleOpts.includes(state.style) ? state.style : 'Rope Handle Paper Bag Rope with plastic end'; return { middle:[ {n:2, type:'single-img-select', label:'Handle Style', img:'bag', req:true, q:true, options:styleOpts, value:style}, {n:5, type:'select', label:'Material', req:true, q:true, qBefore:true, options:['250g Coated Paper','300g Coated Paper','250g Uncoated(White Kraft)','300g Uncoated(White Kraft)'], value:'250g Coated Paper'}, {n:7, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, qBefore:true, options:['Hot Foil Stamping','Spot UV','Emboss','Deboss','Emboss Texture'], values:[]}, ], right:[ {n:3, type:'size'}, {n:4, type:'select', label:'Printing', q:true, qBefore:true, options:['Outside Print Only','Outside & Inside Print'], value:'Outside Print Only'}, {n:6, type:'select', label:'Finishing', req:true, q:true, qBefore:true, options:['Gloss Aqueous Coating','Matte Aqueous Coating','Gloss Lamination','Matte Lamination','Soft Touch Lamination'], value:'Matte Lamination'}, {n:8, type:'quantity'}, ], splitLast:false }; } } const TYPES = [ {id:'tuck', label:'Tuck End Box', icon:'tuck'}, {id:'mailer', label:'Mailer Box', icon:'mailer'}, {id:'magnetic', label:'Folding Magnetic Box', icon:'magnetic'}, {id:'bag', label:'Shopping Bag', icon:'bag'}, ]; let state = { type:'tuck', material:'cardstock', finishing:'Matte Lamination', addons:[], style:'Outside White Ink, Inside full color print', insert:[] }; function renderTypeGrid(){ const el = document.getElementById('eccm-typeGrid'); el.innerHTML = TYPES.map(t=>`

${ICONS[t.icon]}

${t.label}

${ICONS.checkTiny}

`).join(''); el.querySelectorAll('.eccm-type-card').forEach(card=>{ card.addEventListener('click', ()=>{ state.type = card.dataset.type; renderAll(); }); }); } function renderColumns(){ const cfg = getConfig(state.type, state.material); const mid = document.getElementById('eccm-colMiddle'); const right = document.getElementById('eccm-colRight'); const grid = document.querySelector('.eccm-grid'); // 把 right 配置展开为独立渲染单元数组（处理 split 与 splitLast） function expandRightItems(cfg){ const items = []; if(cfg.splitLast){ const rest = cfg.right.slice(0,-2); rest.forEach(item=>{ if(item.split){ items.push(`

${item.split.map(f=>`

${renderField(f)}

`).join('')}

`); }else{ items.push(renderField(item)); } }); const last2 = cfg.right.slice(-2); items.push(`

${last2.map(f=>`

${renderField(f)}

`).join('')}

`); }else{ cfg.right.forEach((item, idx)=>{ if(item.split){ items.push(renderSplit(renderField(item.split[0]), renderField(item.split[1]))); }else if(item.type==='quantity' && idx===cfg.right.length-1){ if(item.qtyHalf){ // 输入框占整行一半宽度（右半留空） items.push(`

${renderField(item)}

`); }else{ // 单独 Quantity 占一半宽度，右半留空，与上方行等高 items.push(`

${renderField(item)}

`); } }else{ items.push(renderField(item)); } }); } return items; } // 所有类型统一：中+右合并为「配对行」布局，按两列数量差决定是否首行左跨 2 右项 grid.classList.add('eccm-paired-mode'); right.style.display = 'none'; const m = cfg.middle; const rItems = expandRightItems(cfg); let html = ''; if(m.length === rItems.length - 1){ // 规则：中间 3 项 / 右侧 4 项（Mailer / Magnetic / Bag 的 Style 占比 = 2 常规字段） // 第一行左跨两行：m[0] 对齐 rItems[0] + rItems[1]；之后逐对 1:1 html += `

${renderMiddleItem(m[0])}

${rItems[0]}

${rItems[1]}

`; for(let j=1;j

${renderMiddleItem(m[j])}

${rItems[j+1]}

`; } } else { // 规则：中间 N 项 / 右侧 N 项（Tuck Cardstock / Corrugated），全部 1:1 配对 const pairCount = Math.min(m.length, rItems.length); for(let i=0;i

${renderMiddleItem(m[i])}

${rItems[i]}

`; } for(let i=pairCount;i${html}`; document.querySelectorAll('.eccm-tab-opt').forEach(el=>{ el.addEventListener('click', ()=>{ const group = el.dataset.group; const value = el.dataset.value; if(group==='materialType'){ state.material = value==='Cardstock' ? 'cardstock' : 'corrugated'; renderAll(); return; } el.parentElement.querySelectorAll('.eccm-tab-opt').forEach(x=>x.classList.remove('eccm-selected')); el.classList.add('eccm-selected'); }); }); document.querySelectorAll('.eccm-img-select').forEach(sel=>{ const head = sel.querySelector('.eccm-img-select__head'); const listOpts = sel.querySelectorAll('.eccm-img-select__list .eccm-img-opt'); const isMulti = sel.classList.contains('eccm-multi'); const headOpt = sel.querySelector('.eccm-img-select__head .eccm-img-opt'); head.addEventListener('click', (e)=>{ e.stopPropagation(); document.querySelectorAll('.eccm-img-select.eccm-open').forEach(o=>{if(o!==sel) o.classList.remove('eccm-open');}); sel.classList.toggle('eccm-open'); }); if(isMulti){ listOpts.forEach(opt=>{ opt.addEventListener('click', (e)=>{ e.stopPropagation(); if(opt.dataset.value === 'None'){ // 点击 None：清空所有选择（什么都不选）并收起下拉框 listOpts.forEach(o=>o.classList.remove('eccm-selected')); sel.classList.remove('eccm-open'); } else { opt.classList.toggle('eccm-selected'); // 选择其他项时，确保 None 未选中 const noneOpt = sel.querySelector('.eccm-img-select__list .eccm-img-opt[data-value="None"]'); if(noneOpt) noneOpt.classList.remove('eccm-selected'); } let values = []; sel.querySelectorAll('.eccm-img-select__list .eccm-img-opt.eccm-selected').forEach(o=>{ values.push(o.dataset.value); }); headOpt.innerHTML = values.length ? `

${values.map(v=>`${v}×`).join('')}

` : `None`; if(sel.dataset.group === 'addon'){ state.addons = values; } else if(sel.dataset.group === 'insert'){ state.insert = values; } }); }); // 点击标签上的 x 移除对应选项 headOpt.addEventListener('click', (e)=>{ const xBtn = e.target.closest('.eccm-addon-tag__x'); if(!xBtn) return; e.stopPropagation(); const tag = xBtn.closest('.eccm-addon-tag'); const value = tag.dataset.value; const listOpt = sel.querySelector(`.eccm-img-select__list .eccm-img-opt[data-value="${value}"]`); if(listOpt) listOpt.classList.remove('eccm-selected'); let values = []; sel.querySelectorAll('.eccm-img-select__list .eccm-img-opt.eccm-selected').forEach(o=>{ values.push(o.dataset.value); }); headOpt.innerHTML = values.length ? `

${values.map(v=>`${v}×`).join('')}

` : `None`; if(sel.dataset.group === 'addon'){ state.addons = values; } else if(sel.dataset.group === 'insert'){ state.insert = values; } }); } else { listOpts.forEach(opt=>{ opt.addEventListener('click', (e)=>{ e.stopPropagation(); const value = opt.dataset.value; sel.querySelector('.eccm-img-select__head .eccm-img-opt__text').textContent = value; listOpts.forEach(o=>o.classList.toggle('eccm-selected', o===opt)); sel.dataset.value = value; sel.classList.remove('eccm-open'); if(sel.dataset.group === 'style'){ state.style = value; renderColumns(); requestAnimationFrame(equalizeColumns); } else if(sel.dataset.group === 'insert'){ state.insert = value; renderColumns(); requestAnimationFrame(equalizeColumns); } }); }); } // 悬停缩略图：仅 add-on（multi）下拉框显示大预览框 if(!sel.classList.contains('eccm-multi')) return; listOpts.forEach(opt=>{ const thumbEl = opt.querySelector('.eccm-img-opt__thumb'); if(!thumbEl) return; thumbEl.addEventListener('mouseenter', (e)=>{ const rect = thumbEl.getBoundingClientRect(); const preview = document.getElementById('eccm-hover-preview'); preview.querySelector('.eccm-hover-preview__img').innerHTML = thumbEl.innerHTML; const label = opt.dataset.value || ''; const labelEl = preview.querySelector('.eccm-hover-preview__label'); labelEl.textContent = label; labelEl.style.display = label ? 'block' : 'none'; preview.style.display = 'flex'; // 紧贴下拉框左侧 const listRect = thumbEl.closest('.eccm-img-select__list').getBoundingClientRect(); const pw = preview.offsetWidth; const ph = preview.offsetHeight; let left = listRect.left - pw - 8; if(left < 8) left = listRect.right + 8; // 左侧空间不足则放右侧 let top = rect.top; if(top + ph > window.innerHeight - 8){ top = window.innerHeight - ph - 8; } if(top < 8) top = 8; preview.style.left = left + 'px'; preview.style.top = top + 'px'; }); thumbEl.addEventListener('mouseleave', ()=>{ document.getElementById('eccm-hover-preview').style.display = 'none'; }); }); }); document.querySelectorAll('select[data-field="finishing"]').forEach(sel=>{ sel.addEventListener('change', (e)=>{ state.finishing = e.target.value; renderColumns(); requestAnimationFrame(equalizeColumns); }); }); } function equalizeColumns(){ const col1 = document.querySelector('.eccm-grid > div:nth-child(1)'); const col2 = document.getElementById('eccm-colMiddle'); const col3 = document.getElementById('eccm-colRight'); if(!col1 || !col2 || !col3) return; [col1,col2,col3].forEach(c=>{ c.style.minHeight = '0px'; }); const maxH = Math.max(col1.offsetHeight, col2.offsetHeight, col3.offsetHeight); [col1,col2,col3].forEach(c=>{ c.style.minHeight = maxH + 'px'; }); } function renderAll(){ renderTypeGrid(); renderColumns(); requestAnimationFrame(equalizeColumns); } window.addEventListener('resize', ()=>requestAnimationFrame(equalizeColumns)); if(!window.__addonCloseBound){ window.__addonCloseBound = true; document.addEventListener('click', ()=>{ document.querySelectorAll('.eccm-img-select.eccm-open').forEach(s=>s.classList.remove('eccm-open')); const hp = document.getElementById('eccm-hover-preview'); if(hp) hp.style.display = 'none'; }); } document.getElementById('eccm-getQuoteBtn').addEventListener('click', ()=>{ const btn = document.getElementById('eccm-getQuoteBtn'); const priceEl = document.getElementById('eccm-priceVal'); const original = btn.innerHTML; btn.innerHTML = 'Calculating…'; btn.style.opacity = '.75'; setTimeout(()=>{ const base = {tuck:0.38, mailer:0.48, magnetic:1.65, bag:0.42}[state.type] || 0.48; const qtyInput = document.querySelector('.eccm-qty-row input'); const qty = qtyInput ? parseInt(qtyInput.value)||500 : 500; const factor = Math.max(0.85, Math.min(1.15, 500/qty)); const price = (base*factor).toFixed(2); priceEl.textContent = `US$ ${price} / pcs`; btn.innerHTML = original; btn.style.opacity = '1'; }, 550); }); /* 悬停预览框 */ const hoverPreview = document.createElement('div'); hoverPreview.id = 'eccm-hover-preview'; hoverPreview.innerHTML = `

`; document.body.appendChild(hoverPreview); renderAll();