/* Yū Nutrition — Cart drawer script (pair with yu-cart.css). "You May Also Like" upsell (widget 3788): - Desktop side panel: the heading is sticky (CSS); this adds .yu-scrolled to the section once products scroll beneath it, to show a divider. - Mobile: turn the product list into a one-product carousel with ‹ › arrows in the top-right corner. "Mobile" = the widget rendered its mobile cards (.dyn-slideout-single-card-mobile), so this follows the widget's own breakpoint. Swiping works natively (CSS scroll-snap); this script adds the nav and keeps it in sync, re-attaching whenever the cart re-renders. */ (function () { var SECTION = '.dyn-slideout-upsell-id-3788'; var CHEVRON = ''; function setup() { document.querySelectorAll(SECTION + ' .dyn-slideout-products').forEach(function (list) { var section = list.parentElement; var mobile = !!list.querySelector(':scope > .dyn-slideout-single-card-mobile'); if (list.classList.contains('yu-carousel') !== mobile) list.classList.toggle('yu-carousel', mobile); if (section.classList.contains('yu-carousel-section') !== mobile) section.classList.toggle('yu-carousel-section', mobile); // If the widget swapped in a new list element, rebuild the nav for it var nav = section.querySelector(':scope > .yu-carousel-nav'); if (nav && nav._yuList !== list) { nav.remove(); nav = null; } if (!nav) { if (!mobile) return; nav = buildNav(list); list.after(nav); } var show = mobile && list.children.length > 1; if (nav.hidden !== !show) nav.hidden = !show; update(list, nav); }); setupPanelHeading(); } // Desktop side panel: watch its scroll area (once per element; the widget // can re-render it) and mark the section while the heading is stuck function setupPanelHeading() { document.querySelectorAll('#slideout-upsell-slide .scrollbar-slideout-zone').forEach(function (zone) { if (!zone._yuHeading) { zone._yuHeading = true; var ticking = false; zone.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; syncPanelHeading(zone); }); }, { passive: true }); } syncPanelHeading(zone); }); } function syncPanelHeading(zone) { var top = zone.getBoundingClientRect().top; zone.querySelectorAll(SECTION).forEach(function (section) { // The section's top has scrolled above the panel's top = heading is stuck var stuck = section.getBoundingClientRect().top < top - 1; if (section.classList.contains('yu-scrolled') !== stuck) section.classList.toggle('yu-scrolled', stuck); }); } function buildNav(list) { var nav = document.createElement('div'); nav.className = 'yu-carousel-nav'; nav._yuList = list; nav.innerHTML = '' + ''; nav.addEventListener('click', function (e) { e.stopPropagation(); var target = e.target.closest('button'); if (!target) return; var i = current(list); if (target.classList.contains('yu-prev')) go(list, i - 1); else if (target.classList.contains('yu-next')) go(list, i + 1); }); var ticking = false; list.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; update(list, nav); }); }, { passive: true }); return nav; } function step(list) { var first = list.firstElementChild; if (!first) return 1; var gap = parseFloat(getComputedStyle(list).columnGap) || 0; return first.offsetWidth + gap; } function current(list) { return Math.round(list.scrollLeft / step(list)); } function go(list, i) { var max = list.children.length - 1; i = Math.max(0, Math.min(max, i)); list.scrollTo({ left: i * step(list) }); } // Only touch the DOM when something changes, so the observer doesn't loop function update(list, nav) { var count = list.children.length; var i = Math.min(current(list), count - 1); var prev = nav.querySelector('.yu-prev'); var next = nav.querySelector('.yu-next'); if (prev.disabled !== (i <= 0)) prev.disabled = i <= 0; if (next.disabled !== (i >= count - 1)) next.disabled = i >= count - 1; } var queued = false; new MutationObserver(function () { if (queued) return; queued = true; requestAnimationFrame(function () { queued = false; setup(); }); }).observe(document.documentElement, { childList: true, subtree: true }); setup(); })();

General Health

Fitness

Weight Management

Immune Health

Gut Health

Healthy Aging

Women's Health

Detox

Important Info

Get in touch

We accept