File manager - Edit - /home/webapp69.cm.in.th/u69319090027/shop02/app.js
Back
// STATE MANAGEMENT let cart = JSON.parse(localStorage.getItem('vortex_cart')) || []; // DOM ELEMENTS const cartToggleBtn = document.getElementById('cart-toggle'); const closeCartBtn = document.getElementById('close-cart'); const cartSidebar = document.getElementById('cart-sidebar'); const cartBackdrop = document.getElementById('cart-backdrop'); const cartBadgeCount = document.getElementById('cart-badge-count'); const cartSidebarCount = document.getElementById('cart-sidebar-count'); const cartItemsContainer = document.getElementById('cart-items-container'); const cartSubtotal = document.getElementById('cart-subtotal'); const cartTotal = document.getElementById('cart-total'); const toast = document.getElementById('toast'); const toastText = document.getElementById('toast-text'); // Initialize cart on page load updateCartUI(); // DYNAMIC CART SIDEBAR OPEN/CLOSE if (cartToggleBtn) { cartToggleBtn.addEventListener('click', () => { cartSidebar.classList.add('open'); cartBackdrop.classList.add('show'); }); } if (closeCartBtn) { closeCartBtn.addEventListener('click', closeCart); } if (cartBackdrop) { cartBackdrop.addEventListener('click', closeCart); } function closeCart() { if (cartSidebar) cartSidebar.classList.remove('open'); if (cartBackdrop) cartBackdrop.classList.remove('show'); } // TOAST NOTIFICATION UTILITY function showToast(message) { if (toast && toastText) { toastText.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 2500); } } // ADD ITEM TO CART FUNCTION function addToCart(id, name, price, img, size, qty = 1) { // Check if item with same ID and size exists const existingItemIndex = cart.findIndex(item => item.id === id && item.size === size); if (existingItemIndex > -1) { cart[existingItemIndex].qty += qty; } else { cart.push({ id, name, price, img, size, qty }); } // Save to localStorage localStorage.setItem('vortex_cart', JSON.stringify(cart)); // Update view updateCartUI(); // Show toast showToast(`ADDED ${name} (${size}) TO BAG!`); // Auto open cart sidebar for high conversion setTimeout(() => { if (cartSidebar && cartBackdrop) { cartSidebar.classList.add('open'); cartBackdrop.classList.add('show'); } }, 300); } // REMOVE ITEM FROM CART function removeFromCart(index) { const removedName = cart[index].name; cart.splice(index, 1); localStorage.setItem('vortex_cart', JSON.stringify(cart)); updateCartUI(); showToast(`REMOVED ${removedName} FROM BAG`); } // UPDATE CART BADGE AND RENDER ITEMS function updateCartUI() { // Calculate total items const totalItems = cart.reduce((sum, item) => sum + item.qty, 0); if (cartBadgeCount) cartBadgeCount.textContent = totalItems; if (cartSidebarCount) cartSidebarCount.textContent = totalItems; // Calculate totals const subtotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0); if (cartSubtotal) cartSubtotal.textContent = `฿${subtotal.toLocaleString()}`; if (cartTotal) cartTotal.textContent = `฿${subtotal.toLocaleString()}`; // Render items if (!cartItemsContainer) return; if (cart.length === 0) { cartItemsContainer.innerHTML = ` <div class="empty-cart-message" style="text-align: center; margin-top: 40px; color: var(--text-muted);"> <i class="fa-solid fa-bag-shopping" style="font-size: 3rem; margin-bottom: 16px; display: block; color: rgba(255,255,255,0.05)"></i> BAG IS EMPTY </div> `; return; } cartItemsContainer.innerHTML = cart.map((item, index) => ` <div class="cart-item"> <img src="${item.img}" class="cart-item-img" alt="${item.name}"> <div class="cart-item-info"> <h4 class="cart-item-name">${item.name}</h4> <div class="cart-item-meta">SIZE: ${item.size} | QTY: ${item.qty}</div> <div class="cart-item-pricing"> <span class="cart-item-price">฿${(item.price * item.qty).toLocaleString()}</span> <span class="cart-item-remove" onclick="removeFromCart(${index})">REMOVE</span> </div> </div> </div> `).join(''); } // INTERACTIVE: HOMEPAGE QUICK ADD const quickAddBtns = document.querySelectorAll('.quick-add-btn'); quickAddBtns.forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const id = btn.getAttribute('data-id'); const name = btn.getAttribute('data-name'); const price = parseInt(btn.getAttribute('data-price')); const img = btn.getAttribute('data-img'); const size = btn.getAttribute('data-size'); addToCart(id, name, price, img, size, 1); }); }); // INTERACTIVE: SIZE SELECTION (PRODUCT PAGE) const sizeButtons = document.querySelectorAll('.size-options .size-btn'); let selectedSize = 'M'; // Default active size in HTML sizeButtons.forEach(btn => { btn.addEventListener('click', () => { sizeButtons.forEach(b => b.classList.remove('active')); btn.classList.add('active'); selectedSize = btn.textContent; }); }); // INTERACTIVE: QUANTITY SELECTOR (PRODUCT PAGE) const qtyMinus = document.getElementById('qty-minus'); const qtyPlus = document.getElementById('qty-plus'); const qtyValue = document.getElementById('qty-value'); let productQty = 1; if (qtyMinus && qtyPlus && qtyValue) { qtyMinus.addEventListener('click', () => { if (productQty > 1) { productQty--; qtyValue.textContent = productQty; } }); qtyPlus.addEventListener('click', () => { productQty++; qtyValue.textContent = productQty; }); } // INTERACTIVE: ADD TO BAG BUTTON (PRODUCT PAGE) const addToBagBtn = document.getElementById('add-to-bag-btn'); if (addToBagBtn) { addToBagBtn.addEventListener('click', () => { const id = "1"; const name = "VORTEX NEO-FUTURE HOODIE"; const price = 2490; const img = document.getElementById('main-product-image').src; addToCart(id, name, price, img, selectedSize, productQty); }); } // INTERACTIVE: GALLERY THUMBNAIL SWITCHER (PRODUCT PAGE) const thumbButtons = document.querySelectorAll('.thumb-btn'); const mainProductImage = document.getElementById('main-product-image'); thumbButtons.forEach(btn => { btn.addEventListener('click', () => { thumbButtons.forEach(b => b.classList.remove('active')); btn.classList.add('active'); const newImgSrc = btn.getAttribute('data-img'); if (mainProductImage) { mainProductImage.src = newImgSrc; } }); }); // INTERACTIVE: DETAILS ACCORDION const accordionTriggers = document.querySelectorAll('.accordion-trigger'); accordionTriggers.forEach(trigger => { trigger.addEventListener('click', () => { const item = trigger.parentElement; const isActive = item.classList.contains('active'); // In a simple toggle accordion: item.classList.toggle('active'); }); }); // INTERACTIVE: SIZE GUIDE MODAL const sizeGuideToggle = document.getElementById('size-guide-toggle'); const sizeGuideModal = document.getElementById('size-guide-modal'); const closeModalBtn = document.getElementById('close-modal'); if (sizeGuideToggle && sizeGuideModal) { sizeGuideToggle.addEventListener('click', () => { sizeGuideModal.classList.add('open'); }); } if (closeModalBtn && sizeGuideModal) { closeModalBtn.addEventListener('click', () => { sizeGuideModal.classList.remove('open'); }); sizeGuideModal.addEventListener('click', (e) => { if (e.target === sizeGuideModal) { sizeGuideModal.classList.remove('open'); } }); } // INTERACTIVE: COMPLETE THE LOOK BUNDLE ADD (CROSS-SELL) const addBundleBtn = document.getElementById('add-bundle-btn'); if (addBundleBtn) { addBundleBtn.addEventListener('click', () => { // Add Hoodie, Cargo Pants, and Beanie to cart at once (discounted bundle) // For representation, we add them individually to the cart const itemsToAdd = [ { id: "1", name: "VORTEX NEO-FUTURE HOODIE", price: 2190, img: "https://images.unsplash.com/photo-1556821840-3a63f95609a7?q=80&w=150&auto=format&fit=crop", size: selectedSize }, { id: "3", name: "VORTEX NEON CARGO PANTS", price: 1620, img: "https://images.unsplash.com/photo-1517423568366-8b83523034fd?q=80&w=150&auto=format&fit=crop", size: "32" }, { id: "4", name: "ACID WASH ORANGE BEANIE", price: 690, img: "https://images.unsplash.com/photo-1576871337632-b9aef4c17ab9?q=80&w=150&auto=format&fit=crop", size: "Free Size" } ]; itemsToAdd.forEach(item => { // Direct add to state without firing individual sidebar opening loops const existingItemIndex = cart.findIndex(cItem => cItem.id === item.id && cItem.size === item.size); if (existingItemIndex > -1) { cart[existingItemIndex].qty += 1; } else { cart.push({ id: item.id, name: item.name, price: item.price, img: item.img, size: item.size, qty: 1 }); } }); localStorage.setItem('vortex_cart', JSON.stringify(cart)); updateCartUI(); showToast(`ADDED 3 ITEMS BUNDLE TO BAG! (SAVED ฿670)`); // Open Cart Sidebar setTimeout(() => { if (cartSidebar && cartBackdrop) { cartSidebar.classList.add('open'); cartBackdrop.classList.add('show'); } }, 300); }); } // ========================================== // AUTHENTICATION SYSTEM (LOGIN/REGISTER) // ========================================== let currentUser = JSON.parse(localStorage.getItem('vortex_user')) || null; const userBtn = document.getElementById('user-btn'); const authModal = document.getElementById('auth-modal'); const closeAuthModalBtn = document.getElementById('close-auth-modal'); const tabLogin = document.getElementById('tab-login'); const tabRegister = document.getElementById('tab-register'); const formLoginContainer = document.getElementById('form-login-container'); const formRegisterContainer = document.getElementById('form-register-container'); const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); const socialGoogleBtn = document.getElementById('social-google-btn'); const socialAppleBtn = document.getElementById('social-apple-btn'); // Initialize user UI state on load updateUserUI(); // USER BUTTON CLICK (OPEN MODAL OR LOGOUT) if (userBtn) { userBtn.addEventListener('click', () => { if (currentUser) { // If already logged in, show logout confirmation if (confirm(`LOGGED IN AS: ${currentUser.name}\n\nDo you want to sign out?`)) { currentUser = null; localStorage.removeItem('vortex_user'); updateUserUI(); showToast("LOGGED OUT OF VORTEX"); } } else { // If not logged in, open the modal if (authModal) { authModal.classList.add('open'); } } }); } // CLOSE MODAL EVENTS if (closeAuthModalBtn) { closeAuthModalBtn.addEventListener('click', closeAuthModal); } if (authModal) { authModal.addEventListener('click', (e) => { if (e.target === authModal) { closeAuthModal(); } }); } function closeAuthModal() { if (authModal) { authModal.classList.remove('open'); } } // TAB TOGGLE (LOGIN / REGISTER) if (tabLogin && tabRegister) { tabLogin.addEventListener('click', () => { tabLogin.classList.add('active'); tabRegister.classList.remove('active'); formLoginContainer.classList.add('active'); formRegisterContainer.classList.remove('active'); }); tabRegister.addEventListener('click', () => { tabRegister.classList.add('active'); tabLogin.classList.remove('active'); formRegisterContainer.classList.add('active'); formLoginContainer.classList.remove('active'); }); } // FORM SUBMISSION: LOGIN if (loginForm) { loginForm.addEventListener('submit', (e) => { e.preventDefault(); const email = document.getElementById('login-email').value; const userName = email.split('@')[0].toUpperCase(); // Fake login action currentUser = { name: userName, email: email }; localStorage.setItem('vortex_user', JSON.stringify(currentUser)); updateUserUI(); closeAuthModal(); showToast(`WELCOME BACK, ${currentUser.name}!`); }); } // FORM SUBMISSION: REGISTER if (registerForm) { registerForm.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('reg-name').value; const email = document.getElementById('reg-email').value; // Fake registration action currentUser = { name: name.toUpperCase(), email: email }; localStorage.setItem('vortex_user', JSON.stringify(currentUser)); updateUserUI(); closeAuthModal(); showToast(`WELCOME TO THE RESISTANCE, ${currentUser.name}!`); }); } // SOCIAL LOGINS if (socialGoogleBtn) { socialGoogleBtn.addEventListener('click', () => fakeSocialLogin('GOOGLE')); } if (socialAppleBtn) { socialAppleBtn.addEventListener('click', () => fakeSocialLogin('APPLE')); } function fakeSocialLogin(provider) { currentUser = { name: `${provider} REBEL`, email: `rebel@${provider.toLowerCase()}.com` }; localStorage.setItem('vortex_user', JSON.stringify(currentUser)); updateUserUI(); closeAuthModal(); showToast(`CONNECTED VIA ${provider}!`); } // UPDATE USER UI INDICATOR function updateUserUI() { if (userBtn) { if (currentUser) { userBtn.classList.add('logged-in'); userBtn.title = `Logged in as ${currentUser.name} (Click to sign out)`; } else { userBtn.classList.remove('logged-in'); userBtn.title = "Sign in to Vortex"; } } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.27 |
proxy
|
phpinfo
|
Settings