GLUTEN-FREE Sampler Box

Subarzsweets Verified independent store

→

Pick 4 flavors or let us choose for you! 0 / 4 selected Gluten Free Baker's Assortment Gluten Free Spiced Fig Gluten Free Traditional Chocolate Chip Gluten Free Lemon Thyme Gluten Free Apple Trilogy Gluten Free Chocolate Peppermint Gluten Free Salted Apricot Caramel Gluten Free Double Chocolate Chip Almond Gluten Free Chocolate Raspberry /* --- Top actions row layout (QTY + ATC) and section stack --- */ .pd-layout{display:grid;grid-template-columns:1fr;gap:16px;width:100%;max-width:100%} .pd-actions{display:flex;gap:12px;align-items:stretch;flex-wrap:nowrap;width:100%} /* qty compact */ .pd-actions :is(.product__quantity,.product-form__input,.product__controls,.quantity):has([name="quantity"]){ width:auto !important; max-width:max-content !important; flex:0 0 auto !important; display:inline-flex !important; align-items:center; gap:.5rem; } .pd-actions .quantity__input,input[type="number"][name="quantity"]{ width:56px !important; min-width:56px !important; line-height:1.2 !important; padding:.45rem .6rem !important; } /* ATC fills remaining space */ .pd-actions :is(.product__buy,.product-form__buttons,.product__actions){flex:1 1 auto !important; min-width:0; align-items:center} .pd-actions :is(.product__buy,.product-form__buttons,.product__actions) [type="submit"]{width:100% !important; height:auto !important; line-height:1.2 !important; padding:.9rem 1.25rem !important;} @media (max-width:640px){ .pd-actions{flex-direction:column} } /* --- Flavor block styling --- */ .pd-flavors{padding:1rem;border:1px solid #e5e5e5;border-radius:.75rem;box-sizing:border-box;max-width:100%} .pd-flavors__head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem} .pd-flavors__label{font-weight:700} .pd-flavors__counter{opacity:.8;font-size:.95rem} .pd-flavors__grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0} @media (min-width:900px){ .pd-flavors__grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (min-width:1200px){ .pd-flavors__grid{grid-template-columns:repeat(3,minmax(0,1fr));} } .pd-flavors__item{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;min-height:86px;border:1px dashed #ddd;border-radius:12px;cursor:pointer} .pd-flavors__item input{width:1.15em;height:1.15em;accent-color:currentColor} .pd-flavors__item span{overflow-wrap:anywhere} .pd-flavors__item[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .pd-flavors__help{margin:.5rem 0 0;color:#b00020;min-height:1.25rem} /* containment/safety */ .product__form .pd-flavors{width:100% !important;max-width:100% !important;overflow-x:hidden !important} .pd-flavors *{max-width:100%;white-space:normal} document.addEventListener('DOMContentLoaded', function(){ var picker = document.getElementById('pd-flavors'); if(!picker) return; var MAX = 4; var checks = Array.from(picker.querySelectorAll('input[type="checkbox"]')); var counter = picker.querySelector('.pd-flavors__counter'); var help = picker.querySelector('.pd-flavors__help'); var hidden = picker.querySelector('input[type="hidden"]'); function selectedValues(){ return checks.filter(cb=>cb.checked).map(cb=>cb.value); } function render(changed){ var sel = selectedValues(); if(sel.length > MAX && changed && changed.checked){ changed.checked = false; sel = selectedValues(); } var atMax = sel.length >= MAX; checks.forEach(function(cb){ var label = cb.closest('label'); if(!cb.checked){ cb.disabled = atMax; if(label) label.setAttribute('aria-disabled', atMax?'true':'false'); } else { cb.disabled = false; if(label) label.setAttribute('aria-disabled','false'); } }); counter.textContent = sel.length + ' / ' + MAX + ' selected'; hidden.value = sel.join(', '); help.textContent = ''; } checks.forEach(cb=>cb.addEventListener('change', function(){ render(cb); })); render(); /* --- Move pieces into layout: actions (qty+ATC) above, flavors below --- */ var form = picker.closest('form[action^="/cart/add"]') || document.querySelector('.product__form form[action^="/cart/add"]') || document.querySelector('form[action^="/cart/add"]'); if(form){ // find qty row and buy row var qty = form.querySelector('input[name="quantity"]'); var qtyRow = qty && (qty.closest('.product__quantity') || qty.closest('.product__controls') || qty.closest('.product-form__input') || qty.closest('.quantity') || qty.closest('div')); var submit = form.querySelector('[type="submit"]'); var buyRow = submit && (submit.closest('.product__buy') || submit.closest('.product-form__buttons') || submit.closest('.product__actions') || submit.closest('div')); // create layout wrapper once var layout = form.querySelector('.pd-layout'); if(!layout){ layout = document.createElement('div'); layout.className = 'pd-layout'; (qtyRow || buyRow || picker).parentNode.insertBefore(layout, (qtyRow || buyRow || picker)); } // actions row holds qty + ATC var actions = layout.querySelector('.pd-actions'); if(!actions){ actions = document.createElement('div'); actions.className = 'pd-actions'; layout.appendChild(actions); } if(qtyRow) actions.appendChild(qtyRow); if(buyRow) actions.appendChild(buyRow); // flavors below layout.appendChild(picker); } /* --- Ensure the property is submitted for ATC + Buy Now; require exactly 4 --- */ function ensureProp(targetForm){ if(!targetForm) return; var field = targetForm.querySelector('input[name="properties[Flavors]"]'); if(!field){ field = document.createElement('input'); field.type='hidden'; field.name='properties[Flavors]'; targetForm.appendChild(field); } field.value = hidden.value; field.disabled = false; } // ATC submit if(form){ form.addEventListener('submit', function(e){ if(selectedValues().length !== MAX){ e.preventDefault(); help.textContent = 'Please select exactly ' + MAX + ' flavors before adding to cart.'; return; } ensureProp(form); }, true); } // Dynamic checkout document.addEventListener('click', function(e){ var payBtn = e.target.closest('.shopify-payment-button__button, .shopify-payment-button__button--unbranded, .shopify-payment-button button'); if(payBtn){ if(selectedValues().length !== MAX){ e.preventDefault(); help.textContent = 'Please select exactly ' + MAX + ' flavors before buying.'; return; } ensureProp(payBtn.closest('form') || form); } }, true); }); /* Minimal hookup: - Reads checked boxes inside #pd-flavors (your current grid) - Writes Flavor 1..4 + Flavors to ALL add-to-cart forms on the page - Does NOT change your grid, layout, or disable checkboxes */ document.addEventListener('DOMContentLoaded', function () { var root = document.getElementById('pd-flavors'); if (!root) return; // All flavor checkboxes in your existing grid var checks = Array.from(root.querySelectorAll('input[type="checkbox"]')); // All product add-to-cart forms on the page (handles quick add / dynamic checkout too) var forms = Array.from(document.querySelectorAll('form[action^="/cart/add"]')); if (forms.length === 0) return; // Ensure hidden fields exist on a given form function ensureHiddenSet(form){ function grab(name){ var el = form.querySelector('input[name="'+name+'"]'); if (!el) { el = document.createElement('input'); el.type='hidden'; el.name=name; form.appendChild(el); } el.disabled = false; return el; } return { f1: grab('properties[Flavor 1]'), f2: grab('properties[Flavor 2]'), f3: grab('properties[Flavor 3]'), f4: grab('properties[Flavor 4]'), all: grab('properties[Flavors]') }; } // Map each form -> its hidden inputs var hiddenMap = new Map(); forms.forEach(function(f){ hiddenMap.set(f, ensureHiddenSet(f)); }); // Read current selections (in the order the customer clicked) function selectedValues(){ // Keep DOM order; if you want click-order, track timestamps per checkbox return checks.filter(cb => cb.checked).map(cb => cb.value); } // Write values into every form’s hidden inputs (no validation here) function writeHidden(){ var sel = selectedValues().slice(0,4); // only first 4 matter for Flavor 1..4 hiddenMap.forEach(function(set){ set.f1.value = sel[0] || ''; set.f2.value = sel[1] || ''; set.f3.value = sel[2] || ''; set.f4.value = sel[3] || ''; set.all.value = sel.join(', '); }); } // Keep properties updated as the user checks/unchecks checks.forEach(function(cb){ cb.addEventListener('change', writeHidden); }); writeHidden(); // Refresh right before any submit / dynamic checkout click forms.forEach(function(form){ form.addEventListener('submit', function(){ writeHidden(); }, true); }); document.addEventListener('click', function(e){ // Dynamic checkout buttons var pay = e.target && e.target.closest('.shopify-payment-button__button, .shopify-payment-button__button--unbranded, .shopify-payment-button button'); if (pay) writeHidden(); // Add-to-cart buttons (covers AJAX handlers) var atc = e.target && e.target.closest('button[type="submit"], [name="add"]'); if (atc) writeHidden(); }, true); }); If you can't decide between our many gluten-free options, this is the box for you. Enjoy 24 handcrafted Subarz with up to 4 delicious flavors or let us choose a Baker's assortment for a delightful surprise. Please note that while ingredients are gluten-free, these Subarz are prepared in a kitchen that contains gluten. What’s Inside -Quantity: 24 Subarz (two dozen) -Flavors: Choose up to 4 gluten free flavors. Or select Baker’s Assortment for a curated assortment. Show more