From d13985d1d0bf84879c0c7eff4b87749e7942f4b4 Mon Sep 17 00:00:00 2001
From: britlog <info@britlog.com>
Date: Fri, 19 Jan 2018 18:31:25 +0100
Subject: [PATCH] Add number spinner for quantity

---
 erpnext/templates/generators/item.html     | 15 ++++++++++++++
 erpnext/templates/includes/product_page.js | 24 ++++++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/erpnext/templates/generators/item.html b/erpnext/templates/generators/item.html
index de544930cc..6fec94e99c 100644
--- a/erpnext/templates/generators/item.html
+++ b/erpnext/templates/generators/item.html
@@ -57,6 +57,21 @@
 						<div class="item-stock" itemprop="availability"></div>
 					</div>
 					<div class="item-cart hide">
+						<div id="item-spinner">
+							<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="1">
+									<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 id="item-add-to-cart">
 							<button class="btn btn-primary btn-sm">
 								{{ _("Add to Cart") }}</button>
diff --git a/erpnext/templates/includes/product_page.js b/erpnext/templates/includes/product_page.js
index 9f9d6ac412..722283e6cb 100644
--- a/erpnext/templates/includes/product_page.js
+++ b/erpnext/templates/includes/product_page.js
@@ -15,7 +15,7 @@ frappe.ready(function() {
 			$(".item-cart").toggleClass("hide", (!!!r.message.price || !!!r.message.in_stock));
 			if(r.message && r.message.price) {
 				$(".item-price")
-					.html(r.message.price.formatted_price + " {{ _("per") }} " + r.message.uom);
+					.html(r.message.price.formatted_price + " / " + r.message.uom);
 
 				if(r.message.in_stock==0) {
 					$(".item-stock").html("<div style='color: red'> <i class='fa fa-close'></i> {{ _("Not in stock") }}</div>");
@@ -44,7 +44,7 @@ frappe.ready(function() {
 
 		erpnext.shopping_cart.update_cart({
 			item_code: get_item_code(),
-			qty: 1,
+			qty: $("#item-spinner .cart-qty").val(),
 			callback: function(r) {
 				if(!r.exc) {
 					toggle_update_cart(1);
@@ -55,6 +55,25 @@ frappe.ready(function() {
 		});
 	});
 
+	$("#item-spinner").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 (btn.attr('data-dir') == 'dwn')  {
+			if (parseInt(oldValue) > 1) {
+				newVal = parseInt(oldValue) - 1;
+			}
+			else {
+				newVal = parseInt(oldValue);
+			}
+		}
+		input.val(newVal);
+	});
+
 	$("[itemscope] .item-view-attribute .form-control").on("change", function() {
 		try {
 			var item_code = encodeURIComponent(get_item_code());
@@ -86,6 +105,7 @@ var toggle_update_cart = function(qty) {
 	$("#item-update-cart")
 		.toggle(qty ? true : false)
 		.find("input").val(qty);
+	$("#item-spinner").toggle(qty ? false : true);
 }
 
 function get_item_code() {