/* ========== SVG ICONS ========== */ const ICONS = { // 4 mailer box type icons (line art) rollEndTuckFront:``, mailerWithHandle:``, selfSealMailer:``, rollEndLockFront:``, checkTiny:``, checkGreen:``, chev:``, }; /* ========== STYLE THUMBNAILS (product images) ========== */ const STYLE_THUMBS = { 'Outside White Ink, Inside full color print': ``, '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': ``, }; /* ========== ADD-ON THUMBNAILS ========== */ const ADDON_THUMBS = { 'None': ``, 'Hot Foil Stamping': ``, 'Spot UV': ``, 'Emboss': ``, 'Deboss': ``, }; /* ========== FIELD RENDERERS ========== */ function fieldLabel(n,label,hint,opts){ opts = opts||{}; const q = opts.q ? '?' : ''; return `

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

`; } function renderTag(field){ return `

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

${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,{q:field.q})}

${opts} ${ICONS.chev}

`; } function renderSize(field){ return `

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

Length (L)

Width (W)

Height (H)

`; } function renderQuantity(field){ return `

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

pcs

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

${thumb}

${o}

${ICONS.checkGreen}

`; }).join(''); const headThumb = `

${images[value]||''}

`; return `

${fieldLabel(field.n,field.label,null,{q:field.q})}

${headThumb}

${value}

${ICONS.chev}

${opts}

`; } function renderImageDropdown(field){ const images = field.images || ADDON_THUMBS; const selected = (field.values || []).filter(v => v!=='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=>{ const thumb = o==='None' ? '' : (images[o] || ''); const sel = selected.includes(o); const thumbHtml = thumb ? `

${thumb}

` : ''; return `

${thumbHtml}

${o}

${ICONS.checkGreen}

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

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

${headContent}

${ICONS.chev}

${opts}

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

${a}

${b}

`; } function renderMiddleItem(item){ if(item.split){ return `

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

${renderField(f)}

`).join('')}

`; } return renderField(item); } function renderField(f){ switch(f.type){ case 'tag': return renderTag(f); case 'select': return renderSelect(f); case 'size': return renderSize(f); case 'quantity': return renderQuantity(f); case 'single-img-select': return renderSingleImageSelect(f); case 'addon': return renderImageDropdown(f); } return ''; } /* ========== CONFIGURATION BY BOX TYPE ========== */ function getConfig(boxType){ const allAddons = ['Hot Foil Stamping','Spot UV','Emboss','Deboss']; const noFinishingStyles = ['Kraft Material Outside Black Ink Only','Outside White Ink Only']; const glossFinishes = ['Gloss Aqueous Coating','Gloss Lamination']; const matteFinishes = ['Matte Aqueous Coating','Matte Lamination','Soft Touch Lamination']; const styleOptions = ['Outside White Ink, Inside full color print','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']; const styleValue = state.style && styleOptions.includes(state.style) ? state.style : 'Outside White Ink, Inside full color print'; const finishingOptions = ['Gloss Aqueous Coating','Matte Aqueous Coating','Gloss Lamination','Matte Lamination','Soft Touch Lamination']; const finishingValue = state.finishing && finishingOptions.includes(state.finishing) ? state.finishing : 'Matte Lamination'; let addonOpts, finishingField; if(styleValue === 'Outside White Ink, Inside full color print' || noFinishingStyles.includes(styleValue)){ addonOpts = allAddons; if(noFinishingStyles.includes(styleValue)){ finishingField = {n:5, type:'tag', label:'Finishing', value:'None'}; } else { finishingField = {n:5, type:'select', label:'Finishing', q:true, field:'finishing', options:finishingOptions, value:finishingValue}; } } else { if(glossFinishes.includes(finishingValue)){ addonOpts = allAddons.filter(v => v !== 'Spot UV' && v !== 'Deboss'); } else if(matteFinishes.includes(finishingValue)){ addonOpts = allAddons.filter(v => v !== 'Deboss'); } else { addonOpts = allAddons; } finishingField = {n:5, type:'select', label:'Finishing', q:true, field:'finishing', options:finishingOptions, value:finishingValue}; } const addonValues = (state.addons||[]).filter(v => addonOpts.includes(v) && v !== 'None'); // Type 1: Roll-End Tuck Front Boxes if(boxType === 'rollEndTuckFront'){ return { middle:[ {n:2, type:'single-img-select', label:'Paper and Printing Options', group:'style', q:true, images:STYLE_THUMBS, options:styleOptions, value:styleValue}, finishingField, {n:7, type:'quantity'}, ], right:[ {n:3, type:'size'}, {n:4, type:'tag', label:'Corrugated Board', value:'F Flute / E Flute / B Flute'}, {n:6, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, group:'addon', options:addonOpts, images:ADDON_THUMBS, values:addonValues}, ], spanFirst: true }; } // Type 2: Mailer Boxes with Handles if(boxType === 'mailerWithHandle'){ return { middle:[ {n:2, type:'single-img-select', label:'Paper and Printing Options', group:'style', q:true, images:STYLE_THUMBS, options:styleOptions, value:styleValue}, finishingField, {n:7, type:'tag', label:'Handle Type', value:'Plastic Handle'}, ], right:[ {n:3, type:'size'}, {n:4, type:'tag', label:'Corrugated Board', value:'F Flute / E Flute / B Flute'}, {n:6, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, group:'addon', options:addonOpts, images:ADDON_THUMBS, values:addonValues}, {n:8, type:'quantity'}, ], spanFirst: true }; } // Type 3: Self-Seal Mailer Boxes if(boxType === 'selfSealMailer'){ return { middle:[ {n:2, type:'single-img-select', label:'Paper and Printing Options', group:'style', q:true, images:STYLE_THUMBS, options:styleOptions, value:styleValue}, finishingField, {n:7, type:'tag', label:'Closure Features', value:'Self-Seal Strip'}, ], right:[ {n:3, type:'size'}, {n:4, type:'tag', label:'Corrugated Board', value:'F Flute / E Flute / B Flute'}, {n:6, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, group:'addon', options:addonOpts, images:ADDON_THUMBS, values:addonValues}, {n:8, type:'quantity'}, ], spanFirst: true }; } // Type 4: Roll-End Lock Front Boxes if(boxType === 'rollEndLockFront'){ return { middle:[ {n:2, type:'single-img-select', label:'Paper and Printing Options', group:'style', q:true, images:STYLE_THUMBS, options:styleOptions, value:styleValue}, finishingField, {n:7, type:'quantity'}, ], right:[ {n:3, type:'size'}, {n:4, type:'tag', label:'Corrugated Board', value:'F Flute / E Flute / B Flute'}, {n:6, type:'addon', label:'Add-on', hint:'(multiple choice)', q:true, group:'addon', options:addonOpts, images:ADDON_THUMBS, values:addonValues}, ], spanFirst: true }; } } /* ========== BOX TYPES ========== */ const BOX_TYPES = [ {id:'rollEndTuckFront', label:'Roll-End Tuck Front Boxes', icon:'rollEndTuckFront'}, {id:'mailerWithHandle', label:'Mailer Boxes with Handles', icon:'mailerWithHandle'}, {id:'selfSealMailer', label:'Self-Seal Mailer Boxes', icon:'selfSealMailer'}, {id:'rollEndLockFront', label:'Roll-End Lock Front Boxes', icon:'rollEndLockFront'}, ]; let state = { boxType: 'rollEndTuckFront', style: 'Outside White Ink, Inside full color print', finishing: 'Matte Lamination', addons: [], }; /* ========== RENDER FUNCTIONS ========== */ function renderTypeGrid(){ const el = document.getElementById('eccm-typeGrid'); el.innerHTML = BOX_TYPES.map(t=>`

${ICONS[t.icon]}

${t.label}

${ICONS.checkTiny}

`).join(''); el.querySelectorAll('.eccm-type-card').forEach(card=>{ card.addEventListener('click', ()=>{ state.boxType = card.dataset.type; renderAll(); }); }); } function renderColumns(){ const cfg = getConfig(state.boxType); const mid = document.getElementById('eccm-colMiddle'); const right = document.getElementById('eccm-colRight'); const grid = document.querySelector('.eccm-grid'); grid.classList.add('eccm-paired-mode'); right.style.display = 'none'; const m = cfg.middle; const r = cfg.right; let html = ''; // spanFirst: first middle item spans 2 right items (Style spans Size + Corrugated Board) if(cfg.spanFirst){ html += `

${renderMiddleItem(m[0])}

${renderField(r[0])}

${renderField(r[1])}

`; // remaining rows 1:1 pairing for(let j=1;j

${renderMiddleItem(m[j])}

${renderField(r[rightIdx])}

`; } else { html += `

${renderMiddleItem(m[j])}

`; } } // extra right items beyond middle count for(let i=m.length+1;i

${renderMiddleItem(m[i])}

${renderField(r[i])}

`; } for(let i=pairCount;i${html}`; // Bind single image select (Style) document.querySelectorAll('.eccm-img-select.eccm-single').forEach(sel=>{ const head = sel.querySelector('.eccm-img-select__head'); const listOpts = sel.querySelectorAll('.eccm-img-select__list .eccm-img-opt'); 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'); }); listOpts.forEach(opt=>{ opt.addEventListener('click', (e)=>{ e.stopPropagation(); const value = opt.dataset.value; const thumb = opt.querySelector('.eccm-img-opt__thumb'); const headThumb = headOpt.querySelector('.eccm-img-opt__thumb'); if(thumb && headThumb){ headThumb.innerHTML = thumb.innerHTML; } 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); } }); }); }); // Bind multi image select (Add-on) document.querySelectorAll('.eccm-img-select.eccm-multi').forEach(sel=>{ const head = sel.querySelector('.eccm-img-select__head'); const listOpts = sel.querySelectorAll('.eccm-img-select__list .eccm-img-opt'); 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'); }); listOpts.forEach(opt=>{ opt.addEventListener('click', (e)=>{ e.stopPropagation(); if(opt.dataset.value === 'None'){ listOpts.forEach(o=>o.classList.remove('eccm-selected')); sel.classList.remove('eccm-open'); } else { opt.classList.toggle('eccm-selected'); 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; } requestAnimationFrame(equalizeColumns); }); }); // 悬停缩略图：add-on 下拉框显示大预览框 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'); if(!preview) return; 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', ()=>{ const preview = document.getElementById('eccm-hover-preview'); if(preview) preview.style.display = 'none'; }); }); // Remove tag on x click 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; } requestAnimationFrame(equalizeColumns); }); }); 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.style.height = ''; col2.style.height = ''; col3.style.height = ''; const maxH = Math.max(col1.offsetHeight, col2.offsetHeight, col3.offsetHeight); col1.style.height = maxH + 'px'; col2.style.height = maxH + 'px'; col3.style.height = maxH + 'px'; } function renderAll(){ renderTypeGrid(); renderColumns(); requestAnimationFrame(equalizeColumns); } window.addEventListener('resize', ()=>requestAnimationFrame(equalizeColumns)); // Close dropdowns on outside click 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'; }); } // Get Quote button 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 basePrices = {rollEndTuckFront:0.38, mailerWithHandle:0.52, selfSealMailer:0.45, rollEndLockFront:0.42}; const base = basePrices[state.boxType] || 0.40; 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.25, 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();