Merge pull request #12581 from britlog/website-product-spinner
[Website] Add number spinner for quantities in product page
diff --git a/erpnext/templates/generators/item.html b/erpnext/templates/generators/item.html
index de54493..6fec94e 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 9f9d6ac..722283e 100644
--- a/erpnext/templates/includes/product_page.js
+++ b/erpnext/templates/includes/product_page.js
@@ -15,7 +15,7 @@
$(".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 @@
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 @@
});
});
+ $("#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 @@
$("#item-update-cart")
.toggle(qty ? true : false)
.find("input").val(qty);
+ $("#item-spinner").toggle(qty ? false : true);
}
function get_item_code() {