I’m trying to create a slider inside the mini cart containing product’s cross sales. For example, product A has cross sale items 1, 2 and 3. Product B has cross sale items 4, 5 and 6, so when you add product A to the cart, inside your mini cart you should see a slider containing products 1, 2 and 3. When you also add product B, you should see a slider containing products 1 to 6. And if you remove product A, the slider should display only products 4, 5 and 6. Now the problem I’m facing is that I can’t init the Swiper… In my app.js I have the basic swiper init:
const miniCartSwiper = new Swiper('.mini-cart-slider', {
direction: 'horizontal',
loop: true,
slidesPerView: 1,
spaceBetween: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
In my PHP I have a basic foreach with the products. The problem is that when I try to console log my .mini-cart-slider, the length is always 0 and JS doesn’t find that element, even though is there. I suspect that is because is added after a product is added to the cart. So how should I init my Swiper? And how should I handle the changes in the slides? I should reInit it on every change on the mini cart…