313 lines
14 KiB
JavaScript
313 lines
14 KiB
JavaScript
/**
|
||
* PMPNZNG Shop — Client-JS (Vanilla, kein Framework)
|
||
* Cart · Passwort-Gate · Toasts · Galerie · Größenwahl · Mobile-Menü · Insta · Exit-Intent
|
||
*
|
||
* Produktdaten kommen aus dem Astro-Layout (window.__PRODUCTS__),
|
||
* damit es nur EINE Quelle der Wahrheit gibt (src/data/products.ts).
|
||
* Später ersetzt Medusa sowohl die Render-Daten als auch den Checkout.
|
||
*/
|
||
'use strict';
|
||
|
||
const PRODUCTS = Array.isArray(window.__PRODUCTS__) ? window.__PRODUCTS__ : [];
|
||
|
||
/* ===================== PASSWORT-GATE ===================== */
|
||
const PASS_KEY = 'pmpnzng_auth';
|
||
const PASS_WORD = null; /* Passwortschutz entfernt */
|
||
|
||
function initPasswordGate() {
|
||
if (sessionStorage.getItem(PASS_KEY) === '1') return;
|
||
const overlay = document.createElement('div');
|
||
overlay.id = 'pw-overlay';
|
||
overlay.setAttribute('role', 'dialog');
|
||
overlay.setAttribute('aria-modal', 'true');
|
||
overlay.setAttribute('aria-label', 'Passwortschutz');
|
||
overlay.innerHTML = `
|
||
<div class="pw-box">
|
||
<div class="pw-logo">PMPN<strong>Z</strong>NG</div>
|
||
<div class="pw-sub">Vorschau · tgasolutions-shop.de</div>
|
||
<p class="pw-desc">Diese Seite ist passwortgeschützt.<br>Bitte gib das Passwort ein, um fortzufahren.</p>
|
||
<form class="pw-form" id="pw-form" novalidate>
|
||
<input type="password" id="pw-input" class="pw-input" placeholder="Passwort eingeben" autocomplete="current-password" aria-label="Passwort" required>
|
||
<button type="submit" class="pw-btn">Eintreten</button>
|
||
</form>
|
||
<p class="pw-error" id="pw-error" aria-live="polite"></p>
|
||
</div>`;
|
||
document.body.appendChild(overlay);
|
||
document.body.style.overflow = 'hidden';
|
||
setTimeout(() => document.getElementById('pw-input')?.focus(), 100);
|
||
document.getElementById('pw-form').addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const val = document.getElementById('pw-input').value;
|
||
if (val === PASS_WORD) {
|
||
sessionStorage.setItem(PASS_KEY, '1');
|
||
overlay.style.transition = 'opacity 0.4s ease';
|
||
overlay.style.opacity = '0';
|
||
setTimeout(() => { overlay.remove(); document.body.style.overflow = ''; }, 400);
|
||
} else {
|
||
document.getElementById('pw-error').textContent = 'Falsches Passwort. Bitte versuche es erneut.';
|
||
const input = document.getElementById('pw-input');
|
||
input.value = ''; input.focus();
|
||
const box = overlay.querySelector('.pw-box');
|
||
box.classList.add('pw-shake');
|
||
setTimeout(() => box.classList.remove('pw-shake'), 500);
|
||
}
|
||
});
|
||
}
|
||
|
||
/* ===================== CART ===================== */
|
||
const CART_KEY = 'pmpnzng_cart';
|
||
const getCart = () => { try { return JSON.parse(localStorage.getItem(CART_KEY)) || []; } catch { return []; } };
|
||
const saveCart = (cart) => { localStorage.setItem(CART_KEY, JSON.stringify(cart)); updateCartUI(); };
|
||
|
||
function addToCart(productId, size, qty = 1) {
|
||
const cart = getCart();
|
||
const product = PRODUCTS.find((p) => p.id === productId);
|
||
if (!product) return;
|
||
const key = `${productId}_${size}`;
|
||
const existing = cart.find((i) => i.key === key);
|
||
if (existing) existing.qty += qty;
|
||
else cart.push({ key, productId, size, qty, name: product.name, price: product.price, image: product.cardImage });
|
||
saveCart(cart);
|
||
showToast(`„${product.shortName}" wurde in den Warenkorb gelegt.`);
|
||
}
|
||
const removeFromCart = (key) => saveCart(getCart().filter((i) => i.key !== key));
|
||
function updateQty(key, delta) {
|
||
const cart = getCart();
|
||
const item = cart.find((i) => i.key === key);
|
||
if (item) { item.qty = Math.max(1, item.qty + delta); saveCart(cart); }
|
||
}
|
||
const cartTotal = () => getCart().reduce((s, i) => s + i.price * i.qty, 0);
|
||
const cartCount = () => getCart().reduce((s, i) => s + i.qty, 0);
|
||
|
||
function updateCartUI() {
|
||
const count = cartCount();
|
||
document.querySelectorAll('.js-cart-count').forEach((el) => {
|
||
el.textContent = count;
|
||
el.style.display = count > 0 ? 'inline-flex' : 'none';
|
||
});
|
||
document.querySelectorAll('.js-cart-total').forEach((el) => { el.textContent = formatPrice(cartTotal()); });
|
||
}
|
||
|
||
/* ===================== TOASTS ===================== */
|
||
function showToast(message, type = 'success', duration = 3500) {
|
||
let c = document.getElementById('toast-container');
|
||
if (!c) { c = document.createElement('div'); c.id = 'toast-container'; c.setAttribute('aria-live', 'polite'); document.body.appendChild(c); }
|
||
const t = document.createElement('div');
|
||
t.className = `toast toast-${type}`;
|
||
t.setAttribute('role', 'status');
|
||
t.innerHTML = `<span class="toast-icon">${type === 'success' ? '✓' : '!'}</span><span class="toast-msg">${message}</span>`;
|
||
c.appendChild(t);
|
||
requestAnimationFrame(() => requestAnimationFrame(() => t.classList.add('toast-visible')));
|
||
setTimeout(() => { t.classList.remove('toast-visible'); setTimeout(() => t.remove(), 350); }, duration);
|
||
}
|
||
|
||
/* ===================== GALERIE ===================== */
|
||
function initGallery() {
|
||
const main = document.getElementById('gallery-main');
|
||
const thumbs = document.querySelectorAll('.gallery-thumb');
|
||
if (!main || !thumbs.length) return;
|
||
thumbs.forEach((thumb, i) => {
|
||
thumb.addEventListener('click', () => {
|
||
main.src = thumb.dataset.src || thumb.src;
|
||
main.alt = thumb.alt;
|
||
thumbs.forEach((t) => t.classList.remove('active'));
|
||
thumb.classList.add('active');
|
||
});
|
||
if (i === 0) thumb.classList.add('active');
|
||
});
|
||
}
|
||
|
||
/* ===================== GRÖSSENWAHL ===================== */
|
||
function initSizeSelector() {
|
||
const btns = document.querySelectorAll('.size-btn');
|
||
const input = document.getElementById('selected-size');
|
||
const addBtn = document.getElementById('add-to-cart-btn');
|
||
if (!btns.length) return;
|
||
btns.forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
btns.forEach((b) => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
if (input) input.value = btn.dataset.size;
|
||
if (addBtn) { addBtn.disabled = false; addBtn.textContent = 'In den Warenkorb'; }
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ===================== ADD TO CART ===================== */
|
||
function initAddToCart() {
|
||
const form = document.getElementById('product-form');
|
||
if (form) {
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const productId = form.dataset.productId;
|
||
const sizeInput = document.getElementById('selected-size');
|
||
const size = sizeInput ? sizeInput.value : 'One Size';
|
||
if (!size) { showToast('Bitte wähle zuerst eine Größe.', 'warning'); return; }
|
||
addToCart(productId, size);
|
||
});
|
||
}
|
||
document.querySelectorAll('.js-quick-add').forEach((btn) => {
|
||
btn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
addToCart(btn.dataset.productId, btn.dataset.size || 'One Size');
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ===================== WARENKORB-SEITE ===================== */
|
||
function renderCartPage() {
|
||
const container = document.getElementById('cart-items');
|
||
const emptyMsg = document.getElementById('cart-empty');
|
||
const summary = document.getElementById('cart-summary');
|
||
if (!container) return;
|
||
const cart = getCart();
|
||
if (cart.length === 0) {
|
||
container.innerHTML = '';
|
||
if (emptyMsg) emptyMsg.style.display = 'block';
|
||
if (summary) summary.style.display = 'none';
|
||
return;
|
||
}
|
||
if (emptyMsg) emptyMsg.style.display = 'none';
|
||
if (summary) summary.style.display = 'block';
|
||
container.innerHTML = cart.map((item) => `
|
||
<div class="cart-item" data-key="${item.key}">
|
||
<div class="cart-item-img"><img src="${item.image}" alt="${item.name}" width="80" height="100" loading="lazy"></div>
|
||
<div class="cart-item-info">
|
||
<h3 class="cart-item-name">${item.name}</h3>
|
||
<span class="cart-item-size">Größe: ${item.size}</span>
|
||
<div class="cart-item-qty">
|
||
<button class="qty-btn" data-key="${item.key}" data-delta="-1" aria-label="Weniger">−</button>
|
||
<span class="qty-val">${item.qty}</span>
|
||
<button class="qty-btn" data-key="${item.key}" data-delta="1" aria-label="Mehr">+</button>
|
||
</div>
|
||
</div>
|
||
<div class="cart-item-price">
|
||
<span>${formatPrice(item.price * item.qty)}</span>
|
||
<button class="cart-remove" data-key="${item.key}" aria-label="${item.name} entfernen">Entfernen</button>
|
||
</div>
|
||
</div>`).join('');
|
||
container.querySelectorAll('.qty-btn').forEach((btn) => btn.addEventListener('click', () => { updateQty(btn.dataset.key, parseInt(btn.dataset.delta)); renderCartPage(); }));
|
||
container.querySelectorAll('.cart-remove').forEach((btn) => btn.addEventListener('click', () => { removeFromCart(btn.dataset.key); renderCartPage(); showToast('Artikel entfernt.', 'info'); }));
|
||
document.querySelectorAll('.js-cart-subtotal').forEach((el) => { el.textContent = formatPrice(cartTotal()); });
|
||
}
|
||
|
||
/* ===================== CHECKOUT (simuliert — später Stripe via Medusa) ===================== */
|
||
function initCheckout() {
|
||
const form = document.getElementById('checkout-form');
|
||
if (!form) return;
|
||
const summaryContainer = document.getElementById('checkout-order-items');
|
||
if (summaryContainer) {
|
||
const cart = getCart();
|
||
summaryContainer.innerHTML = cart.map((i) => `<div class="checkout-item"><span>${i.name} (${i.size}) × ${i.qty}</span><span>${formatPrice(i.price * i.qty)}</span></div>`).join('');
|
||
document.querySelectorAll('.js-checkout-total').forEach((el) => { el.textContent = formatPrice(cartTotal() + (cartTotal() >= 50 ? 0 : 4.9)); });
|
||
document.querySelectorAll('.js-checkout-shipping').forEach((el) => { el.textContent = cartTotal() >= 50 ? 'Kostenlos' : formatPrice(4.9); });
|
||
}
|
||
form.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
const cart = getCart();
|
||
if (!cart.length) { showToast('Dein Warenkorb ist leer.', 'warning'); return; }
|
||
const fd = new FormData(form);
|
||
const btn = form.querySelector('.checkout-submit-btn');
|
||
if (btn) { btn.disabled = true; btn.textContent = 'Wird verarbeitet …'; }
|
||
try {
|
||
const res = await fetch('/api/checkout', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ items: cart, contact: Object.fromEntries(fd.entries()) }),
|
||
});
|
||
const data = await res.json();
|
||
if (data.url) { localStorage.removeItem(CART_KEY); window.location.href = data.url; return; }
|
||
throw new Error(data.error || 'Fehler');
|
||
} catch (err) {
|
||
showToast('Checkout fehlgeschlagen. Bitte erneut versuchen.', 'warning');
|
||
if (btn) { btn.disabled = false; btn.textContent = 'Jetzt bestellen →'; }
|
||
}
|
||
});
|
||
}
|
||
|
||
/* ===================== INSTAGRAM-FEED ===================== */
|
||
const INSTA_POSTS = [
|
||
{ img: '/product-images/insta/insta-2.jpg', url: 'https://www.instagram.com/tgasolutions/reel/DVMOZMGiDto/' },
|
||
{ img: '/product-images/insta/insta-3.jpg', url: 'https://www.instagram.com/tgasolutions/reel/DVDX5KQiB8Z/' },
|
||
{ img: '/product-images/insta/insta-4.jpg', url: 'https://www.instagram.com/tgasolutions/reel/DU_br0OCE35/' },
|
||
{ img: '/product-images/insta/insta-1.jpg', url: 'https://www.instagram.com/tgasolutions/reel/DVgqeRQiNnD/' },
|
||
{ img: '/product-images/insta/insta-5.jpg', url: 'https://www.instagram.com/tgasolutions/reel/DVVazsxiIB8/' },
|
||
{ img: '/product-images/insta/insta-6.jpg', url: 'https://www.instagram.com/tgasolutions/reel/DVDX5KQiB8Z/' },
|
||
];
|
||
function initInstaFeed() {
|
||
const grid = document.getElementById('insta-grid');
|
||
if (!grid || !INSTA_POSTS.length) return;
|
||
grid.innerHTML = '';
|
||
grid.className = 'insta-grid';
|
||
grid.setAttribute('role', 'list');
|
||
INSTA_POSTS.forEach((post) => {
|
||
const tile = document.createElement('a');
|
||
tile.className = 'insta-post';
|
||
tile.href = post.url; tile.target = '_blank'; tile.rel = 'noopener noreferrer';
|
||
tile.setAttribute('role', 'listitem');
|
||
tile.setAttribute('aria-label', '@tgasolutions auf Instagram');
|
||
tile.innerHTML = `<img src="${post.img}" alt="@tgasolutions" loading="lazy">
|
||
<div class="insta-post-overlay">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><circle cx="12" cy="12" r="4.5"/><circle cx="17.5" cy="6.5" r="1.2" fill="white" stroke="none"/></svg>
|
||
<span class="insta-post-tag">@tgasolutions</span>
|
||
</div>`;
|
||
grid.appendChild(tile);
|
||
});
|
||
}
|
||
|
||
/* ===================== MOBILE-MENÜ ===================== */
|
||
function initMobileMenu() {
|
||
const toggle = document.getElementById('menu-toggle');
|
||
const nav = document.getElementById('main-nav');
|
||
if (!toggle || !nav) return;
|
||
toggle.addEventListener('click', () => {
|
||
const open = nav.classList.toggle('nav-open');
|
||
toggle.setAttribute('aria-expanded', open);
|
||
document.body.style.overflow = open ? 'hidden' : '';
|
||
});
|
||
nav.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => {
|
||
nav.classList.remove('nav-open');
|
||
toggle.setAttribute('aria-expanded', 'false');
|
||
document.body.style.overflow = '';
|
||
}));
|
||
}
|
||
|
||
/* ===================== STICKY MOBILE ADD-TO-CART ===================== */
|
||
function initStickyMobileATC() {
|
||
const mainBtn = document.getElementById('add-to-cart-btn');
|
||
if (!mainBtn || window.innerWidth > 900) return;
|
||
const nameEl = document.querySelector('[class*="pdp-name"]') || document.querySelector('h1');
|
||
const productName = nameEl ? nameEl.textContent.trim().split('\n')[0].trim() : 'Produkt';
|
||
const bar = document.createElement('div');
|
||
bar.id = 'sticky-atc';
|
||
bar.setAttribute('aria-hidden', 'true');
|
||
bar.innerHTML = `<span class="sticky-atc-name">${productName.substring(0, 40)}</span><button class="sticky-atc-btn" id="sticky-atc-btn">In den Warenkorb</button>`;
|
||
document.body.appendChild(bar);
|
||
const observer = new IntersectionObserver(([entry]) => {
|
||
bar.classList.toggle('sticky-atc-visible', !entry.isIntersecting);
|
||
bar.setAttribute('aria-hidden', entry.isIntersecting ? 'true' : 'false');
|
||
}, { threshold: 0, rootMargin: '0px 0px -60px 0px' });
|
||
observer.observe(mainBtn);
|
||
document.getElementById('sticky-atc-btn').addEventListener('click', () => {
|
||
if (!mainBtn.disabled) mainBtn.click();
|
||
else { mainBtn.scrollIntoView({ behavior: 'smooth', block: 'center' }); mainBtn.focus(); }
|
||
});
|
||
}
|
||
|
||
/* ===================== UTIL ===================== */
|
||
function formatPrice(num) {
|
||
return num.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
|
||
}
|
||
|
||
/* ===================== INIT ===================== */
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
updateCartUI();
|
||
initGallery();
|
||
initSizeSelector();
|
||
initAddToCart();
|
||
initMobileMenu();
|
||
if (document.getElementById('cart-items')) renderCartPage();
|
||
if (document.getElementById('checkout-form')) initCheckout();
|
||
if (document.body.dataset.page === 'product') initStickyMobileATC();
|
||
if (document.getElementById('insta-grid')) initInstaFeed();
|
||
});
|