59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
import Splide from '@splidejs/splide';
|
|
import '@splidejs/splide/css/core';
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initCategoryPills();
|
|
initProductSplides();
|
|
});
|
|
|
|
function initCategoryPills() {
|
|
const pills = document.querySelectorAll('.category-pill');
|
|
const containers = document.querySelectorAll('.category-products');
|
|
|
|
if (pills.length === 0) {
|
|
return;
|
|
}
|
|
|
|
pills.forEach((pill) => {
|
|
pill.addEventListener('click', () => {
|
|
const targetId = pill.dataset.categoryId;
|
|
|
|
// Toggle pill active state
|
|
pills.forEach((p) => {
|
|
p.classList.remove('bg-tertiary-fixed-dim');
|
|
p.classList.add('bg-surface');
|
|
});
|
|
pill.classList.add('bg-tertiary-fixed-dim');
|
|
pill.classList.remove('bg-surface');
|
|
|
|
// Show matching container, hide others
|
|
containers.forEach((container) => {
|
|
container.style.display = container.dataset.categoryId === targetId ? '' : 'none';
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function initProductSplides() {
|
|
const splideElements = document.querySelectorAll('.product-splide');
|
|
|
|
splideElements.forEach((el) => {
|
|
new Splide(el, {
|
|
type: 'slide',
|
|
perPage: 3,
|
|
perMove: 1,
|
|
gap: '2rem',
|
|
pagination: false,
|
|
arrows: true,
|
|
breakpoints: {
|
|
1024: {
|
|
perPage: 2,
|
|
},
|
|
640: {
|
|
perPage: 1,
|
|
},
|
|
},
|
|
}).mount();
|
|
});
|
|
}
|