🐳 17/04 - 12:34 - it doesnt work anymore

index.html

@@ -8,6 +8,7 @@
     
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="styles.css">
     
     <!-- Lucide Icons -->
     <script src="https://unpkg.com/lucide@latest"></script>

script.js

@@ -12,6 +12,12 @@ const app = {
     productQuantity: 1,
     activeCategory: null,
     products: [],
+    checkoutStep: 1,
+    selectedPaymentMethod: null,
+    shippingInfo: null,
+    orderReference: '',
+    cartDrawerOpen: false,
+    shippingListenersAttached: false,
     
     // Translations
     translations: {
@@ -414,6 +420,24 @@ const app = {
                 if (preview) preview.textContent = cardNameInput.value.toUpperCase() || 'YOUR NAME';
             });
         }
+
+        // Live card number preview
+        const cardNumberInput = document.getElementById('card-number');
+        if (cardNumberInput) {
+            cardNumberInput.addEventListener('input', () => {
+                const preview = document.getElementById('card-preview-number');
+                if (preview) preview.textContent = cardNumberInput.value || '•••• •••• •••• ••••';
+            });
+        }
+
+        // Live expiry preview
+        const cardExpiryInput = document.getElementById('card-expiry');
+        if (cardExpiryInput) {
+            cardExpiryInput.addEventListener('input', () => {
+                const preview = document.getElementById('card-preview-expiry');
+                if (preview) preview.textContent = cardExpiryInput.value || 'MM/YY';
+            });
+        }
     },
 
     // Generate mock products
@@ -520,6 +544,15 @@ const app = {
 
     // Navigation
     navigate(page) {
+        // If navigating to 'shop', go to home and scroll to products
+        if (page === 'shop') {
+            page = 'home';
+            setTimeout(() => {
+                const productsSection = document.getElementById('products-section');
+                if (productsSection) productsSection.scrollIntoView({ behavior: 'smooth' });
+            }, 100);
+        }
+
         // Hide all pages
         document.querySelectorAll('[id^="page-"]').forEach(el => el.classList.add('hidden'));
         
@@ -769,9 +802,9 @@ const app = {
     },
 
     updateCartUI() {
-        const cartCount = this.cart.reduce((sum, item) => sum + item.quantity, 0);
+        const cartCount = this.cart.reduce((sum, item) => sum + (item.quantity || 0), 0);
         // Prices are already inclusive of VAT, so total is just the sum
-        const total = this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+        const total = this.cart.reduce((sum, item) => sum + ((item.price || 0) * (item.quantity || 1)), 0);
         // Calculate VAT portion from the inclusive total: VAT = Total - (Total / 1.081)
         const vat = total - (total / 1.081);
         const subtotal = total - vat; // Price without VAT
@@ -859,10 +892,25 @@ const app = {
             drawer.classList.remove('pointer-events-none');
             panel.classList.add('open');
             overlay.classList.remove('opacity-0');
+            this.cartDrawerOpen = true;
         } else {
             drawer.classList.add('pointer-events-none');
             panel.classList.remove('open');
             overlay.classList.add('opacity-0');
+            this.cartDrawerOpen = false;
+        }
+    },
+
+    closeCartDrawer() {
+        const drawer = document.getElementById('cart-drawer');
+        const panel = document.getElementById('cart-panel');
+        const overlay = document.getElementById('cart-overlay');
+        
+        if (drawer && !drawer.classList.contains('pointer-events-none')) {
+            drawer.classList.add('pointer-events-none');
+            if (panel) panel.classList.remove('open');
+            if (overlay) overlay.classList.add('opacity-0');
+            this.cartDrawerOpen = false;
         }
     },
 
@@ -896,9 +944,37 @@ const app = {
     // Checkout
     checkout() {
         if (this.cart.length === 0) return;
-        this.toggleCart();
+        // Properly close the cart drawer (don't toggle - it might open it)
+        this.closeCartDrawer();
         this.selectedPaymentMethod = null;
         this.checkoutStep = 1;
+        
+        // Reset payment method UI
+        document.querySelectorAll('.payment-method-label').forEach(label => {
+            label.classList.remove('border-brand-600', 'bg-brand-50', 'dark:bg-brand-900/20');
+            label.classList.add('border-gray-200', 'dark:border-gray-700');
+            const dot = label.querySelector('.payment-dot');
+            if (dot) dot.classList.add('hidden');
+            const radio = label.querySelector('.payment-radio');
+            if (radio) {
+                radio.classList.remove('border-brand-600');
+                radio.classList.add('border-gray-300', 'dark:border-gray-600');
+            }
+        });
+        document.querySelectorAll('.payment-form').forEach(f => f.classList.add('hidden'));
+        const payBtn = document.getElementById('pay-now-btn');
+        if (payBtn) payBtn.disabled = true;
+        
+        // Reset shipping form styles
+        ['ship-firstname', 'ship-lastname', 'ship-email', 'ship-address', 'ship-zip', 'ship-city'].forEach(id => {
+            const el = document.getElementById(id);
+            if (el) el.classList.remove('border-red-400', 'dark:border-red-500');
+        });
+        const errorEl1 = document.getElementById('checkout-error-step1');
+        if (errorEl1) errorEl1.classList.add('hidden');
+        const errorEl2 = document.getElementById('checkout-error-step2');
+        if (errorEl2) errorEl2.classList.add('hidden');
+        
         this.navigate('checkout');
         this.renderCheckoutSummary();
         this.updateCheckoutSteps();
@@ -918,17 +994,23 @@ const app = {
     },
 
     renderCheckoutSummary() {
-        // Listen for shipping method changes
-        document.querySelectorAll('input[name="shipping"]').forEach(radio => {
-            radio.addEventListener('change', () => this.renderCheckoutSummary());
-        });
+        // Listen for shipping method changes (only once)
+        if (!this.shippingListenersAttached) {
+            document.querySelectorAll('input[name="shipping"]').forEach(radio => {
+                radio.addEventListener('change', () => this.renderCheckoutSummary());
+            });
+            this.shippingListenersAttached = true;
+        }
 
-        const total = this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+        const total = this.cart.reduce((sum, item) => sum + ((item.price || 0) * (item.quantity || 1)), 0);
         const vat = total - (total / 1.081);
         const subtotal = total - vat;
         const shippingCost = this.getShippingCost();
         const grandTotal = total + shippingCost;
 
+        // Store grand total for later use
+        this._grandTotal = grandTotal;
+
         // Items list
         const itemsEl = document.getElementById('checkout-items');
         if (itemsEl) {
@@ -961,13 +1043,12 @@ const app = {
     getShippingCost() {
         const shippingRadio = document.querySelector('input[name="shipping"]:checked');
         if (!shippingRadio) return 0;
-        const total = this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
         if (shippingRadio.value === 'express') return 9.90;
         return 0; // standard & pickup are free
     },
 
     getGrandTotal() {
-        const total = this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+        const total = this.cart.reduce((sum, item) => sum + ((item.price || 0) * (item.quantity || 1)), 0);
         return total + this.getShippingCost();
     },
 
@@ -1062,6 +1143,13 @@ const app = {
         this.checkoutStep = 2;
         this.updateCheckoutSteps();
         this.renderCheckoutSummary();
+
+        // Reset and enable pay button for step 2
+        const payBtn = document.getElementById('pay-now-btn');
+        if (payBtn && this.selectedPaymentMethod) {
+            payBtn.disabled = false;
+        }
+
         window.scrollTo(0, 0);
     },
 
@@ -1077,18 +1165,24 @@ const app = {
         // Update radio UI
         document.querySelectorAll('.payment-method-label').forEach(label => {
             const isActive = label.dataset.method === method;
+            const dot = label.querySelector('.payment-dot');
+            const radio = label.querySelector('.payment-radio');
             if (isActive) {
                 label.classList.add('border-brand-600', 'bg-brand-50', 'dark:bg-brand-900/20');
                 label.classList.remove('border-gray-200', 'dark:border-gray-700');
-                label.querySelector('.payment-dot').classList.remove('hidden');
-                label.querySelector('.payment-radio').classList.add('border-brand-600');
-                label.querySelector('.payment-radio').classList.remove('border-gray-300', 'dark:border-gray-600');
+                if (dot) dot.classList.remove('hidden');
+                if (radio) {
+                    radio.classList.add('border-brand-600');
+                    radio.classList.remove('border-gray-300', 'dark:border-gray-600');
+                }
             } else {
                 label.classList.remove('border-brand-600', 'bg-brand-50', 'dark:bg-brand-900/20');
                 label.classList.add('border-gray-200', 'dark:border-gray-700');
-                label.querySelector('.payment-dot').classList.add('hidden');
-                label.querySelector('.payment-radio').classList.remove('border-brand-600');
-                label.querySelector('.payment-radio').classList.add('border-gray-300', 'dark:border-gray-600');
+                if (dot) dot.classList.add('hidden');
+                if (radio) {
+                    radio.classList.remove('border-brand-600');
+                    radio.classList.add('border-gray-300', 'dark:border-gray-600');
+                }
             }
         });
 
@@ -1097,9 +1191,18 @@ const app = {
         const formEl = document.getElementById(`payment-${method}`);
         if (formEl) formEl.classList.remove('hidden');
 
-        // Enable pay button
+        // Enable and restore pay button
         const payBtn = document.getElementById('pay-now-btn');
-        if (payBtn) payBtn.disabled = false;
+        if (payBtn) {
+            payBtn.disabled = false;
+            const grandTotal = this._grandTotal || this.getGrandTotal();
+            const payNowText = this.translations[this.language]?.pay_now || 'Pay Now';
+            payBtn.innerHTML = `
+                <i data-lucide="lock" class="w-5 h-5"></i>
+                <span>${payNowText}</span>
+                <span id="pay-now-amount">CHF ${grandTotal.toFixed(2)}</span>
+            `;
+        }
 
         lucide.createIcons();
     },
@@ -1189,12 +1292,16 @@ const app = {
 
         // Simulate payment processing
         setTimeout(() => {
+            // Restore pay button state
+            if (payBtn) {
+                payBtn.disabled = false;
+            }
             this.completeOrder();
         }, 2000);
     },
 
     completeOrder() {
-        const grandTotal = this.getGrandTotal();
+        const grandTotal = this._grandTotal || this.getGrandTotal();
         const paymentMethodNames = {
             de: { twint: 'TWINT', card: 'Kreditkarte', paypal: 'PayPal', bank: 'Banküberweisung' },
             fr: { twint: 'TWINT', card: 'Carte de crédit', paypal: 'PayPal', bank: 'Virement bancaire' },
@@ -1206,22 +1313,37 @@ const app = {
             it: { standard: 'Posta Standard', express: 'Posta Express', pickup: 'Ritiro sul posto' }
         };
 
+        const currentLang = this.language || 'de';
+        const currentPayment = this.selectedPaymentMethod || 'twint';
+        const currentShipping = (this.shippingInfo && this.shippingInfo.method) || 'standard';
+
         // Set confirmation details
-        document.getElementById('order-number').textContent = this.orderReference;
-        document.getElementById('confirmation-payment-method').textContent = paymentMethodNames[this.language]?.[this.selectedPaymentMethod] || this.selectedPaymentMethod;
-        document.getElementById('confirmation-shipping').textContent = shippingMethodNames[this.language]?.[this.shippingInfo?.method || 'standard'] || 'Standard';
-        document.getElementById('confirmation-total').textContent = `CHF ${grandTotal.toFixed(2)}`;
+        const orderNumEl = document.getElementById('order-number');
+        if (orderNumEl) orderNumEl.textContent = this.orderReference || 'ALN-PENDING';
+
+        const payMethodEl = document.getElementById('confirmation-payment-method');
+        if (payMethodEl) payMethodEl.textContent = (paymentMethodNames[currentLang] && paymentMethodNames[currentLang][currentPayment]) || currentPayment;
+
+        const shipMethodEl = document.getElementById('confirmation-shipping');
+        if (shipMethodEl) shipMethodEl.textContent = (shippingMethodNames[currentLang] && shippingMethodNames[currentLang][currentShipping]) || 'Standard';
+
+        const totalEl = document.getElementById('confirmation-total');
+        if (totalEl) totalEl.textContent = `CHF ${grandTotal.toFixed(2)}`;
 
         // Estimated delivery
         const deliveryDate = new Date();
-        if (this.shippingInfo?.method === 'express') {
+        if (currentShipping === 'express') {
             deliveryDate.setDate(deliveryDate.getDate() + 1);
-        } else if (this.shippingInfo?.method === 'pickup') {
+        } else if (currentShipping === 'pickup') {
             deliveryDate.setDate(deliveryDate.getDate() + 3);
         } else {
             deliveryDate.setDate(deliveryDate.getDate() + 3);
         }
-        document.getElementById('confirmation-delivery').textContent = deliveryDate.toLocaleDateString(this.language === 'de' ? 'de-CH' : this.language === 'fr' ? 'fr-CH' : 'it-CH');
+        const deliveryEl = document.getElementById('confirmation-delivery');
+        if (deliveryEl) {
+            const locale = currentLang === 'de' ? 'de-CH' : currentLang === 'fr' ? 'fr-CH' : 'it-CH';
+            deliveryEl.textContent = deliveryDate.toLocaleDateString(locale);
+        }
 
         // Move to confirmation step
         this.checkoutStep = 3;