Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Shopping cart dropdown update
This commit is contained in:
Rushabh Mehta 2016-06-29 21:59:29 +05:30 committed by GitHub
commit 65256ed8cb
10 changed files with 185 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
erpnext/public/css/website.css
View File

@ -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;
}

79
erpnext/public/js/shopping_cart.js
View File

@ -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() {
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;
});
},
});

38
erpnext/public/less/website.less
View File

@ -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;
}
}

41
erpnext/templates/includes/cart.js
View File

@ -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();
});

4
erpnext/templates/includes/cart/cart_dropdown.html
View File

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

26
erpnext/templates/includes/cart/cart_items.html
View File

@ -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 %}

13
erpnext/templates/includes/cart/cart_items_dropdown.html Normal file
View File

@ -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 %}

4
erpnext/templates/includes/navbar/navbar_items.html
View File

@ -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 %}

20
erpnext/templates/includes/order/order_macros.html
View File

@ -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 %}

2
erpnext/templates/pages/cart.html
View File

@ -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">