/* Nutrition customization - shows nutrition in Easy bundle cart. * -------------------------------------------------------- */ const SF_TOKEN = '3e1071406c657d51faa7beedbecc569b'; const SF_ENDPOINT = '/api/2024-07/graphql.json'; // Helpers const norm = (s) => (s || '').toString().trim().toLowerCase(); const toNum = (v) => (v === null || v === undefined || v === '' ? 0 : Number(v)); const debounce = (fn, ms=120) => { let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a), ms);}; }; // Check if tags contain "supplement" const isSupplement = (tags) => tags.some(tag => norm(tag).includes('supplement')); const isNoWeight = (tags) => tags.some(tag => norm(tag).includes('no-weight')); // 1) Fetch all products (title, handle, metafields, AND TAGS) async function fetchAllProductsMeta() { const q = ` query { products(first: 100) { edges { node { id title handle tags metafields(identifiers:[ {namespace:"custom",key:"kcal"}, {namespace:"custom",key:"proteins"}, {namespace:"custom",key:"carbs"}, {namespace:"custom",key:"fat"}, {namespace:"custom",key:"fiber"}, {namespace:"custom",key:"sugars"}, {namespace:"custom",key:"max_portion"} {namespace:"custom",key:"recommended_portion"} {namespace:"custom",key:"product_pro_1"} {namespace:"custom",key:"rate"} ]) { key value } } } } }`; const res = await fetch(SF_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': SF_TOKEN }, body: JSON.stringify({ query: q }) }); const json = await res.json(); if (!json.data) { console.warn('[Nutrition] Storefront error:', json); return { byTitle:{}, byHandle:{} }; } const byTitle = {}; const byHandle = {}; json.data.products.edges.forEach(({node}) => { const pack = { handle: node.handle, title: node.title, tags: node.tags || [], isSupplement: isSupplement(node.tags || []) }; node.metafields.forEach(mf => { if (mf) pack[mf.key] = mf.value; }); byTitle[norm(node.title)] = pack; byHandle[norm(node.handle)] = pack; }); return { byTitle, byHandle }; } let META = { byTitle:{}, byHandle:{} }; // 2) Render small badges on every product card (left grid) function renderCardBadges() { const cards = document.querySelectorAll('.gbbProductItem'); cards.forEach(card => { const titleNode = card.querySelector('[class*="Title"]') || card.querySelector('h3, h4, .title, .product-title, .gbbProductTitle'); const t = norm(titleNode ? titleNode.textContent : ''); const meta = META.byTitle[t]; // Container (create once) let wrap = card.querySelector('.productsMetafieldWrapper'); if (!wrap) { wrap = document.createElement('div'); wrap.className = 'productsMetafieldWrapper'; // place above quantity/price bar const anchor = card.querySelector('[class*="price"], [class*="Price"], .gbbProductFooter') || card; anchor.parentNode.insertBefore(wrap, anchor); } /// if recommended=100%, dont show if (!meta.recommended_portion) recommendedInfo = "display:none;"; else recommendedInfo = "display:block;"; console.log ("recommendedInfo:",meta.recommended_portion+" "+recommendedInfo) console.log ("meta.product_pro_1:",meta.product_pro_1) if (!meta.product_pro_1) meta.product_pro_1=" "; console.log ("meta.product_pro_1 Processed:",meta.product_pro_1) // If no metafields, hide; else fill with badges if (!meta) { wrap.style.display = 'none'; } else { wrap.style.display = 'grid'; wrap.innerHTML = `

${toNum(meta.kcal)} Kcal • Recommended: ${meta.recommended_portion}

${meta.product_pro_1}

`; } }); } // 3) Compute & render totals in the right sidebar function ensureTotalsBox() { const list = document.querySelector('.gbbFooterProductsContainer'); if (!list) return null; let box = document.querySelector('#gbbTotalsNutritionBox'); if (!box) { box = document.createElement('div'); box.id = 'gbbTotalsNutritionBox'; box.className = 'gbbTotalsNutritionBox'; list.parentNode.insertBefore(box, list.nextSibling); } return box; } function recomputeSidebarTotals() { const rows = document.querySelectorAll('.gbbFooterProductWrapper'); const totals = { kcal:0, proteins:0, carbs:0, fat:0, sugars:0, fiber:0 }; total_lines_qty=0; rows.forEach(row => { const info = row.querySelector('.gbbFooterProductInfoContainer') || row; // title in the info container const titleNode = info.querySelector('strong, .product-title, [class*="Title"]') || info.firstElementChild; const title = norm(titleNode ? titleNode.textContent : ''); // quantity text like "x2" const qtyText = (row.textContent.match(/x(\d+)/) || [0,1])[1]; let qty = parseInt(qtyText, 10) || 1; const meta = META.byTitle[title]; if (meta) { // Apply supplement logic: if product has "supplement" tag, divide qty by 2 if (meta.isSupplement) { qty = qty / 2; } total_lines_qty += qty; console.log (" qty:", qty) console.log (" total_lines_qty:", total_lines_qty) totals.kcal += toNum(meta.kcal) * qty; totals.proteins += toNum(meta.proteins) * qty; totals.carbs += toNum(meta.carbs) * qty; totals.fat += toNum(meta.fat) * qty; totals.sugars += toNum(meta.sugars) * qty; totals.fiber += toNum(meta.fiber) * qty; } }); const box = ensureTotalsBox(); if (!box) return; total_lines_qty // totals are divided by quantity to get nutrition for 100 grams if (!totals.kcal == 0) { totals.kcal = totals.kcal / total_lines_qty; totals.proteins = totals.proteins/ total_lines_qty; totals.carbs = totals.carbs / total_lines_qty; totals.fat = totals.fat / total_lines_qty; totals.sugars = totals.sugars / total_lines_qty; totals.fiber = totals.fiber / total_lines_qty; } box.innerHTML = `

Nutrition (per 100 Grams)
${totals.kcal.toFixed(0)}kcal | Proteins ${totals.proteins.toFixed(0)}g | Carbs ${totals.carbs.toFixed(0)}g | Sugars ${totals.sugars.toFixed(0)}g | Fat ${totals.fat.toFixed(0)}g | Fiber ${totals.fiber.toFixed(0)}g |

`; } // 4) Observe DOM changes so the UI stays up to date when +/– or remove is clicked const updateAll = debounce(() => { renderCardBadges(); recomputeSidebarTotals(); }, 80); function setupObservers() { const root = document.body; const mo = new MutationObserver(updateAll); mo.observe(root, { childList:true, subtree:true }); // also wire the add buttons explicitly (helps on some themes) document.addEventListener('click', (e)=>{ if (e.target.closest('.gbbProductAddButton') || e.target.closest('.gbbFooterProductRemove') || /\bx[0-9]+\b/.test(e.target.textContent)) { updateAll(); } }); updateAll(); } // 5) Styles for badges & totals box (function injectCSS(){ const css = ` .productsMetafieldWrapper{ display:grid; grid-template-columns:repeat(2,minmax(100px,1fr)); gap:6px 12px; margin:8px 0 6px 0; font-size:13px; line-height:1.3; color:rgba(0,0,0,.85); } .productsMetafieldWrapper .variant_metafield{white-space:nowrap} .supplement-badge{ display:inline-block; background:#ff9800; color:#fff; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; margin-right:8px; margin-bottom:4px; } .gbbTotalsNutritionBox{margin:12px 0} .gbbTotalsNutritionBox .totals-card{ border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:14px; background:#fff; } .gbbTotalsNutritionBox .totals-title{ font-weight:600; margin-bottom:8px; } .gbbTotalsNutritionBox .totals-grid{ display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:6px 16px; font-size:14px; line-height:1.3; } @media (max-width: 640px){ .gbbTotalsNutritionBox .totals-grid{grid-template-columns:1fr} } `; const s = document.createElement('style'); s.textContent = css; document.head.appendChild(s); })(); // Bootstrap (async function init() { try { META = await fetchAllProductsMeta(); console.log('[Nutrition] Loaded products:', META); } catch (e) { console.warn('[Nutrition] fetch failed', e); META = { byTitle:{}, byHandle:{} }; } setupObservers(); })(); // Add a marker class while the qty controls exist function syncEBQtyButtons() { document.querySelectorAll('.gbbProductButtonWrapper').forEach(w => { w.classList.toggle('eb--qty', !!w.querySelector('.gbbProductQuantityHTML')); }); } syncEBQtyButtons(); new MutationObserver(syncEBQtyButtons).observe(document.body,{subtree:true,childList:true}); document.addEventListener('click', ()=>setTimeout(syncEBQtyButtons, 0));

Blogs

Join our email list