Hello, I’m creating a popup after a product is added to cart. When multiple items are added to the cart at the same time, I’m trying to create a carousel within the popup. This is currently working but the pagination shows on top of the carousel, instead of underneath the carousel. How can I get the pagination to show under the carousel instead of on top. URL: Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows
The carousel popup is there when you add multiple different variants to cart at the same time:
IMG of issue:
Code:
// Create the swiper container if more than one item
const swiperContainer = document.createElement('div');
swiperContainer.classList.add('swiper-container');
const swiperWrapper = document.createElement('div');
swiperWrapper.classList.add('swiper-wrapper');
// Loop through items and add them to the swiper wrapper
updatedItems.forEach(function(item) {
console.log("Fetching details for item:", item);
// Fetch the variant details using the variant ID from itemsToAdd
getVariantById(item.id).then(variant => {
console.log("Fetched variant:", variant);
if (!variant) {
console.error(`No variant found for ID: ${item.id}`);
return;
}
console.log(variant);
// Extract product details
const productTitle = variant.name;
const productImage = variant.featured_image
? variant.featured_image.src
: (document.querySelector('.product__media img') ? document.querySelector('.product__media img').src : 'default_image_url');
let comparePrice = (variant.compare_at_price / 100).toFixed(2);
const quantity = item.quantity;
// Create HTML for this item to add to the swiper
const itemElement = document.createElement('div');
itemElement.classList.add('swiper-slide'); // Each product gets its own slide
itemElement.classList.add('cart-popup-slide');
let productPrice;
if (discount == 0) {
productPrice = (variant.price / 100).toFixed(2);
} else {
if (comparePrice == 0) {
comparePrice = (variant.price / 100).toFixed(2);
}
productPrice = (Math.ceil(variant.price / 100) - ((discount * (variant.price / 100) * 100) / 100)).toFixed(2);
}
if (comparePrice != 0) {
itemElement.innerHTML = `
#### ${productTitle}
Quantity: ${quantity}
{{ country_currency_symbol }}${comparePrice} {{ country_currency_symbol }}${productPrice}
`;
} else {
itemElement.innerHTML = `
#### ${productTitle}
Quantity: ${quantity}
{{ country_currency_symbol }}${productPrice}
`;
}
// Add each item element to the swiper wrapper (this will be in separate slides)
swiperWrapper.appendChild(itemElement);
// Append navigation buttons for the swiper
const swiperNavPrev = document.createElement('div');
swiperNavPrev.classList.add('swiper-button-prev');
swiperContainer.appendChild(swiperNavPrev);
const swiperNavNext = document.createElement('div');
swiperNavNext.classList.add('swiper-button-next');
swiperContainer.appendChild(swiperNavNext);
// Append the swiper wrapper inside the swiper container
swiperContainer.appendChild(swiperWrapper);
// Append the pagination (dots navigation) after swiper wrapper
const swiperPagination = document.createElement('div');
swiperPagination.classList.add('swiper-pagination');
swiperContainer.appendChild(swiperPagination); // Place this after swiperWrapper
// Add the swiper container to the popup content
popupContent.appendChild(swiperContainer);
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1, // Show 1 product at a time by default
centeredSlides: true, // Center the active slide
loop: true, // Enable looping of slides
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
0: {
slidesPerView: 1, // 1 product on mobile
spaceBetween: 10, // Reduced space on mobile
},
750: {
slidesPerView: 1, // 1 product on tablet
spaceBetween: 10, // Keep some space
},
1024: {
slidesPerView: 1, // 1 product on desktop
spaceBetween: 20, // Normal space on desktop
},
},
});
