diff --git a/erpnext/public/css/website.css b/erpnext/public/css/website.css index db8f2fcb99..065e2818ef 100644 --- a/erpnext/public/css/website.css +++ b/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; } diff --git a/erpnext/public/js/shopping_cart.js b/erpnext/public/js/shopping_cart.js index 40f5b98e36..f5819a8fb1 100644 --- a/erpnext/public/js/shopping_cart.js +++ b/erpnext/public/js/shopping_cart.js @@ -10,24 +10,29 @@ frappe.ready(function() { $('.navbar li[data-label="User"] a') .html(' ' + full_name); } - // update login - shopping_cart.set_cart_count(); - $(".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 login + shopping_cart.show_shoppingcart_dropdown(); + shopping_cart.set_cart_count(); + shopping_cart.bind_dropdown_cart_buttons(); }); $.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; + }); + + }, + }); diff --git a/erpnext/public/less/website.less b/erpnext/public/less/website.less index 5d89265592..4aa3940442 100644 --- a/erpnext/public/less/website.less +++ b/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; -} - +} \ No newline at end of file diff --git a/erpnext/templates/includes/cart.js b/erpnext/templates/includes/cart.js index d56721defc..dbb93a94b1 100644 --- a/erpnext/templates/includes/cart.js +++ b/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(); - shopping_cart.update_cart({ - item_code: item_code, - qty: $(this).val(), - 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); - $(".cart-icon").hide(); - } - }, - }); + var newVal = $(this).val(); + shopping_cart.shopping_cart_update(item_code, newVal); + }); + + $(".cart-items").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); }); }, @@ -143,7 +148,7 @@ $.extend(shopping_cart, { } }); -$(document).ready(function() { +frappe.ready(function() { $(".cart-icon").hide(); shopping_cart.bind_events(); }); diff --git a/erpnext/templates/includes/cart/cart_dropdown.html b/erpnext/templates/includes/cart/cart_dropdown.html index 18148ad20e..071b28182a 100644 --- a/erpnext/templates/includes/cart/cart_dropdown.html +++ b/erpnext/templates/includes/cart/cart_dropdown.html @@ -11,8 +11,8 @@ {% if doc.items %} -
- {% include "templates/includes/cart/cart_items.html" %} +
+ {% include "templates/includes/cart/cart_items_dropdown.html" %}
{{ _("Checkout") }} diff --git a/erpnext/templates/includes/cart/cart_items.html b/erpnext/templates/includes/cart/cart_items.html index 976467d3fa..b2e68585a7 100644 --- a/erpnext/templates/includes/cart/cart_items.html +++ b/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 %}
@@ -6,10 +7,21 @@ {{ item_name_and_description(d) }}
- + + +
{{ d.get_formatted("amount") }} @@ -17,14 +29,4 @@ _("Rate: {0}").format(d.get_formatted("rate")) }}

- -
-
- {{ item_name_and_description(d) }} -
-
- {{ d.get_formatted("amount") }} - -
-
{% endfor %} \ No newline at end of file diff --git a/erpnext/templates/includes/cart/cart_items_dropdown.html b/erpnext/templates/includes/cart/cart_items_dropdown.html new file mode 100644 index 0000000000..9a3dbf89ac --- /dev/null +++ b/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 %} +
+
+ {{ item_name_and_description_cart(d) }} +
+
+ {{ d.get_formatted("amount") }} + +
+
+{% endfor %} \ No newline at end of file diff --git a/erpnext/templates/includes/navbar/navbar_items.html b/erpnext/templates/includes/navbar/navbar_items.html index 9cdbd98a5f..c7af2fd3da 100644 --- a/erpnext/templates/includes/navbar/navbar_items.html +++ b/erpnext/templates/includes/navbar/navbar_items.html @@ -1,12 +1,12 @@ {% extends 'frappe/templates/includes/navbar/navbar_items.html' %} {% block navbar_right_extension %} -
  • +
  • Cart -
    +
    • {% endblock %} \ No newline at end of file diff --git a/erpnext/templates/includes/order/order_macros.html b/erpnext/templates/includes/order/order_macros.html index 3f8affe142..41be449a2a 100644 --- a/erpnext/templates/includes/order/order_macros.html +++ b/erpnext/templates/includes/order/order_macros.html @@ -12,15 +12,29 @@
    {{ d.description }}
    - +{% endmacro %} +{% macro item_name_and_description_cart(d) %}
    - {{ d.get_formatted('qty') }} {{ product_image_square(d.image) }} + {{ product_image_square(d.image) }}
    - {{ d.item_code }} + {{ d.item_code|truncate(25) }} +
    {% endmacro %} \ No newline at end of file diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html index 35e49894e3..7f6bf01d2b 100644 --- a/erpnext/templates/pages/cart.html +++ b/erpnext/templates/pages/cart.html @@ -30,7 +30,7 @@
    {{ _("Item") }}
    -
    +
    {{ _("Qty") }}