cart-localstorage
Version:
Tiny shopping cart on top of LolcalStorage - ES6, < 1Kb, full test coverage
109 lines (100 loc) • 3.54 kB
HTML
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/cart-localstorage@1.1.4/dist/cart-localstorage.min.js" type="text/javascript"></script>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h1 class="my-0 mr-md-auto font-weight-normal">cart-localstorage</h1>
<button class="btn btn-outline-warning mr-2" onClick="cartLS.destroy()">Destroy</button>
<a class="btn btn-outline-primary" href="https://github.com/peet86/cart-localstorage">Github Repository</a>
</div>
<div class="container">
<h2>Products</h2>
<div class="card-deck mt-4 mb-4 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Nike Air</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$100</h1>
<button type="button" class="btn btn-block btn-outline-primary"
onClick="cartLS.add({id: 1, name: 'Nike Air', price: 100})">Add to
Cart</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Adidas Superstar</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$120</h1>
<button type="button" class="btn btn-block btn-outline-primary"
onClick="cartLS.add({id: 2, name: 'Adidas Superstar', price: 120})">Add to
Cart</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Puma St Runner</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$130</h1>
<button type="button" class="btn btn-block btn-outline-primary"
onClick="cartLS.add({id: 3, name: 'Puma St Runner', price: 130})">Add to
Cart</button>
</div>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h2>Cart</h2>
</div>
<div class="card-body">
<table class="table">
<tbody class="cart">
</tbody>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-right">Total: <strong class="total"></strong></td>
<td></td>
</tfoot>
</table>
</div>
</div>
</div>
<script>
function renderCart(items) {
const $cart = document.querySelector(".cart")
const $total = document.querySelector(".total")
$cart.innerHTML = items.map((item) => `
<tr>
<td>#${item.id}</td>
<td>${item.name}</td>
<td>${item.quantity}</td>
<td style="width: 60px;">
<button type="button" class="btn btn-block btn-sm btn-outline-primary"
onClick="cartLS.quantity(${item.id},1)">+</button>
</td>
<td style="width: 60px;">
<button type="button" class="btn btn-block btn-sm btn-outline-primary"
onClick="cartLS.quantity(${item.id},-1)">-</button>
</td>
<td class="text-right">$${item.price}</td>
<td class="text-right"><Button class="btn btn-primary" onClick="cartLS.remove(${item.id})">Delete</Button></td>
</tr>`).join("")
$total.innerHTML = "$" + cartLS.total()
}
renderCart(cartLS.list())
cartLS.onChange(renderCart)
</script>
</body>
</html>