Commerce/script.js

<<<<<<< HEAD

=======
>>>>>>> development
if (document.querySelector('.product-img-small')) {
    let imgs = document.querySelectorAll('.product-img-small img');
    let mainImg = document.querySelector('.product-img-large img');
    let originalSrc = mainImg.src; // Store the original image source

    imgs.forEach(img => {
        img.onmouseover = () => {
            document.querySelector('.product-img-large img').src = img.src;
            imgs.forEach(i => i.parentElement.classList.remove('selected'));
            img.parentElement.classList.add('selected');
        };
        // On mouse out - restore to the original image
        img.onmouseout = () => {
            mainImg.src = originalSrc;
            imgs.forEach(i => i.parentElement.classList.remove('selected'));
            // Optionally re-select the original thumbnail
            imgs.forEach(i => {
                if (i.src === originalSrc) {
                    i.parentElement.classList.add('selected');
                }
            });
        };
        img.onclick = () => {
            document.body.insertAdjacentHTML('beforeend', `
            <div class="img-modal">
                <div>
                    <a href="#" class="close">&times;</a>
                    <img src="${img.src}" alt="">
                </div>
            </div>
            `);
            document.querySelector('.img-modal div').style.height = (document.querySelector('.img-modal img').height+80) + 'px';
            document.querySelector('.img-modal .close').onclick = event => {
                event.preventDefault();
                document.querySelector('.img-modal').remove();
            };
            document.querySelector('.img-modal').onclick = event => {
                if (event.target.classList.contains('img-modal')) document.querySelector('.img-modal').remove();
            };
        };
    });
}
if (document.querySelector('.product #product-form')) {
    let updatePrice = () => {
        let price = parseFloat(document.querySelector('.product .price').dataset.price);

        let rrp = document.querySelector('.product .rrp') ?? 0;

        if (rrp !=0)
        {
            rrp = parseFloat(document.querySelector('.product .rrp').dataset.rrp) ?? 0;
        }

        document.querySelectorAll('.product #product-form .option').forEach(e => {
            if (e.value) {
                let optionPrice = e.classList.contains('text') || e.classList.contains('datetime') ? e.dataset.price : 0.00;
                optionPrice = e.classList.contains('select') ? e.options[e.selectedIndex].dataset.price : optionPrice;
                optionPrice = (e.classList.contains('radio') || e.classList.contains('checkbox')) && e.checked ? e.dataset.price : optionPrice;
                price = (e.classList.contains('select') ? e.options[e.selectedIndex].dataset.modifier : e.dataset.modifier) == 1 ? price+parseFloat(optionPrice) : price-parseFloat(optionPrice);
             
                let optionRRP = e.classList.contains('text') || e.classList.contains('datetime') ? e.dataset.rrp : 0.00;
                optionRRP = e.classList.contains('select') ? e.options[e.selectedIndex].dataset.rrp : optionRRP;
                optionRRP = (e.classList.contains('radio') || e.classList.contains('checkbox')) && e.checked ? e.dataset.rrp : optionRRP;
                rrp = (e.classList.contains('select') ? e.options[e.selectedIndex].dataset.modifier : e.dataset.modifier) == 1 ? rrp+parseFloat(optionRRP) : rrp-parseFloat(optionRRP);     
  
            }
        });
        document.querySelector('.product .price').innerHTML = currency_code + (price > 0.00 ? price.toFixed(2) : 0.00);
        if (rrp !=0)
            {
                document.querySelector('.product .rrp').innerHTML = currency_code + (rrp > 0.00 ? rrp.toFixed(2) : 0.00);
            }
    };
    document.querySelectorAll('.product #product-form .option').forEach(ele => ele.onchange = () => updatePrice());
    updatePrice();
}
if (document.querySelector('.products-form')) {
    let products_form_submit = () => {
        document.querySelector('.products-form')
        if (rewrite_url) {
            window.location.href = encodeURI(base_url + 'products/' + document.querySelector('.category select').value + '/' + document.querySelector('.sortby select').value);
        } else {
            window.location.href = encodeURI(base_url + 'index.php?page=products&category=' + document.querySelector('.category select').value + '&sort=' + document.querySelector('.sortby select').value);
        }
    };
    document.querySelector('.sortby select').onchange = () => products_form_submit();
    document.querySelector('.category select').onchange = () => products_form_submit();
}
if (document.querySelector('.cart .ajax-update')) {
    document.querySelectorAll('.cart .ajax-update').forEach(ele => {
        ele.onchange = () => {
            let formEle = document.querySelector('.cart form');
            let formData = new FormData(formEle);
            formData.append('update', 'Update');
            console.log(formData);
            fetch(formEle.action, {
                method: 'POST',
                body: formData
            }).then(response => response.text()).then(html => {
                let doc = (new DOMParser()).parseFromString(html, 'text/html');
                document.querySelector('.total').innerHTML = doc.querySelector('.total').innerHTML;
                document.querySelectorAll('.product-total').forEach((e,i) => {
                    e.innerHTML = doc.querySelectorAll('.product-total')[i].innerHTML;
                });
            });
        };
    });
}
const checkoutHandler = () => {
    if (document.querySelector('.checkout .ajax-update')) {
        document.querySelectorAll('.checkout .ajax-update').forEach(ele => {
            ele.onchange = () => {
                let formEle = document.querySelector('.checkout form');
                let formData = new FormData(formEle);
                formData.append('update', 'Update');
                fetch(formEle.action, {
                    method: 'POST',
                    body: formData
                }).then(response => response.text()).then(html => {
                    let doc = (new DOMParser()).parseFromString(html, 'text/html');
                    document.querySelector('.summary').innerHTML = doc.querySelector('.summary').innerHTML;
                    document.querySelector('.total').innerHTML = doc.querySelector('.total').innerHTML;
                    document.querySelector('.discount-code .result').innerHTML = doc.querySelector('.discount-code .result').innerHTML;
                    document.querySelector('.shipping-methods-container').innerHTML = doc.querySelector('.shipping-methods-container').innerHTML;
                    checkoutHandler();
                });
            };
            if (ele.name == 'discount_code') {
                ele.onkeydown = event => {
                    if (event.key == 'Enter') {
                        event.preventDefault();
                        ele.onchange();
                    }
                };
            }
        });
    }
};
checkoutHandler();

function openMenu(div){
    let nav_display = document.querySelector(div).style.display;
    document.querySelector(div).style.display = nav_display == 'block' ? 'none' : 'block';
}

function update(id_large, IMG_large, option_id, price){
    let url_id_a = id_large + 'A';
    let url_id_b = id_large + 'B';
    let url_id_c = id_large + 'C';

    //change picture
    document.getElementById(id_large).src = IMG_large;
    document.getElementById(url_id_a).href =  option_id;
    document.getElementById(url_id_b).href =  option_id;  
    document.getElementById(url_id_c).innerHTML =  price;
}

function updateOption(id_large, IMG_large){
    //change picture
    document.getElementById(id_large).src = IMG_large;
}


// Function to change the title and flag when a language is selected
function changeLanguage(language, langCode, flagUrl) {
    const title = document.getElementById("title");
    title.src = flagUrl;
    title.alt = language+" Flag";
}

// Enhanced slider functionality for multiple carousels
function initializeCarousels() {
    // Handle product sliders (highlightedProducts2)
    const productSliders = document.querySelectorAll('.product-slider');
    
    productSliders.forEach((slider) => {
        const carouselId = slider.getAttribute('data-carousel');
        const prevBtn = slider.querySelector('.prev-btn');
        const nextBtn = slider.querySelector('.next-btn');
        const productContainer = slider.querySelector('.product-container-slider');
        const products = slider.querySelectorAll('.product-card-slider');
        
        if (!products.length) return;
        
        let currentIndex = 0;
        const productsPerView = window.innerWidth < 480 ? 1 : 
                                window.innerWidth < 768 ? 2 : 
                                window.innerWidth < 992 ? 3 : 4;
        
        function updateSliderPosition() {
            const productWidth = products[0].offsetWidth;
            productContainer.style.transform = `translateX(-${currentIndex * productWidth}px)`;
        }
        
        prevBtn.addEventListener('click', () => {
            if (currentIndex > 0) {
                currentIndex--;
                updateSliderPosition();
            }
        });
        
        nextBtn.addEventListener('click', () => {
            if (currentIndex < products.length - productsPerView) {
                currentIndex++;
                updateSliderPosition();
            }
        });
        
        // Update slider on window resize
        window.addEventListener('resize', () => {
            // Reset position when screen size changes
            currentIndex = 0;
            updateSliderPosition();
        });
    });
    
    // Handle sample sliders (getSamples)
    const sampleButtons = document.querySelectorAll('.scrollButton');
    
    sampleButtons.forEach((button) => {
        const samplesId = button.getAttribute('data-samples');
        if (!samplesId) return;
        
        const samplesContainer = document.getElementById('add_samples_container_' + samplesId);
        if (!samplesContainer) return;
        
        const isLeftButton = button.id.includes('slideLeft');
        
        button.addEventListener('click', () => {
            const scrollAmount = 200; // Adjust as needed
            const currentScroll = samplesContainer.scrollLeft;
            
            if (isLeftButton) {
                samplesContainer.scrollTo({
                    left: currentScroll - scrollAmount,
                    behavior: 'smooth'
                });
            } else {
                samplesContainer.scrollTo({
                    left: currentScroll + scrollAmount,
                    behavior: 'smooth'
                });
            }
        });
    });
}

// Initialize carousels when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeCarousels);

// Also initialize if DOM is already loaded
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeCarousels);
} else {
    initializeCarousels();
}