`;
};
const bindCarousel = () => {
const carousel = section.querySelector('[data-carousel]');
const prev = section.querySelector('[data-direction="prev"]');
const next = section.querySelector('[data-direction="next"]');
if (!carousel) return;
const cardWidth = () => {
const c = carousel.querySelector('.stb-card');
if (!c) return 0;
return c.getBoundingClientRect().width + (parseFloat(getComputedStyle(carousel).gap) || 20);
};
const update = () => {
const max = carousel.scrollWidth - carousel.clientWidth;
// Edge fade: only where there's more to scroll (crisp resting edges).
carousel.toggleAttribute('data-fade-start', carousel.scrollLeft > 2);
carousel.toggleAttribute('data-fade-end', carousel.scrollLeft < max - 2);
if (!prev || !next) return;
prev.disabled = carousel.scrollLeft <= 2;
next.disabled = carousel.scrollLeft >= max - 2;
};
if (prev) prev.addEventListener('click', () => carousel.scrollBy({ left: -cardWidth(), behavior: 'smooth' }));
if (next) next.addEventListener('click', () => carousel.scrollBy({ left: cardWidth(), behavior: 'smooth' }));
carousel.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();
};
/* Adding to cart is handled by the shared web component
(assets/stuburt-quick-pick.js) — it posts to /cart/add.js and dispatches the
`cart:update` event the mini-cart + cart bubble subscribe to, identical to
the SS26 carousel and the collection page. */
const load = async () => {
const handles = getViewed().filter(h => h && h !== currentHandle).slice(0, limit);
if (!handles.length) return; // stays hidden
const results = await Promise.all(
handles.map(h => fetch(`/products/${encodeURIComponent(h)}.js`, { headers: { Accept: 'application/json' }})
.then(r => r.ok ? r.json() : null).catch(() => null))
);
const valid = results.filter(Boolean);
if (!valid.length) return;
const carousel = section.querySelector('[data-carousel]');
carousel.innerHTML = valid.map(cardHTML).join('');
section.removeAttribute('hidden');
bindCarousel();
};
// Clear all: wipe the stored history and hide the section
const bindClearAll = () => {
const btn = section.querySelector('[data-clear-all]');
if (!btn) return;
btn.addEventListener('click', () => {
setViewed([]);
section.setAttribute('hidden', '');
});
};
bindClearAll();
// If we already have stored handles, reveal section so skeletons show while fetching
if (getViewed().filter(h => h && h !== currentHandle).length > 0) {
section.removeAttribute('hidden');
}
load();
})();
Cookie consent
We and our partners use cookies to personalise your experience, show relevant ads and analyse traffic. We won’t use them for these purposes unless you accept. Privacy Policy.