You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.3 KiB
66 lines
1.3 KiB
<script>
|
|
let Data = new PaginateTable("/api/shopping/products");
|
|
|
|
let cartItems = [];
|
|
|
|
const update = () => {
|
|
let total = cartItems.reduce((a, v) => a + v.Price, 0.0);
|
|
|
|
$render_data('cart-item', 'cart', cartItems);
|
|
|
|
if(cartItems.length > 0) {
|
|
$style_del($id('cart'), 'hidden');
|
|
} else {
|
|
$style_add($id('cart'), 'hidden');
|
|
}
|
|
|
|
$text($id('cart-total'), `$${total}`);
|
|
}
|
|
|
|
const remove = (item_number) => {
|
|
cartItems.splice(item_number, 1);
|
|
update();
|
|
}
|
|
|
|
$boot(async () => {
|
|
cartItems = await Data.contents();
|
|
update();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#cart-empty.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<h1>Checkout</h1>
|
|
|
|
<block id="cart">
|
|
</block>
|
|
|
|
<block id='cart-empty' class='hidden'>
|
|
<h4>Cart Empty</h4>
|
|
<p>Your cart is empty.</p>
|
|
</block>
|
|
|
|
<template id="cart-item">
|
|
<bar class="bg-gray-800">
|
|
<aside>${item.Title}</aside>
|
|
|
|
<bar class="justify-between" style="padding:30px">
|
|
<div class="text-2xl">Price: ${item.Price}</div>
|
|
<button onclick="remove(${i})" type="button">X</button>
|
|
</bar>
|
|
</bar>
|
|
</template>
|
|
|
|
<table>
|
|
<tr><th>Subtotal:</th><td>$100.00</td></tr>
|
|
<tr><th>Total:</th><td id='cart-total'></td></tr>
|
|
</table>
|
|
|
|
<bar>
|
|
<a href="/shopping/"><button type="button">Continue Shopping</button></a>
|
|
<a href="/fakepay/"><button type="button">Pay with FakePay</button></a>
|
|
</bar>
|
|
|