// Content mapping for each product const productData = { "productlink-1": { title: "Pickled Tea Leaves", subtitle: "WITH CHILLI GARLIC & LIME", content: "Myanmar Pickled Tea leaves which is also widely known as Lahpet is the edible tea leaf uniquely available in Myanmar. Muyar’s tea leaf grows in Shan State of Myanmar. Pickled Tea are normally eaten together with crispy mixed beans and nut. Best to eat as a salad or cook with preferable meat as a curry.", buyNowLink: "/product/pickled-tea-leaves-with-chilli-garlic-lime-300g/" }, "productlink-2": { title: "Pickled Tea Leaves", subtitle: "IN SUNFLOWER OIL", content: "Myanmar Pickled Tea leaves which is also widely known as Lahpet is the edible tea leaves uniquely available in Myanmar. Muyar’s tea leaf grows in Shan State of Myanmar. Pickled Tea are normally eaten together with crispy mixed beans and nut. Best to eat as a salad or cook with preferable meat as a curry.", buyNowLink: "/product/pickled-tea-leaves-in-sunflower-oil-300g/" }, "productlink-3": { title: "Pickled Young Ginger", subtitle: "IN BRINE", content: "Pickled ginger is widely used across Myanmar, especially in the salad. Its best companions are crispy fried beans, nuts, lime, chilli and fresh shallot. At Muyar, we use the finest young ginger and quality pickling liquid.", buyNowLink: "/product/pickled-young-ginger-in-brine-300g/" }, "productlink-4": { title: "Crispy Assorted", subtitle: "BEANS & NUTS", content: "Crispy assorted fried beans and nuts mix are game changer in Burmese cuisine. It is used in the salads to gain complex texture and flavour. The popular traditional salads are pickled tea leaves (Lahpet Thohk) and pickled Ginger (Gin Thohk)", buyNowLink: "/product/crispy-assorted-beans-nuts-400g/" }, "productlink-5": { title: "Crispy Assorted Beans", subtitle: "NUT FREE", content: "Burmese Crispy Assorted Beans (Nut-Free) is a delicious, nut-free snack featuring a mix of traditional Burmese beans like green beans, and flat beans. Each bean is carefully seasoned with a blend of garlic, melon seeds, sesame seeds and roasted to crispy perfection, creating a savoury, crunchy texture without any nuts.", buyNowLink: "/product/crispy-assorted-beans-400g/" } }; // Background image mapping const backgroundImages = { "productlink-1": "/wp-content/uploads/2025/02/ZPL6823-scaled-1.webp", "productlink-2": "/wp-content/uploads/2025/02/ZPL6815-Edit-scaled-1.webp", "productlink-3": "/wp-content/uploads/2025/02/ZPL6807-scaled-1.webp", "productlink-4": "/wp-content/uploads/2025/02/ZPL6876-Edit-scaled-1.webp", "productlink-5": "/wp-content/uploads/2025/02/ZPL6871-Edit-scaled-1.webp" }; let currentIndex = 0; const productKeys = Object.keys(productData); let autoplayTimer; // Function to handle content updates function updateContent(productKey) { const currentId = productKey.split('-')[1]; // Remove 'movein' from all images and add 'moveout' document.querySelectorAll('[id^="product-image-"]').forEach(image => { image.classList.remove('movein'); image.classList.add('moveout'); }); // Add 'movein' to the current image and remove 'moveout' const currentImage = document.getElementById(`product-image-${currentId}`); if (currentImage) { currentImage.classList.add('movein'); currentImage.classList.remove('moveout'); } // Update the banner background const banner = document.querySelector('#banner'); const backgroundImage = backgroundImages[productKey]; if (banner && backgroundImage) { banner.style.backgroundImage = `url(${backgroundImage})`; } // Update the banner content const productInfo = productData[productKey]; if (productInfo) { document.querySelector('#banner-title h1').textContent = productInfo.title; document.querySelector('#banner-subtitle span').textContent = productInfo.subtitle; document.querySelector('#banner-content p').textContent = productInfo.content; const buyNowLink = document.querySelector('#buy-now-link a'); buyNowLink.href = productInfo.buyNowLink; buyNowLink.textContent = "Buy Now"; } } // Autoplay slider logic function autoplaySlider() { const currentProductKey = productKeys[currentIndex]; updateContent(currentProductKey); currentIndex = (currentIndex + 1) % productKeys.length; } function startAutoplay() { // Clear any existing timer clearInterval(autoplayTimer); autoplayTimer = setInterval(autoplaySlider, 3000); } // Add click event to product links document.querySelectorAll('[id^="productlink-"]').forEach((link, index) => { link.addEventListener('click', function (event) { event.preventDefault(); const productKey = this.id; currentIndex = index; // Update the index for autoplay continuity updateContent(productKey); startAutoplay(); // Restart autoplay timer }); }); // Start autoplay initially startAutoplay(); autoplaySlider(); // Show the first product immediately // document.querySelectorAll('[id^="productlink-"]').forEach(link => { // link.addEventListener('click', function (event) { // event.preventDefault(); // // Get the ID of the clicked link // const currentId = this.id.split('-')[1]; // const productKey = this.id; // console.log(productKey); // // Remove 'movein' from all images and add 'moveout' // document.querySelectorAll('[id^="product-image-"]').forEach(image => { // image.classList.remove('movein'); // image.classList.add('moveout'); // }); // // Add 'movein' to the current image and remove 'moveout' // const currentImage = document.getElementById(`product-image-${currentId}`); // if (currentImage) { // currentImage.classList.add('movein'); // currentImage.classList.remove('moveout'); // } // // Update the banner background // const banner = document.querySelector('#banner'); // const backgroundImage = backgroundImages[productKey]; // if (banner && backgroundImage) { // banner.style.backgroundImage = `url(${backgroundImage})`; // } // // Update the banner content // const productInfo = productData[productKey]; // if (productInfo) { // document.querySelector('#banner-title h1').textContent = productInfo.title; // document.querySelector('#banner-subtitle span').textContent = productInfo.subtitle; // document.querySelector('#banner-content p').textContent = productInfo.content; // const buyNowLink = document.querySelector('#buy-now-link a'); // buyNowLink.href = productInfo.buyNowLink; // buyNowLink.textContent = "Buy Now"; // } // }); // });