/* 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'] }); })(); /* click of price will also trigger the checkout button */ document.addEventListener('click', function (event) { const price = event.target.closest('._dyn_priceText'); if (!price) return; const actions = price.closest('._dyn_actions'); if (!actions) return; const checkoutButton = actions.querySelector('._dyn_btnAdd'); if (!checkoutButton || checkoutButton.disabled) return; checkoutButton.click(); }); /* ========================================================= 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( '================================' ); })();

Explore