pcwvanbeers/Commerce
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Production release

Browse Source
This commit is contained in:
“VeLiTi”
2025-08-12 15:04:56 +02:00
parent 580f835fff
commit 60a32a7ff9
33 changed files with 2030 additions and 5494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
home.php
View File

@@ -27,7 +27,9 @@ $view .= '
// ++++++++++++++++++++++++++++++
// Include highlighted Products
// ++++++++++++++++++++++++++++++
$view .= highlightedProducts2($clientsecret,category_id_highlighted_products_2, ($highlight_2 ?? 'highlight 2'),'');
$view .= highlightedProducts2($clientsecret,category_id_highlighted_products_1, ($highlight_2 ?? 'highlight 2'),'');
$view .= highlightedProducts($clientsecret,category_id_highlighted_products_2, ($highlight_2 ?? 'highlight 2'),'');
$view .= '
@@ -68,6 +70,32 @@ $view .= '
</section>';
// ++++++++++++++++++++++++++++++
// Include customer reviews
// ++++++++++++++++++++++++++++++
$view .= '
<section class="reviews">
<div class="container">
<h2>'.($customer_reviews ?? 'Reviews').'</h2>
<div class="reviews-container">
<div class="review-item">
<div class="stars">★★★★★</div>
<p>Zeker een aanrader! Aangeschaft als cadeau voor mijn partner en we zijn er beiden erg blij mee! Het horloge heeft een prachtig design dat zowel stijlvol als tijdloos is, door de leren en stalen band. Het grootste pluspunt is dat we nooit meer een batterij hoeven te verwisselen – super handig! Bovendien loopt het horloge stipt op tijd, wat je natuurlijk van een goed horloge mag verwachten. Ralph heeft mij vriendelijk en professioneel geholpen.</p>
<div class="reviewer">- Helma</div>
</div>
<div class="review-item">
<div class="stars">★★★★★</div>
<p>Morval is niet zomaar een horloge, Morval is een sieraad. Prachtig en uniek ontwerp en ook nog eens kwalitatief hoogstaand!</p>
<div class="reviewer">- Paul K</div>
</div>
<div class="review-item">
<div class="stars">★★★★★</div>
<p>Eind Januari heb ik een Morval Watch gekocht. Ik heb gekozen voor het model Thomas II in de kleur navy blue met stalen band. Tevens heb ik er een extra lederen band bij gekozen. Behalve het stijlvolle ontwerp en de Zwitserse kwaliteit, sprak het kleinschalige en het verhaal achter deze horloge me enorm aan! Uniek, stijlvol en kwaliteit voor een eerlijke prijs! Wat mij betreft zeker 5 sterren waard!</p>
<div class="reviewer">- W. Habraken</div>
</div>
</div>
</div>
</section>';
// ++++++++++++++++++++++++++++++
// Include footer
@@ -79,42 +107,92 @@ $view .= template_footer();
// ++++++++++++++++++++++++++++++
$view .='
<script>
// Basic slider functionality
const prevBtn = document.querySelector(\'.prev-btn\');
const nextBtn = document.querySelector(\'.next-btn\');
const productContainer = document.querySelector(\'.product-container-slider\');
const products = document.querySelectorAll(\'.product-card-slider\');
let currentIndex = 0;
const productsPerView = window.innerWidth < 480 ? 1 :
window.innerWidth < 768 ? 2 :
window.innerWidth < 992 ? 3 : 4;
prevBtn.addEventListener(\'click\', () => {
if (currentIndex > 0) {
currentIndex--;
updateSliderPosition();
}
});
nextBtn.addEventListener(\'click\', () => {
if (currentIndex < products.length - productsPerView) {
currentIndex++;
updateSliderPosition();
}
});
function updateSliderPosition() {
const productWidth = products[0].offsetWidth;
productContainer.style.transform = `translateX(-${currentIndex * productWidth}px)`;
// 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\'
});
}
});
});
}
// Update slider on window resize
window.addEventListener(\'resize\', () => {
// Reset position when screen size changes
currentIndex = 0;
updateSliderPosition();
});
// 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();
}
</script>
</html>