${data.data.count > 99 ? '99+' : data.data.count}
const USE_SCROLL_ANIMATION_CLASSNAMES = ['shoplaza-section'];
const USE_SCROLL_ANIMATION_CLASSNAMES_WITH_DATA_CASCADE = ['product-card', 'collection-card'];
const SCROLL_ANIMATION_CLASSNAME = 'scroll-animation';
const SCROLL_ANIMATION_OFFSCREEN_CLASSNAME = 'scroll-animation--offscreen';
function onIntersection(elements, observer) {
elements.forEach((element, index) => {
if (element.isIntersecting) {
const elementTarget = element.target;
if (elementTarget.classList.contains(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME)) {
elementTarget.classList.remove(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME);
}
if (
USE_SCROLL_ANIMATION_CLASSNAMES_WITH_DATA_CASCADE.some((className) =>
elementTarget.classList.contains(className)
)
) {
elementTarget.setAttribute('style', `--animation-order: ${elementTarget._scrollCustomIndex};`);
}
observer.unobserve(elementTarget);
elementTarget.addEventListener('animationend', () => {
elementTarget.classList.remove(SCROLL_ANIMATION_CLASSNAME);
});
} else {
element.target.classList.add(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME);
}
});
}
function initScrollAnimation(rootElement = document) {
const scrollAnimationElements = [];
USE_SCROLL_ANIMATION_CLASSNAMES.forEach((className) => {
const elements = Array.from(rootElement.querySelectorAll(`.${className}`));
scrollAnimationElements.push(...elements);
elements.forEach((element) => {
USE_SCROLL_ANIMATION_CLASSNAMES_WITH_DATA_CASCADE.forEach((clsName) => {
const dataCascadeElements = Array.from(element.querySelectorAll(`.${clsName}`));
dataCascadeElements.forEach((item, index) => {
item._scrollCustomIndex = index;
});
scrollAnimationElements.push(...dataCascadeElements);
});
});
});
if (scrollAnimationElements.length === 0) {
return;
}
const observer = new IntersectionObserver(onIntersection, {
rootMargin: '0px 0px -30px 0px'
});
scrollAnimationElements.forEach((element) => {
element.classList.add(SCROLL_ANIMATION_CLASSNAME);
observer.observe(element);
});
}
const enableScrollAnimation = document.querySelector('body.enable-scroll-animation');
if (enableScrollAnimation) {
initScrollAnimation();
}