-
Notifications
You must be signed in to change notification settings - Fork 7
/
cart.html
123 lines (103 loc) · 4.72 KB
/
cart.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel='stylesheet' href='https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-database.js"></script>
<link rel='stylesheet' href='css/style.css'/>
</head>
<body>
<!--nav Bar Panel -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id='home'>Ale´s Shop</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href='index.html'>Home</a></li>
<li class='drowpdown'>
<a href="#" class='dropdown-toggle' data-toggle='dropdown'>Categories <span class='caret'></span></a>
<ul class='dropdown-menu '>
<li><a href='index.html?c=tablets'>Tablets</a></li>
<li><a href='index.html?c=phones'>Phones</a></li>
<li><a href='index.html?c=laptops'>Laptops</a></li>
<li><a href='index.html?c=gaming'>Gaming</a></li>
<li><a href='index.html?c=cameras'>Cameras</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href='#' id='user_info' class='dropdown-toggle' data-toggle="dropdown" >Hello, Sign in <span class="caret"></a>
<ul class="dropdown-menu ">
<li id='settings'><a href="#" style='text-align:center'>Settings</a></li>
<li id='logout'><a href="#" style='text-align:center'>Logout <span class='glyphicon glyphicon-log-out'></span></a></li>
<li id='login'><a href='auth.html?auth=login' style='text-align:center'>Login <span class='glyphicon glyphicon-log-in'></span></a></li>
<li id='signUp'><a href='auth.html?auth=signup' style='text-align:center'>Sign Up <span class='glyphicon glyphicon-user'></span></a></li>
</ul>
</li>
<li class='active'><a href='#'>Cart <span class='glyphicon glyphicon-shopping-cart'></span></a></li>
</ul>
</div>
</div>
</nav>
<div class='container-fluid'>
<div class='container checkout' id='checkout'>
</div>
<div class="container padding-2" id='cart'>
</div>
</div>
<div class='container-fluid text-center padding-1 footer'>
<h4>Made By Alejandro Hernandez</h4>
</div>
<script src="https://www.gstatic.com/firebasejs/5.7.3/firebase.js"></script>
<script src='js/firebaseConfig.js'></script>
<script src='js/userInfo.js'></script>
<script src='js/cart.js'></script>
<script>
let checkout = document.getElementById('checkout');
let cart = document.getElementById('cart');
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
firebase.database().ref('cart/' + user.uid).on('value', snap => {
if(document.getElementById('checkoutRow') != null){
document.getElementById('checkoutRow').parentNode.removeChild(document.getElementById('checkoutRow'));
}
buildProceedToCheckOut(snap, checkout);
});
//user logs in
firebase.database().ref('cart/' + user.uid).on('child_added', snap => {
buildCartProducts(snap, cart);
});
}else {
//user logs out
if(document.getElementById('checkoutRow') != null){
document.getElementById('checkoutRow').parentNode.removeChild(document.getElementById('checkoutRow'));
}
let items = document.getElementsByClassName('item');
if(items[items.length - 1]){
for(let i = 0; i < items.length; i++){
items[i].parentNode.removeChild(items[i]);
}
}
buildLoginBtn(cart, 'auth.html?auth=login');
}
});
</script>
</body>
</html>