256 lines
11 KiB
JavaScript
256 lines
11 KiB
JavaScript
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">×</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();
|
|
} |