_list_"]'); dialog = document.querySelector('cart-note-dialog'); if (!pickyContent || !list || !dialog) return false; // if trigger already exists and is inside the current list, skip const existingTrigger = list.querySelector('.picky-gift-trigger'); if (existingTrigger) return true; pickyContent.appendChild(dialog); dialog.style.cssText = [ 'position:absolute', 'top:0', 'left:0', 'width:100%', 'height:100%', 'z-index:9999', 'transform:translateX(100%)', 'transition:transform 0.3s ease', 'display:block', 'visibility:visible', 'overflow-y:auto' ].join(';'); const closeBtn = dialog.querySelector('.gift-note-add__close'); if (closeBtn) { const freshCloseBtn = closeBtn.cloneNode(true); closeBtn.parentNode.replaceChild(freshCloseBtn, closeBtn); freshCloseBtn.addEventListener('click', e => { e.stopPropagation(); closeDialog(); }); } const addBtn = dialog.querySelector('dialog-close-button .button'); if (addBtn) { const freshAddBtn = addBtn.cloneNode(true); addBtn.parentNode.replaceChild(freshAddBtn, addBtn); freshAddBtn.addEventListener('click', e => { e.stopPropagation(); const inputTo = dialog.querySelector('[name="attributes[gift-note-to]"]'); const inputFrom = dialog.querySelector('[name="attributes[gift-note-from]"]'); const inputMsg = dialog.querySelector('[name="attributes[gift-note]"]'); fetch('/cart/update.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ attributes: { 'gift-note-to': inputTo ? inputTo.value : '', 'gift-note-from': inputFrom ? inputFrom.value : '', 'gift-note': inputMsg ? inputMsg.value.substring(0, 150) : '' } }) }).then(() => closeDialog()); }); } const label = dialog.querySelector('label[for="gift-for-mama-add"]'); if (label) { label.addEventListener('click', e => { e.preventDefault(); const cb = dialog.querySelector('#gift-for-mama-add'); if (giftInCart) { giftInCart = false; if (cb) cb.checked = false; fetch('/cart.js') .then(res => res.json()) .then(cart => { const giftItem = cart.items.find(item => item.variant_id === GIFT_VARIANT_ID); if (!giftItem) return; return fetch('/cart/change.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: giftItem.key, quantity: 0 }) }); }); } else { giftInCart = true; if (cb) cb.checked = true; fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: GIFT_VARIANT_ID, quantity: 1 }) }); } }); } triggerBtn = document.createElement('button'); triggerBtn.className = 'link-faded-reverse cart-note picky-gift-trigger'; triggerBtn.setAttribute('aria-expanded', 'false'); triggerBtn.style.cssText = 'padding: 30px 0 30px 16px;'; triggerBtn.innerHTML = 'Is this a gift?

'; triggerBtn.addEventListener('click', openDialog); list.appendChild(triggerBtn); return true; } // watch for cart re-renders // The slot renders inside the cart, so the cart root is already there and is the only // subtree this script ever touches. Observing it instead of document.body keeps the // callback off every unrelated mutation on the page. const root = document.querySelector('.picky-cart__content'); if (root) { let giftTimer = null; new MutationObserver(() => { clearTimeout(giftTimer); giftTimer = setTimeout(setup, 300); }).observe(root, { childList: true, subtree: true }); } setup(); }

Blog

Executive Director of The Art Production Fund, Casey Fremont On The Art Of Momming