Merge branch 'development'
#Conflicts: # admin/countries.php # cart.php # custom/css/main.css # custom/customfunctions.php # custom/email/order-details-template.php # custom/email/order-invoice-template.php # custom/email/order-notification-template.php # custom/pages/about.php # custom/pages/about_morval.php # custom/settings/config.php # custom/settings/settings.php # functions.php # home.php # products.php # script.js
This commit is contained in:
90
script.js
90
script.js
@@ -1,4 +1,7 @@
|
||||
<<<<<<< HEAD
|
||||
|
||||
=======
|
||||
>>>>>>> development
|
||||
if (document.querySelector('.product-img-small')) {
|
||||
let imgs = document.querySelectorAll('.product-img-small img');
|
||||
let mainImg = document.querySelector('.product-img-large img');
|
||||
@@ -167,4 +170,91 @@ 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();
|
||||
}
|
||||
Reference in New Issue
Block a user