/* remove aeropress text */ /* Remove "AeroPress Coffee Maker -" from product names */ function removeAeroPressPrefix() { document.querySelectorAll('._dyn_productInfo ._dyn_productName p').forEach(function (el) { el.childNodes.forEach(function (node) { if (node.nodeType === Node.TEXT_NODE) { node.textContent = node.textContent.replace( /^AeroPress Coffee Maker\s*-\s*/i, '' ); } }); }); } /* ========================================================= COFFEE MAKER SUBTITLES --------------------------------------------------------- Reads custom.collection_sub_heading from the Dynamatic product card aria-label. ========================================================= */ (function () { function addCoffeeMakerSubtitles() { $('._dyn_productItem').each(function () { const $product = $(this); const $container = $product.closest('._dyn_gridContainer'); if (!$container.length) { return; } const $category = $container .find('p._dyn_productCategory') .first(); if ( !$category.length || !$category .text() .trim() .toLowerCase() .startsWith('1. add coffee makers') ) { return; } /* Get subtitle from aria-label */ const ariaLabel = $product.attr('aria-label') || ''; const match = ariaLabel.match( /custom\.collection_sub_heading:\s*([^;]+)/i ); if (!match) { return; } const subtitle = match[1].trim(); if (!subtitle) { return; } /* Product name */ const $productName = $product .find('._dyn_productName') .first(); if (!$productName.length) { return; } /* Prevent duplicates */ if ( $product.find('.coffee-maker-subtitle').length ) { return; } /* Add subtitle after product name */ $productName.after( $('

') .text(subtitle) ); }); } /* Initial load */ setTimeout( addCoffeeMakerSubtitles, 2000 ); /* Dynamatic re-render support */ new MutationObserver(function () { addCoffeeMakerSubtitles(); }).observe(document.body, { childList: true, subtree: true }); })(); /* Run after Dynamatic loads */ setTimeout(removeAeroPressPrefix, 2000); /* Also catch products Dynamatic adds/re-renders later */ new MutationObserver(function () { removeAeroPressPrefix(); }).observe(document.body, { childList: true, subtree: true }); /* Watch only for relevant Dynamatic changes */ const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { /* Button becomes disabled */ if ( mutation.type === 'attributes' && mutation.attributeName === 'disabled' ) { updateBundleButton(mutation.target); } /* Dynamatic adds/re-renders buttons */ if (mutation.type === 'childList') { mutation.addedNodes.forEach(function (node) { if (node.nodeType !== Node.ELEMENT_NODE) return; /* The added element itself is the button */ if (node.matches && node.matches('._dyn_ctaButton')) { updateBundleButton(node); } /* Or the button is inside the added element */ if (node.querySelectorAll) { node.querySelectorAll('._dyn_ctaButton').forEach(updateBundleButton); } }); } }); }); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['disabled'] }); /* change dropdown/mask it and use color selectors */ $(document).ready(function () { // ========================================================= // DYNAMATIC COLOR SELECTOR -> COLOR SWATCHES // ========================================================= var colorNames = [ 'clear', 'blue', 'green', 'pink', 'purple', 'red', 'black', 'cream', 'white', 'silver' ]; function convertColorSelectors() { $('select[aria-label="Select a variant"]').each(function () { var $select = $(this); // Already converted if ($select.data('color-swatches-ready')) { return; } var $options = $select.find('option'); if (!$options.length) { return; } // ------------------------------------------------------- // CHECK IF ALL OPTIONS ARE COLORS // ------------------------------------------------------- var isColorSelector = true; $options.each(function () { var optionText = $(this) .text() .trim() .toLowerCase(); if (!colorNames.includes(optionText)) { isColorSelector = false; return false; } }); // Not a color selector -> leave original select alone if (!isColorSelector) { return; } // ------------------------------------------------------- // BUILD SWATCH CONTAINER // ------------------------------------------------------- var $swatches = $('

'); $options.each(function () { var $option = $(this); var value = $option.val(); var label = $option.text().trim(); var colorClass = label .toLowerCase() .replace(/\s+/g, '-') .replace(/[^a-z0-9-]/g, ''); var $swatch = $(''); $swatch .addClass('custom-color-swatch') .addClass('color-' + colorClass) .attr('data-value', value) .attr('data-color', label) .attr('aria-label', label) .attr('title', label); // ----------------------------------------------------- // INITIAL SELECTED STATE // ----------------------------------------------------- if ($option.is(':selected')) { $swatch.addClass('selected'); } // ----------------------------------------------------- // SWATCH CLICK // ----------------------------------------------------- $swatch.on('click', function (e) { e.preventDefault(); var select = $select[0]; if (!select) { return; } // Set actual select value select.value = value; // Explicitly select correct option $options.each(function () { this.selected = (this.value === value); }); // --------------------------------------------------- // TELL DYNAMATIC THE VARIANT CHANGED // --------------------------------------------------- select.dispatchEvent( new Event('input', { bubbles: true }) ); select.dispatchEvent( new Event('change', { bubbles: true }) ); // --------------------------------------------------- // UPDATE VISUAL STATE // --------------------------------------------------- $swatches .find('.custom-color-swatch') .removeClass('selected'); $(this).addClass('selected'); console.log( '[Dynamatic Color]', label, value ); }); $swatches.append($swatch); }); // ------------------------------------------------------- // ONLY MODIFY DOM AFTER SWATCHES ARE READY // ------------------------------------------------------- if ($swatches.children().length === $options.length) { $select.before($swatches); // Mark as successfully converted $select.data('color-swatches-ready', true); // Hide original select $select.css('display', 'none'); } }); } // ========================================================= // INITIAL RUN // ========================================================= convertColorSelectors(); // ========================================================= // DYNAMATIC LOAD / RE-RENDER SUPPORT // // Instead of observing the entire DOM, check periodically // for newly rendered selectors. // ========================================================= setInterval(function () { convertColorSelectors(); }, 500); }); (() => { const dummyColors = { 'Original': { color: 'Black', className: 'color-black' }, 'Go': { color: 'Black', className: 'color-black' }, 'Clear XL': { color: 'Silver', className: 'color-silver' }, 'Original XL': { color: 'Black', className: 'color-black' } }; function addDummyColorSelectors() { $('._dyn_productItem').each(function () { const $item = $(this); const title = $item .find('._dyn_productName, [class*="productName"]') .first() .text() .trim(); const color = dummyColors[title]; if (!color) return; // Already added if ($item.find('.custom-color-swatches').length) return; const $swatches = $(`

`); $item .find('._dyn_ctaButton') .first() .before($swatches); }); } function init() { addDummyColorSelectors(); const observer = new MutationObserver(() => { addDummyColorSelectors(); }); observer.observe(document.body, { childList: true, subtree: true }); } // Make sure DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })(); /* ========================================================= DYNAMATIC PRODUCT CATEGORY ACCORDION 1. Add Coffee Makers - Always open - NOT an accordion - No caret All other categories - Accordion - Closed initially - Caret up when closed - Caret down when open ========================================================= */ (function () { /* ========================================================= SETTINGS ========================================================= */ var CATEGORY_DESCRIPTION = 'Coffee or Accessories - all count toward your savings'; var CARET_SVG = ` `; /* ========================================================= GET PRODUCT GRID ========================================================= */ function getProductGrid($category) { var $container = $category.closest('._dyn_gridContainer'); if (!$container.length) { return $(); } var $grid; // Primary $grid = $container .find('._dyn_productGrid') .first(); if ($grid.length) { return $grid; } // Fallback $grid = $container .find('._dyn_productItems') .first(); if ($grid.length) { return $grid; } // Fallback $grid = $container .find('._dyn_products') .first(); if ($grid.length) { return $grid; } return $(); } /* ========================================================= GET CATEGORY TITLE ========================================================= */ function getCategoryTitle($category) { return $category .clone() .children() .remove() .end() .text() .trim() .toLowerCase(); } /* ========================================================= CHECK COFFEE MAKERS ========================================================= */ function isCoffeeMakerCategory($category) { var title = getCategoryTitle($category); return title.indexOf( '1. add coffee makers' ) === 0; } /* ========================================================= ADD DESCRIPTION ========================================================= */ function addCategoryDescription($category) { var title = getCategoryTitle($category); var shouldHaveDescription = title.indexOf('2. add accessories') === 0 || title.indexOf('3. add coffee') === 0; if (!shouldHaveDescription) { return; } // Already exists if ( $category .next('.dyn-category-description') .length ) { return; } $category.after( '

' + CATEGORY_DESCRIPTION + '

' ); } /* ========================================================= ADD CARET ========================================================= */ function addCaret($category) { if ( $category.find( '.dyn-category-caret-wrap' ).length ) { return; } $category.append( '' + CARET_SVG + '' ); } /* ========================================================= UPDATE CARET ========================================================= */ function updateCaret( $category, isOpen ) { var $caret = $category.find( '.dyn-category-caret' ); if (!$caret.length) { return; } // Open = down // Closed = up $caret.css( 'transform', isOpen ? 'rotate(0deg)' : 'rotate(180deg)' ); } /* ========================================================= INITIALIZE CATEGORY ========================================================= */ function initializeCategory($category) { if ( $category.data( 'dyn-category-initialized' ) ) { return; } var $grid = getProductGrid($category); if (!$grid.length) { return; } $category.data( 'dyn-category-initialized', true ); /* ------------------------------------------------------- DESCRIPTION ------------------------------------------------------- */ addCategoryDescription($category); /* ------------------------------------------------------- COFFEE MAKERS ALWAYS OPEN NOT AN ACCORDION ------------------------------------------------------- */ if ( isCoffeeMakerCategory($category) ) { $category .removeClass( 'accordion-category accordion-open' ) .removeAttr('role') .removeAttr('tabindex') .removeAttr('aria-expanded'); // Always visible $grid.show(); // Hide quantity controls for Coffee Makers $grid .find('._dyn_quantityRow') .hide(); return; } /* ------------------------------------------------------- ALL OTHER CATEGORIES ACCORDION + OPEN INITIALLY ------------------------------------------------------- */ $category .addClass('accordion-category accordion-open') .attr('role', 'button') .attr('tabindex', '0') .attr( 'aria-expanded', 'true' ); addCaret($category); // OPEN initially $grid.show(); updateCaret( $category, true ); } /* ========================================================= STICKY BUNDLE BAR --------------------------------------------------------- Compare scroll position against the bundle bar's ORIGINAL document position. ========================================================= */ (function () { let initialized = false; let originalBarTop = null; let barMoved = false; let lastScrollY = window.scrollY; function initBundleBar() { if (initialized) return; const bar = document.querySelector('._dyn_bundleBarContainer'); const header = document.querySelector('store-header'); if (!bar || !header) { return; } /* ------------------------------------------------------- GET ORIGINAL DOCUMENT POSITION ------------------------------------------------------- */ const rect = bar.getBoundingClientRect(); originalBarTop = rect.top + window.scrollY; /* ------------------------------------------------------- INITIAL STATE ------------------------------------------------------- */ bar.style.order = '-1'; barMoved = false; lastScrollY = window.scrollY; initialized = true; console.log( 'Sticky bundle bar initialized:', originalBarTop ); } function updateBundleBar() { if (!initialized) { initBundleBar(); return; } const bar = document.querySelector('._dyn_bundleBarContainer'); const header = document.querySelector('store-header'); if (!bar || !header) { return; } const scrollY = window.scrollY; const headerHeight = header.getBoundingClientRect().height; const triggerPoint = scrollY + headerHeight + 20; /* ------------------------------------------------------- SCROLL DOWN ------------------------------------------------------- */ if ( triggerPoint >= originalBarTop && !barMoved ) { barMoved = true; bar.style.order = '-1'; bar.style.setProperty('bottom', 'unset', 'important'); //bar.style.setProperty('top', headerHeight + 'px', 'important'); bar.style.setProperty('top', '0px', 'important'); bar.style.setProperty('z-index', '9999', 'important'); } /* ------------------------------------------------------- SCROLL UP ------------------------------------------------------- */ if ( triggerPoint < originalBarTop && barMoved ) { barMoved = false; bar.style.order = '-1'; } lastScrollY = scrollY; } /* ------------------------------------------------------- WAIT FOR DYNAMATIC ------------------------------------------------------- */ function start() { initBundleBar(); if (initialized) { window.addEventListener( 'scroll', updateBundleBar, { passive: true } ); window.addEventListener( 'resize', function () { /* Don't recalculate originalBarTop here. The original document position is our reference. */ updateBundleBar(); }, { passive: true } ); return; } /* Dynamatic hasn't rendered the bar yet. Watch until it appears. */ const observer = new MutationObserver(function () { initBundleBar(); if (initialized) { observer.disconnect(); window.addEventListener( 'scroll', updateBundleBar, { passive: true } ); window.addEventListener( 'resize', updateBundleBar, { passive: true } ); } }); observer.observe( document.body, { childList: true, subtree: true } ); } /* end of sticky */ /* progress bar text fix */ (() => { function updateProgressLabels() { $('.dyn_progress').each(function () { const $progress = $(this); const $steps = $progress.find('figure > span'); const $labels = $progress.find('figcaption > span'); // Step 2 → show "Unlocked" $labels.eq(2).toggleClass( 'progress-unlocked', $steps.eq(1).attr('data-filled') === 'true' ); // Step 3 → show "+3 items" $labels.eq(3).toggleClass( 'progress-unlocked', $steps.eq(2).attr('data-filled') === 'true' ); }); } // Initial updateProgressLabels(); // Watch Dynamatic progress changes const observer = new MutationObserver(function () { updateProgressLabels(); }); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-filled'] }); })(); /* ------------------------------------------------------- PAGE LOAD ------------------------------------------------------- */ if ( document.readyState === 'loading' ) { document.addEventListener( 'DOMContentLoaded', start ); } else { start(); } })(); /* ========================================================= COFFEE MAKER ADD ========================================================= */ $(document).on( 'click', '._dyn_productItem ._dyn_ctaButton', function () { var $button = $(this); var $product = $button.closest('._dyn_productItem'); if (!$product.length) { return; } /* Only Coffee Maker products */ if ( !getCoffeeMakerProducts() .filter($product) .length ) { return; } } ); /* ========================================================= COFFEE MAKER REMOVE --------------------------------------------------------- Use mousedown so we capture the image BEFORE Dynamatic removes the bundle item. ========================================================= */ $(document).on( 'mousedown', '._dyn_productItems ._dyn_removeBtn', function () { var imageKey = getCoffeeMakerImageKey( $(this) .closest('._dyn_productItem') .find('._dyn_productImage') .attr('src') ); if (!imageKey) { return; } var $product = findCoffeeMakerByImage(imageKey); } ); /* ========================================================= INITIALIZE ALL CATEGORIES ========================================================= */ function initializeCategories() { $('p._dyn_productCategory').each(function () { var $category = $(this); initializeCategory($category); // Coffee Makers only if (isCoffeeMakerCategory($category)) { var $grid = getProductGrid($category); if ($grid.length) { // Hide quantity $grid .find('._dyn_quantityRow') .hide(); } } }); } /* ========================================================= ACCORDION CLICK ========================================================= */ $(document).on( 'click', 'p._dyn_productCategory.accordion-category', function () { var $category = $(this); var $grid = getProductGrid($category); if (!$grid.length) { return; } var $seeMore = $grid.siblings('.dyn-see-more-wrapper'); var isOpen = $category.hasClass('accordion-open'); if (isOpen) { // CLOSE $category .removeClass('accordion-open') .attr('aria-expanded', 'false'); updateCaret( $category, false ); $grid .stop(true, true) .slideUp(300); $seeMore .stop(true, true) .slideUp(300); } else { // OPEN $category .addClass('accordion-open') .attr('aria-expanded', 'true'); updateCaret( $category, true ); $grid .stop(true, true) .slideDown(300); $seeMore .stop(true, true) .slideDown(300); } } ); /* ========================================================= KEYBOARD SUPPORT ========================================================= */ $(document).on( 'keydown', 'p._dyn_productCategory.accordion-category', function (e) { if ( e.key !== 'Enter' && e.key !== ' ' ) { return; } e.preventDefault(); $(this).trigger('click'); } ); /* ========================================================= INITIAL LOAD ========================================================= */ $(document).ready(function () { setTimeout( initializeCategories, 300 ); }); /* ========================================================= DYNAMATIC RE-RENDER SUPPORT ========================================================= */ var observer = new MutationObserver( function (mutations) { var needsInit = false; mutations.forEach( function (mutation) { mutation.addedNodes.forEach( function (node) { if ( node.nodeType !== 1 ) { return; } if ( node.matches && node.matches( 'p._dyn_productCategory' ) ) { needsInit = true; } if ( node.querySelector && node.querySelector( 'p._dyn_productCategory' ) ) { needsInit = true; } } ); } ); if (needsInit) { initializeCategories(); } } ); observer.observe( document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] } ); })(); /* ========================================================= DISABLE BUTTON IF NO COFFEE MAKER ADDED ========================================================= */ (() => { function getImageKey(src) { return decodeURIComponent( (src || '') .split('?')[0] .split('/') .pop() .toLowerCase() ); } function updateCheckout() { /* ========================================================= GET COFFEE MAKER IMAGES FROM CATEGORY 1 ========================================================= */ const coffeeMakerImages = new Set( $('p._dyn_productCategory') .filter((_, el) => $(el) .text() .trim() .toLowerCase() .startsWith('1. add coffee makers') ) .first() .closest('._dyn_gridContainer') .find('._dyn_productItem img') .map(function () { return getImageKey(this.src); }) .get() ); /* ========================================================= CHECK CURRENT BUNDLE PRODUCTS ========================================================= */ let hasCoffeeMaker = false; $('._dyn_productItems ._dyn_productImage').each(function () { const bundleImage = getImageKey(this.src); if (coffeeMakerImages.has(bundleImage)) { hasCoffeeMaker = true; return false; } }); /* ========================================================= UPDATE CHECKOUT ========================================================= */ const $actions = $('._dyn_actions'); const $checkout = $actions.find('._dyn_btnAdd'); /* ========================================================= DISABLE ALL COFFEE MAKERS IF ONE IS ALREADY ADDED ========================================================= */ const $coffeeMakerContainer = $('p._dyn_productCategory') .filter((_, el) => $(el) .text() .trim() .toLowerCase() .startsWith('1. add coffee makers') ) .first() .closest('._dyn_gridContainer'); $coffeeMakerContainer .find('._dyn_productItem') .each(function () { const $product = $(this); const $button = $product .find('._dyn_ctaButton') .first(); if (!$button.length) { return; } /* If ANY coffee maker exists in the bundle, disable ALL coffee maker buttons. If no coffee maker exists, enable ALL coffee maker buttons. */ $button .prop('disabled', hasCoffeeMaker) .toggleClass( 'coffee-maker-disabled', hasCoffeeMaker ); }); if (!$checkout.length) return; // Add/remove class on the actions container $actions.toggleClass( 'coffee-maker-required', !hasCoffeeMaker ); // Disable/enable Checkout only $checkout.prop( 'disabled', !hasCoffeeMaker ); console.log( hasCoffeeMaker ? '✓ Coffee Maker selected — Checkout enabled' : '✕ No Coffee Maker — Checkout disabled' ); } /* ========================================================= INITIAL CHECK ========================================================= */ updateCheckout(); /* ========================================================= DYNAMATIC RE-RENDER SUPPORT ========================================================= */ const observer = new MutationObserver(() => { updateCheckout(); }); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] }); })(); /* ========================================================= COFFEE TYPE PILLS --------------------------------------------------------- Aeropress / W.A.C. filter for Coffee category ========================================================= */ (function () { function getCoffeeCategory() { return $('p._dyn_productCategory').filter(function () { return $(this) .clone() .children() .remove() .end() .text() .trim() .toLowerCase() .startsWith('3. add coffee'); }).first(); } function setCoffeeType($container, value) { $container .find('._dyn_productGrid ._dyn_select') .each(function () { const select = this; const $option = $(select) .find('option') .filter(function () { return $(this) .text() .trim() .toLowerCase() === value.toLowerCase(); }) .first(); if (!$option.length) return; const variantValue = $option.val(); select.value = variantValue; $(select) .find('option') .each(function () { this.selected = this.value === variantValue; }); select.dispatchEvent( new Event('input', { bubbles: true }) ); select.dispatchEvent( new Event('change', { bubbles: true }) ); }); } function addCoffeeTypeButtons() { const $category = getCoffeeCategory(); if (!$category.length) { return; } const $container = $category.closest( '._dyn_gridContainer' ); if (!$container.length) { return; } if ( $container.find( '.coffee-type-pills' ).length ) { return; } const $pills = $(`

`); const $description = $container .find( '.dyn-category-description' ) .first(); if (!$description.length) { return; } $description.after( $pills ); $pills.on( 'click', '.coffee-type-pill', function () { const $button = $(this); const value = $button.attr( 'data-value' ); $pills .find( '.coffee-type-pill' ) .removeClass( 'active' ); $button.addClass( 'active' ); setCoffeeType( $container, value ); } ); setCoffeeType( $container, 'AeroPress' ); } function init() { addCoffeeTypeButtons(); } if ( document.readyState === 'loading' ) { document.addEventListener( 'DOMContentLoaded', init ); } else { init(); } const observer = new MutationObserver(function () { addCoffeeTypeButtons(); }); observer.observe( document.body, { childList: true, subtree: true } ); })(); /* end of aeropress / wac filter */ /* ========================================================= COFFEE ROAST FILTERS ========================================================= */ (() => { function initCoffeeRoast() { const categories = document.querySelectorAll( 'p._dyn_productCategory' ); let coffeeContainer = null; categories.forEach(category => { const text = category.textContent.trim(); if (/^\d+\.\s*add coffee\b/i.test(text)) { coffeeContainer = category.closest('._dyn_gridContainer'); } }); if (!coffeeContainer) return; const productGrid = coffeeContainer.querySelector( '._dyn_productGrid' ); if (!productGrid) return; const products = productGrid.querySelectorAll( '._dyn_productItem' ); if (!products.length) return; /* * If pills already exist, just make sure roast data * is mapped onto the current product cards. */ products.forEach(product => { const ariaLabel = product.getAttribute('aria-label') || ''; const match = ariaLabel.match( /custom\.type:\s*([^;]+)/i ); product.setAttribute( 'data-coffee-roast', match ? match[1].trim() : '' ); }); /* * Create pills only once. */ let roastPills = coffeeContainer.querySelector( '.coffee-roast-pills' ); if (!roastPills) { roastPills = document.createElement('div'); roastPills.className = 'coffee-roast-pills'; roastPills.innerHTML = ` `; /* * Directly before the product grid. */ productGrid.parentNode.insertBefore( roastPills, productGrid ); roastPills.addEventListener('click', function (e) { const button = e.target.closest( '.coffee-roast-pill' ); if (!button) return; const selectedRoast = button.getAttribute('data-roast'); /* * Clicking active button clears filter. */ if (button.classList.contains('active')) { button.classList.remove('active'); productGrid .querySelectorAll('._dyn_productItem') .forEach(product => { product.style.display = ''; }); return; } /* * Set active button. */ roastPills .querySelectorAll('.coffee-roast-pill') .forEach(btn => { btn.classList.remove('active'); }); button.classList.add('active'); /* * Filter products. */ productGrid .querySelectorAll('._dyn_productItem') .forEach(product => { const productRoast = product.getAttribute( 'data-coffee-roast' ) || ''; product.style.display = productRoast.toLowerCase() === selectedRoast.toLowerCase() ? '' : 'none'; }); }); } } /* * Run immediately. */ initCoffeeRoast(); /* * Dynamatic can render the bundle asynchronously * and can also re-render parts of the DOM. */ const observer = new MutationObserver(() => { initCoffeeRoast(); }); observer.observe(document.body, { childList: true, subtree: true }); })(); /* progress bar fix */ function addZeroPercent() { $('.dyn_progress figcaption').each(function () { const $figcaption = $(this); if ($figcaption.find('.zero-percent').length) return; $('0') .insertBefore($figcaption.children().first()); }); } /* INITIAL LOAD */ $(document).ready(function () { addZeroPercent(); }); /* DYNAMATIC RE-RENDER SUPPORT */ const zeroPercentObserver = new MutationObserver(function () { addZeroPercent(); }); zeroPercentObserver.observe(document.body, { childList: true, subtree: true }); /* ===================================================== MAX 4 ITEMS code block ===================================================== */ (() => { if (window.__bundleLimitClickHandler) { document.removeEventListener( 'click', window.__bundleLimitClickHandler, true ); } const MAX_BUNDLE_ITEMS = 4; /* ===================================================== GET TOTAL ITEMS ALREADY IN BUNDLE ===================================================== */ function getBundleTotal() { const wrapper = document.querySelector( '._dyn_productItemsWrapper' ); if (!wrapper) return 0; let total = 0; wrapper .querySelectorAll( '._dyn_productItems > ._dyn_productItem' ) .forEach(item => { const badge = item.querySelector( '._dyn_quantityBadge' ); if (badge) { const match = badge.textContent.match(/(\d+)/); total += match ? parseInt(match[1], 10) : 1; } else { total += 1; } }); return total; } /* ===================================================== GET QUANTITY FROM A PRODUCT CARD ===================================================== */ function getQuantity(quantityRow) { const span = quantityRow.querySelector('span'); if (!span) return 1; const value = parseInt( span.textContent.trim(), 10 ); return Number.isFinite(value) ? value : 1; } /* ===================================================== NEW TEST: RESET OTHER PRODUCT QUANTITIES ===================================================== */ function resetOtherQuantities(activeRow) { document .querySelectorAll( '._dyn_quantityRow' ) .forEach(row => { /* * Ignore the quantity row * we just clicked. */ if (row === activeRow) { return; } /* * Ignore the actual bundle/cart. */ if ( row.closest( '._dyn_productItemsWrapper' ) ) { return; } const quantity = getQuantity(row); if (quantity <= 1) { return; } const minus = row.querySelector( 'button[aria-label="Decrease quantity"]' ); if (!minus) { console.log( '⚠️ Could not find minus button', row ); return; } console.log( `↩️ Resetting another product: ${quantity} → 1` ); /* * Use the EXISTING Dynamatic minus button. */ let safety = 20; while ( getQuantity(row) > 1 && safety > 0 ) { minus.click(); safety--; } }); } /* ===================================================== STEP 1 _dyn_ctaButton DISABLE ONLY WHEN WHOLE BUNDLE = 4 ===================================================== */ function updateCTAButtons() { const total = getBundleTotal(); const isFull = total >= MAX_BUNDLE_ITEMS; document .querySelectorAll( '._dyn_ctaButton' ) .forEach(button => { if (isFull) { button.disabled = true; button.setAttribute( 'data-bundle-full', 'true' ); button.setAttribute( 'aria-disabled', 'true' ); button.style.opacity = '0.5'; button.style.pointerEvents = 'none'; button.style.cursor = 'not-allowed'; } else { if ( button.hasAttribute( 'data-bundle-full' ) ) { button.disabled = false; button.removeAttribute( 'data-bundle-full' ); button.removeAttribute( 'aria-disabled' ); button.style.opacity = ''; button.style.pointerEvents = ''; button.style.cursor = ''; } } }); } /* ===================================================== STEP 2 QUANTITY + BUTTON SEPARATE FROM CTA ===================================================== */ function updateQuantityButtons() { const total = getBundleTotal(); const remaining = Math.max( 0, MAX_BUNDLE_ITEMS - total ); document .querySelectorAll( '._dyn_quantityRow' ) .forEach(row => { if ( row.closest( '._dyn_productItemsWrapper' ) ) { return; } const plus = row.querySelector( 'button[aria-label="Increase quantity"]' ); if (!plus) return; const currentQuantity = getQuantity(row); const reachedLimit = remaining <= 0 || currentQuantity >= remaining; if (reachedLimit) { plus.disabled = true; plus.setAttribute( 'data-bundle-quantity-full', 'true' ); plus.setAttribute( 'aria-disabled', 'true' ); plus.style.opacity = '0.4'; plus.style.cursor = 'not-allowed'; plus.style.pointerEvents = 'none'; } else { if ( plus.hasAttribute( 'data-bundle-quantity-full' ) ) { plus.disabled = false; plus.removeAttribute( 'data-bundle-quantity-full' ); plus.removeAttribute( 'aria-disabled' ); plus.style.opacity = ''; plus.style.cursor = ''; plus.style.pointerEvents = ''; } } }); } /* ===================================================== EXISTING + CLICK HANDLER NOW WITH ONLY ONE ADDITION: RESET OTHER QUANTITIES ===================================================== */ window.__bundleLimitClickHandler = function(event) { const plus = event.target.closest( '._dyn_quantityRow button[aria-label="Increase quantity"]' ); if (!plus) return; /* * Ignore quantity controls * inside actual bundle. */ if ( plus.closest( '._dyn_productItemsWrapper' ) ) { return; } const row = plus.closest( '._dyn_quantityRow' ); if (!row) return; /* * ============================================== * NEW: * If customer changes THIS product quantity, * reset all OTHER product quantities to 1. * ============================================== */ resetOtherQuantities(row); /* * EVERYTHING BELOW IS THE ORIGINAL * WORKING BASE LOGIC. */ const total = getBundleTotal(); const remaining = Math.max( 0, MAX_BUNDLE_ITEMS - total ); const currentQuantity = getQuantity(row); if ( remaining <= 0 || currentQuantity >= remaining ) { event.preventDefault(); event.stopImmediatePropagation(); console.log( `🚫 Quantity + blocked: ${currentQuantity}/${remaining}` ); updateQuantityButtons(); } }; document.addEventListener( 'click', window.__bundleLimitClickHandler, true ); /* ===================================================== WATCH BUNDLE CHANGES ===================================================== */ const bundleWrapper = document.querySelector( '._dyn_productItemsWrapper' ); if (bundleWrapper) { window.__bundleLimitObserver = new MutationObserver(() => { updateCTAButtons(); updateQuantityButtons(); }); window.__bundleLimitObserver.observe( bundleWrapper, { childList: true, subtree: true, characterData: true } ); } /* ===================================================== WATCH DYNAMATIC RE-RENDERING ===================================================== */ window.__quantityLimitObserver = new MutationObserver(() => { updateCTAButtons(); updateQuantityButtons(); }); window.__quantityLimitObserver.observe( document.body, { childList: true, subtree: true, characterData: true } ); /* ===================================================== INITIAL RUN ===================================================== */ updateCTAButtons(); updateQuantityButtons(); /* ===================================================== MANUAL TEST ===================================================== */ window.testBundleLimits = () => { console.clear(); const total = getBundleTotal(); const remaining = Math.max( 0, MAX_BUNDLE_ITEMS - total ); console.log( '================================' ); console.log( `Bundle: ${total}/${MAX_BUNDLE_ITEMS}` ); console.log( `Remaining: ${remaining}` ); console.log( 'CTA limit: ' + (total >= 4 ? '🔒 DISABLED' : '🟢 ENABLED') ); console.log( 'Quantity limit: ' + `${remaining} remaining` ); console.log( '================================' ); updateCTAButtons(); updateQuantityButtons(); }; console.log( '================================' ); console.log( '✅ BASE + RESET TEST INSTALLED' ); console.log( 'Existing CTA + quantity logic preserved.' ); console.log( 'New: changing quantity resets other cards to 1.' ); console.log( '================================' ); })();

Announcements

Coffee Makers

Travel Grinder

Accessories

Bundles

Coffee

AeroPress vs French Press

AeroPress at Williams-Sonoma

Premium Collection

Traveler's Collection

Learn More

How To Use

AeroPress Technology

Brew Better Rewards

Community

Discounts & Giving Program

Store Locator

World AeroPress Championship

AeroPress Recipes

AeroPress In The News

Inventor’s Story

verve

Bronson Blend 12 oz

Seabright Blend 12 oz

Sermon Blend 12 oz

Streetlevel Blend 12 oz