/* 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

Sightglass

Organic Banner Dark 12 oz

Organic Blueboon 12 oz

Organic Owls Howl 12 oz

Organic Toketee 12 oz