/* 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, '' ); } }); }); } /* 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 }); /* Change disabled Add to Bundle button text to "Added!" */ function updateBundleButton(button) { if ( button && button.matches('._dyn_ctaButton') && button.disabled && button.textContent.trim() !== 'Added!' ) { button.textContent = 'Added!'; } } /* Check existing buttons once */ document.querySelectorAll('._dyn_ctaButton').forEach(updateBundleButton); /* 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 = 'unset'; } /* ------------------------------------------------------- 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'] } ); })(); /* DISPLAY ADDED ON CLICK OF BUTTON */ document.addEventListener('click', function (e) { const button = e.target.closest('._dyn_ctaButton'); if (!button) return; const originalText = button.textContent.trim(); const originalBackground = button.style.backgroundColor; const originalColor = button.style.color; setTimeout(function () { button.textContent = 'Added'; button.style.backgroundColor = '#E8E8E7'; button.style.color = '#383738'; setTimeout(function () { button.textContent = originalText || 'Add To Bundle'; button.style.backgroundColor = originalBackground; button.style.color = originalColor; }, 1000); }, 50); }, true); /* ========================================================= 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'); 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'] }); })(); /* 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 });

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

necessary

Burundi 325 gr

Colombia 325 gr