Merge pull request #5526 from KanchanChauhan/shopping-cart-dropdown-update

Shopping cart dropdown update

erpnext/public/css/website.css

@@ -130,6 +130,9 @@
 .cart-container {
   margin: 50px 0px;
 }
+.cart-container .checkout {
+  margin-bottom: 15px;
+}
 .cart-container .cart-item-header .h6 {
   padding: 7px 15px;
 }
@@ -163,12 +166,12 @@
 .cart-container .cart-addresses {
   margin-top: 50px;
 }
-.cart-items .cart-dropdown,
+.cart-items-dropdown .cart-dropdown,
 .item_name_dropdown {
   display: none;
 }
 .cart-dropdown-container {
-  width: 320px;
+  width: 400px;
   padding: 15px;
 }
 .cart-dropdown-container .item-price {
@@ -178,7 +181,11 @@
 .cart-dropdown-container .cart-item-header {
   border-bottom: 1px solid #d1d8dd;
 }
-.cart-dropdown-container .cart-items .cart-dropdown {
+.cart-dropdown-container .cart-items-dropdown {
+  max-height: 350px;
+  overflow: auto;
+}
+.cart-dropdown-container .cart-items-dropdown .cart-dropdown {
   display: block;
   margin-top: 15px;
 }
@@ -196,6 +203,16 @@
 .cart-dropdown-container .col-name-description {
   margin-bottom: 8px;
 }
+.number-spinner {
+  width: 100px;
+  margin-top: 5px;
+}
+.cart-btn {
+  border-color: #ccc;
+}
+.cart-qty {
+  text-align: center;
+}
 .product-list-link .row {
   border-bottom: 1px solid #EBEFF2;
 }

erpnext/public/js/shopping_cart.js

@@ -10,24 +10,29 @@ frappe.ready(function() {
 		$('.navbar li[data-label="User"] a')
 			.html('<i class="icon-fixed-width icon-user"></i> ' + full_name);
 	}
-	// update login
-	shopping_cart.set_cart_count();
 	
-	$(".shopping-cart").on('shown.bs.dropdown', function() {
+	// update login
-		if (!$('.shopping-cart-menu .cart-container').length) {
+	shopping_cart.show_shoppingcart_dropdown();
-			return frappe.call({
+	shopping_cart.set_cart_count();
-				method: 'erpnext.shopping_cart.cart.get_shopping_cart_menu',
+	shopping_cart.bind_dropdown_cart_buttons();
-				callback: function(r) {
-					if (r.message) {
-						$('.shopping-cart-menu').html(r.message);
-					}
-				}
-			});
-		}
-	});
 });
 
 $.extend(shopping_cart, {
+	show_shoppingcart_dropdown: function() {
+		$(".shopping-cart").on('shown.bs.dropdown', function() {
+			if (!$('.shopping-cart-menu .cart-container').length) {
+				return frappe.call({
+					method: 'erpnext.shopping_cart.cart.get_shopping_cart_menu',
+					callback: function(r) {
+						if (r.message) {
+							$('.shopping-cart-menu').html(r.message);
+						}
+					}
+				});
+			}
+		});
+	},
+	
 	update_cart: function(opts) {
 		if(!full_name || full_name==="Guest") {
 			if(localStorage) {
@@ -82,5 +87,49 @@ $.extend(shopping_cart, {
 		} else {
 			$badge.remove();
 		}
-	}
+	},
+	
+	shopping_cart_update: function(item_code, newVal, cart_dropdown) {
+		frappe.freeze();
+		shopping_cart.update_cart({
+			item_code: item_code,
+			qty: newVal,
+			with_items: 1,
+			btn: this,
+			callback: function(r) {
+				frappe.unfreeze();
+				if(!r.exc) {
+					$(".cart-items").html(r.message.items);
+					$(".cart-tax-items").html(r.message.taxes);
+					if (cart_dropdown != true) {
+						$(".cart-icon").hide();
+					}					
+				}
+			},
+		});
+	},
+	
+	
+	bind_dropdown_cart_buttons: function() {
+		$(".cart-icon").on('click', '.number-spinner button', function () {
+			var btn = $(this),
+				input = btn.closest('.number-spinner').find('input'),
+				oldValue = input.val().trim(),
+				newVal = 0;
+			
+				if (btn.attr('data-dir') == 'up') {
+					newVal = parseInt(oldValue) + 1;
+				} else {
+					if (oldValue > 1) {
+						newVal = parseInt(oldValue) - 1;
+					}
+			}
+			input.val(newVal);
+			var item_code = input.attr("data-item-code"); 
+			shopping_cart.shopping_cart_update(item_code, newVal, true);
+			return false;
+		});
+		
+	},
+	
 });

erpnext/public/less/website.less

@@ -165,6 +165,10 @@
 
 .cart-container {
 	margin: 50px 0px;
+	
+	.checkout {
+		margin-bottom:15px;
+	}
 
 	.cart-item-header .h6 {
 		padding: 7px 15px;
@@ -210,15 +214,16 @@
 	}
 }
 
-.cart-items .cart-dropdown,
+.cart-items-dropdown .cart-dropdown,
 .item_name_dropdown {
-	display:none;
+	display: none;
 
 }
-.cart-dropdown-container {
-	width: 320px;
-	padding: 15px;
 
+.cart-dropdown-container {
+	width: 400px;
+	padding: 15px;
+	
 	.item-price {
 		display: block !important;
 		padding-bottom: 10px;
@@ -227,8 +232,13 @@
 	.cart-item-header {
 		border-bottom: 1px solid #d1d8dd;
 	}
-
+	
-	.cart-items .cart-dropdown {
+	.cart-items-dropdown {
+		max-height: 350px;
+		overflow: auto;	
+	}
+	
+	.cart-items-dropdown .cart-dropdown {
 		display:block;
 	   	margin-top:15px;
 	}
@@ -249,7 +259,18 @@
 	.col-name-description {
 		margin-bottom:8px;
 	}
+}
 
+.number-spinner {
+	width:100px;
+	margin-top:5px;
+}
+
+.cart-btn {
+	border-color: #ccc;
+}
+.cart-qty {
+	text-align:center;
 }
 
 .product-list-link {
@@ -306,5 +327,4 @@
 
 .product-image-wrapper {
 	padding-bottom: 40px;
-}
+}
-

erpnext/templates/includes/cart.js

@@ -16,9 +16,9 @@ $.extend(shopping_cart, {
 		shopping_cart.bind_address_select();
 		shopping_cart.bind_place_order();
 		shopping_cart.bind_change_qty();
-
+		shopping_cart.bind_dropdown_cart_buttons();
 	},
-
+	
 	bind_address_select: function() {
 		$(".cart-addresses").find('input[data-address-name]').on("click", function() {
 			if($(this).prop("checked")) {
@@ -54,21 +54,26 @@ $.extend(shopping_cart, {
 		// bind update button
 		$(".cart-items").on("change", ".cart-qty", function() {
 			var item_code = $(this).attr("data-item-code");
-			frappe.freeze();
+			var newVal = $(this).val();
-			shopping_cart.update_cart({
+			shopping_cart.shopping_cart_update(item_code, newVal);
-				item_code: item_code,
+		});
-				qty: $(this).val(),
+		
-				with_items: 1,
+		$(".cart-items").on('click', '.number-spinner button', function () {  
-				btn: this,
+			var btn = $(this),
-				callback: function(r) {
+				input = btn.closest('.number-spinner').find('input'),
-					frappe.unfreeze();
+				oldValue = input.val().trim(),
-					if(!r.exc) {
+				newVal = 0;
-						$(".cart-items").html(r.message.items);
+	
-						$(".cart-tax-items").html(r.message.taxes);
+			if (btn.attr('data-dir') == 'up') {
-						$(".cart-icon").hide();
+				newVal = parseInt(oldValue) + 1;
-					}
+			} else {
-				},
+				if (oldValue > 1) {
-			});
+					newVal = parseInt(oldValue) - 1;
+				}
+			}
+			input.val(newVal);
+			var item_code = input.attr("data-item-code"); 
+			shopping_cart.shopping_cart_update(item_code, newVal);
 		});
 	},
 	
@@ -143,7 +148,7 @@ $.extend(shopping_cart, {
 	}
 });
 
-$(document).ready(function() {
+frappe.ready(function() {
 	$(".cart-icon").hide();
 	shopping_cart.bind_events();
 });

erpnext/templates/includes/cart/cart_dropdown.html

@@ -11,8 +11,8 @@
 	</div>
 	
 	{% if doc.items %}
-	<div class="cart-items">
+	<div class="cart-items-dropdown">
-		{% include "templates/includes/cart/cart_items.html" %}
+		{% include "templates/includes/cart/cart_items_dropdown.html" %}
 	</div>
 	<div class="checkout-btn">
 	<a href="/cart" class="btn btn-block btn-primary">{{ _("Checkout") }}</a>

erpnext/templates/includes/cart/cart_items.html

@@ -1,4 +1,5 @@
 {% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description %}
+{% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description_cart %}
 
 {% for d in doc.items %}
 <div class="row checkout">
@@ -6,10 +7,21 @@
         {{ item_name_and_description(d) }}
     </div>
     <div class="col-sm-2 col-xs-3 text-right col-qty">
-        <span style="max-width: 50px; display: inline-block">
+        <span style="display: inline-block">
+			<div class="input-group number-spinner">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="dwn">
+                        –</button>
+                </span>
             <input class="form-control text-right cart-qty"
             value = "{{ d.get_formatted('qty') }}"
-            data-item-code="{{ d.item_code }}"></span>    	
+            data-item-code="{{ d.item_code }}">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="up" style="margin-left:-2px;">
+                        +</button>
+                </span>
+			</div>
+		</span>    	
 	</div>
     <div class="col-sm-2 col-xs-3 text-right col-amount">
         {{ d.get_formatted("amount") }}
@@ -17,14 +29,4 @@
             _("Rate: {0}").format(d.get_formatted("rate")) }}</p>
     </div>
 </div>
-
-<div class="row cart-dropdown">
-    <div class="col-sm-8 col-xs-8 col-name-description">
-        {{ item_name_and_description(d) }}
-    </div>
-    <div class="col-sm-4 col-xs-4 text-right col-amount">
-        {{ d.get_formatted("amount") }}
-
-    </div>
-</div>
 {% endfor %}

erpnext/templates/includes/cart/cart_items_dropdown.html

@@ -0,0 +1,13 @@
+{% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description_cart %}
+
+{% for d in doc.items %}
+<div class="row cart-dropdown">
+    <div class="col-sm-8 col-xs-8 col-name-description">
+        {{ item_name_and_description_cart(d) }}
+    </div>
+    <div class="col-sm-4 col-xs-4 text-right col-amount">
+        {{ d.get_formatted("amount") }}
+
+    </div>
+</div>
+{% endfor %}

erpnext/templates/includes/navbar/navbar_items.html

@@ -1,12 +1,12 @@
 {% extends 'frappe/templates/includes/navbar/navbar_items.html' %}
 
 {% block navbar_right_extension %}
-	<li class="dropdown shopping-cart">
+	<li class="shopping-cart">
 		<div class="cart-icon small">
 			<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">
 				Cart <span class="badge-wrapper" id="cart-count"></span>
 			</a>
-			<div class="dropdown-menu shopping-cart-menu"></div>
+			<div id="cart-overlay" class="dropdown-menu shopping-cart-menu"></div>
 		</div>
 	 </li>
 {% endblock %}

erpnext/templates/includes/order/order_macros.html

@@ -12,15 +12,29 @@
             <div class="text-muted small item-description">{{ d.description }}</div>
         </div>
     </div>
-
+{% endmacro %}
+{% macro item_name_and_description_cart(d) %}
     <div class="row item_name_dropdown">
         <div class="col-xs-4 col-sm-4 order-image-col">
             <div class="order-image">
-              <span class="cart-count-badge pull-right small"> {{ d.get_formatted('qty') }} </span>{{ product_image_square(d.image) }}
+             {{ product_image_square(d.image) }}
             </div>
         </div>
         <div class="col-xs-8 col-sm-8">
-            {{ d.item_code }}
+           {{ d.item_code|truncate(25) }}			
+			<div class="input-group number-spinner">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="dwn">
+                        –</button>
+                </span>
+            <input class="form-control text-right cart-qty"
+            value = "{{ d.get_formatted('qty') }}"
+            data-item-code="{{ d.item_code }}">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="up">
+                        +</button>
+                </span>
+			</div>
         </div>
     </div>
 {% endmacro %}

erpnext/templates/pages/cart.html

@@ -30,7 +30,7 @@
 				<div class="col-sm-8 col-xs-6 h6 text-uppercase">
 				{{ _("Item") }}
 				</div>
-				<div class="col-sm-2 col-xs-3 text-right h6 text-uppercase">
+				<div class="col-sm-2 col-xs-3 text-center h6 text-uppercase">
 				{{ _("Qty") }}
 				</div>
 				<div class="col-sm-2 col-xs-3 text-right h6 text-uppercase">