let productJson = document.getElementById('product-data') let freeShippingPrice = document.getElementById('shipping-value').innerText; freeShippingPrice = parseFloat(freeShippingPrice.replace(/[^0-9.,]/g, '')); let basePrice = document.getElementById('baseprice-value').innerText; if (basePrice.includes('€')) { basePrice = basePrice.replace(',', '.'); } basePrice = parseFloat(basePrice.replace(/[^0-9.,]/g, '')); var variantImages = { "45210112655599": "//stimara.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_1024x1024.gif", }; document.addEventListener('DOMContentLoaded', function() { var preloadedImagesContainer = document.getElementById('preloaded-images'); for (var variantId in variantImages) { if (variantImages.hasOwnProperty(variantId)) { var img = document.createElement('img'); img.src = variantImages[variantId]; preloadedImagesContainer.appendChild(img); } } const totalPricesymbol = document.getElementById('builder-price').innerText.replace(/[\d.]/g, ''); let totalPrice; function updateImages() { var container = document.getElementById('product-image-container'); container.innerHTML = ''; // Clear the container var totalQuantity = 0; // Initialize total quantity var inputs = document.querySelectorAll('.quantity-input'); inputs.forEach(function(input) { var quantity = parseInt(input.value, 10); totalQuantity += quantity; // Add to total quantity var variantId = input.dataset.variantId; var imageUrl = variantImages[variantId]; for (var i = 0; i < quantity; i++) { var img = document.createElement('img'); img.src = imageUrl; img.classList.add('product-image'); img.alt = 'Product Image'; container.appendChild(img); } }); for (var i = totalQuantity; i < 2; i++) { var img = document.createElement('img'); img.src = "https://cdn.shopify.com/s/files/1/0784/0618/9351/files/GreyedOut.png"; img.classList.add('product-image'); img.alt = 'Grey Image'; container.appendChild(img); } // Check if total quantity is more than 3 and update the button's state let minimumMessage = document.getElementById('minimum-warning') let addToCartButton = document.getElementById('multi-add-to-cart'); if (totalQuantity >= 2) { addToCartButton.disabled = false; // Enable the button minimumMessage.innerText = '' } else { addToCartButton.disabled = true; // Disable the button } } let pricePerPack = 0; function updatePrice() { var totalQuantity = 0; var inputs = document.querySelectorAll('.quantity-input'); inputs.forEach(function(input) { totalQuantity += parseInt(input.value, 10); }); totalPrice = totalQuantity * pricePerPack + (basePrice * 100); shippingProgress(totalPrice) document.getElementById('builder-price').innerText = totalPricesymbol + (totalPrice/100); } document.querySelectorAll('.quantity-selector').forEach(function(selector) { var input = selector.querySelector('.quantity-input'); // Event listener for increment button selector.querySelector('.increment-quantity').addEventListener('click', function() { let quantity = 0; let values = document.querySelectorAll('.quantity-input'); values.forEach(function(buttonv) { quantity += parseInt(buttonv.value, 10); }); if (quantity < 9){ input.value = parseInt(input.value, 10) + 1; updatePrice(); updateImages(); // Update images on increment } }); // Event listener for decrement button selector.querySelector('.decrement-quantity').addEventListener('click', function() { if (input.value > input.min) { input.value = parseInt(input.value, 10) - 1; updatePrice() updateImages(); // Update images on decrement } }); }); // Update images based on the initial quantities updatePrice() updateImages(); var form = document.getElementById('multi-add-to-cart-form'); form.addEventListener('submit', function(event) { event.preventDefault(); // Prevent the default form submission var itemsToAdd = []; var bundleId = generateRandomBundleId(); // Generate a random bundle ID document.querySelectorAll('.quantity-input').forEach(function(input) { var quantity = parseInt(input.value, 10); if (quantity > 0) { itemsToAdd.push({ id: input.dataset.variantId, quantity: quantity, properties: { '_bundleId': bundleId + basePrice, } }); } }); if (itemsToAdd.length > 0) { addToCart(itemsToAdd); } }); function generateRandomBundleId() { const letters = 'abcdefghijklmnopqrstuvwxyz'; let result = ''; const charactersLength = letters.length; for (let i = 0; i < 8; i++) { result += letters.charAt(Math.floor(Math.random() * charactersLength)); } return result; } function addToCart(items) { fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ items: items }) }) .then(response => response.json()) .then(data => { console.log('Items added to cart:'); location.reload(); }) .catch((error) => { console.error('Error adding items to cart:', error); }); } }); function shippingProgress(price) { price = price + 0 var elem = document.getElementById("myBar"); var msg = document.getElementById("shippingMessage"); const priceText = document.getElementById('builder-price').innerText; const totalPricesymbol = priceText.replace(/[\d.]/g, ''); const symbolPosition = /^\D+/.test(priceText) ? 'start' : /\D+$/.test(priceText) ? 'end' : 'none'; var percentage = Math.min((price / (freeShippingPrice * 100)) * 100, 100); elem.style.width = percentage + "%"; var remaining = ((freeShippingPrice * 100) - price)/100; if (remaining > 1) { msg.innerHTML = "You're " + (symbolPosition === 'start' ? totalPricesymbol + remaining.toFixed(2) : symbolPosition === 'end' ? remaining.toFixed(2) + totalPricesymbol : remaining.toFixed(2)) + " away from free shipping"; } else { msg.innerHTML = "Congratulations! You've earned free shipping"; } }