Add quantity selector in shop page

allensarmiento · Jul 23, 2019 · d3e2e74 · d3e2e74
1 parent e155212
commit d3e2e74
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/public/js/cart-items.js b/public/js/cart-items.js
@@ -5,7 +5,7 @@ function start() {
   let active_class = updateActiveNavbar();
   if (active_class === "cartNav" || url.search("checkout") >= 0) {
     loadCartItems();
-      if (sessionStorage.length > 0) {
+    if (sessionStorage.length > 0) {
       if (active_class === "cartNav") {
         displayShoppingTotal();
       } else if (url.search("checkout") >= 0) {
@@ -24,7 +24,7 @@ function displayShoppingTotal() {
     total += value.price * value.quantity;
   }
   document.getElementById("cart").innerHTML += 
-    '<h5>Shopping Total: $' + Number.parseFloat(total).toFixed(2) + '</h5>\
+    '<h5>Items Total: $' + Number.parseFloat(total).toFixed(2) + '</h5>\
     <a class="btn btn-warning" href="/checkout">Proceed to Checkout</a>';
 }
 
@@ -45,6 +45,7 @@ function displayTotal() {
       <h5>Items: $' + Number.parseFloat(shop_total).toFixed(2) + '</h5>\
       <h5>Taxes: $' + Number.parseFloat(taxes).toFixed(2) + '<h5>\
       <h5>Total: $' + Number.parseFloat(total).toFixed(2) + '</h5>\
+      <button class="btn btn-warning" onclick="checkout();">Checkout</button>\
     ';
 }
 
@@ -61,14 +62,18 @@ function loadCartItems() {
 
 // Add item to cart
 function addToCart(itemName, itemImage) {
+  var sel = document.getElementById(itemName.split(" ").join("-"));
+  var quantity = Number.parseInt(sel.value);
+  sel.value = "1";
+
   if (sessionStorage.getItem(itemName)) {
     // Item exists in storage
     let value = JSON.parse(sessionStorage[itemName]);
-    value.quantity = Number(value.quantity + 1);
+    value.quantity = Number(value.quantity + quantity);
     sessionStorage[itemName] = JSON.stringify(value);
   } else {
     // Item not in session storage
-    let value = { image: itemImage, quantity: 1, price: 1.11 };
+    let value = { image: itemImage, quantity: quantity, price: 1.11 };
     sessionStorage.setItem(itemName, JSON.stringify(value)); // key: item name, value: quantity
   }
   updateCartItems();

diff --git a/views/checkout.ejs b/views/checkout.ejs
@@ -5,7 +5,6 @@
   <div id="cart">
     <!-- Cart Items -->
   </div>
-  <button class="btn btn-warning" onclick="checkout();">Checkout</button>
 </div>
 
 <% include partials/footer %>
diff --git a/views/shop.ejs b/views/shop.ejs
@@ -31,6 +31,20 @@
                   <h5 class="card-title text-left"><%= item.name %></h5>
                   <p class="card-text m-0"><%= item.blend %></p>
                   <p class="card-text">Price: $<%= item.price %></p>
+
+                  <select id="<%= item.name.split(' ').join('-') %>">
+                    <option value="1" selected>1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
+                    <option value="10">10</option>
+                  </select>
+
                   <button type="button" class="btn btn-warning" onclick="addToCart('<%= item.name %>', '<%= item.image %>');">Add to Cart</button>
                 </div>
               </div>