-
Notifications
You must be signed in to change notification settings - Fork 3
/
checkout.html
90 lines (90 loc) · 3.7 KB
/
checkout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{% extends 'shop/base.html' %}
{% block title%} Checkout - My Awesome Cart{% endblock %}
{% block body %}
<div class="container">
<div class="col my-4">
<h2>Step 1 - My Awesome Cart Express Checkout - Review Your Cart Items</h2>
<div class="my-4">
<ul class="list-group" id="items">
</ul>
</div>
</div>
<div class="col my-4">
<h2>Step 2 - Enter Address & Other Details:</h2>
<form method="post" action="/shop/checkout/">{% csrf_token %}
<input type="hidden" name="itemsJson" id="itemsJson">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputname">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="address1" name="address1" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address line 2</label>
<input type="text" class="form-control" id="address2" name="address2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="city" name="city">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<input type="text" class="form-control" id="state" name="state" placeholder="Enter State">
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="zip_code" name="zip_code">
</div>
</div>
<div class="form-group">
<label for="inputZip">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone">
</div>
<button type="submit" class="btn btn-primary">Place Order</button>
</form>
</div>
</div>
{% endblock %}
{% block js %}
<script>
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
}
console.log(cart);
var sum = 0;
if ($.isEmptyObject(cart)) {
//if object is empty
mystr = `<p>Your cart is empty, please add some items to your cart before checking out!</p>`
$('#items').append(mystr);
} else {
for (item in cart) {
let name = cart[item][1];
let qty = cart[item][0];
sum = sum + qty;
mystr = `<li class="list-group-item d-flex justify-content-between align-items-center">
${name}
<span class="badge badge-primary badge-pill">${qty}</span>
</li>`
$('#items').append(mystr);
}
}
document.getElementById('cart').innerHTML = sum;
$('#itemsJson').val(JSON.stringify(cart));
{% if thank %}
alert('Thanks for ordering with us. Your order is is {{id}}. Use it to track your order using our order tracker');
localStorage.clear();
document.location = "/shop";
{% endif %}
</script>
{% endblock %}