public/lab9/task3/cart.html - main - Coderdev/web-nodejs-labs

public/lab9/task3/cart.html
1 строка4 KB
Coderdev
23 апр 2026, 22:48
23 апр 2026, 22:48fe8b855
<!doctype html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lab9 Cart</title><style>body{margin:0;font-family:Arial,sans-serif;background:#0f172a;color:#e2e8f0}.wrapper{max-width:1100px;margin:0 auto;padding:24px}.panel,.card{background:#111c34;border:1px solid #25314d;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}.panel{padding:24px}.list-item{border-bottom:1px solid #25314d;padding:14px 0;display:flex;justify-content:space-between;gap:14px;align-items:center}button,a.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:#2563eb;color:#fff;text-decoration:none;border:none;cursor:pointer}.qty{display:flex;gap:8px;align-items:center}.muted{color:#94a3b8}.danger{background:#dc2626}.success{background:#16a34a}input[type=number]{width:72px;min-height:40px;border-radius:10px;border:1px solid #334155;background:#0f172a;color:#fff;padding:0 10px}</style></head><body><div class="wrapper"><a class="btn" href="/lab9/task3/" style="background:#334155">← Назад в каталог</a><div class="panel" style="margin-top:16px"><h1 style="margin-top:0">Моя корзина</h1><div id="cartBox">Загрузка...</div><div id="totalBox" style="margin-top:18px"></div><div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:16px"><button id="verifyBtn">Оформить товар</button><button id="buyBtn" class="success">Купить</button></div><div id="message" style="margin-top:16px" class="muted"></div></div></div><script>const API='/api/lab9/products';const CART_KEY='lab9_cart';const RUB=new Intl.NumberFormat('ru-RU',{style:'currency',currency:'RUB'});function formatPrice(cents){return RUB.format(Number(cents||0)/100)}function getCart(){return JSON.parse(localStorage.getItem(CART_KEY)||'[]')}function setCart(items){localStorage.setItem(CART_KEY,JSON.stringify(items));renderCart()}function renderCart(){const cart=getCart();const box=document.getElementById('cartBox');const total=cart.reduce((sum,item)=>sum+item.price*item.qty,0);document.getElementById('totalBox').innerHTML=`<strong>Общая стоимость: ${formatPrice(total)}</strong>`;if(!cart.length){box.innerHTML='<div class="muted">Корзина пуста.</div>';return}box.innerHTML=cart.map((item,index)=>`<div class="list-item"><div><strong>${item.title}</strong><br><span class="muted">Цена: ${formatPrice(item.price)}</span></div><div class="qty"><input type="number" min="1" max="5" value="${item.qty}" data-index="${index}" class="qtyInput"><button class="danger removeBtn" data-index="${index}">Удалить</button></div></div>`).join('');document.querySelectorAll('.qtyInput').forEach(input=>input.addEventListener('input',e=>{const cart=getCart();const idx=Number(e.target.dataset.index);cart[idx].qty=Math.min(5,Math.max(1,Number(e.target.value||1)));localStorage.setItem(CART_KEY,JSON.stringify(cart));renderCart()}));document.querySelectorAll('.removeBtn').forEach(btn=>btn.addEventListener('click',e=>{const cart=getCart();cart.splice(Number(e.target.dataset.index),1);setCart(cart)}))}async function verifyCart(){const items=getCart().map(item=>({id:item.id,qty:item.qty}));const res=await fetch(API+'/checkout/verify',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({items})});const data=await res.json();document.getElementById('message').textContent=res.ok?data.message:JSON.stringify(data)}async function buyCart(){const items=getCart().map(item=>({id:item.id,qty:item.qty}));const res=await fetch(API+'/checkout/buy',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({items})});const data=await res.json();if(res.ok){localStorage.removeItem(CART_KEY);renderCart()}document.getElementById('message').textContent=res.ok?data.message:JSON.stringify(data)}document.getElementById('verifyBtn').addEventListener('click',verifyCart);document.getElementById('buyBtn').addEventListener('click',buyCart);renderCart();</script></body></html>