nsinnovations/erpnext
2
0
Fork 0
mirror of https://github.com/frappe/erpnext.git synced 2026-05-15 03:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

[shopping cart] show items, editable qty and show amount for that item

Browse Source
This commit is contained in:
Anand Doshi
2013-06-19 17:19:20 +05:30
parent 3dceb8438e
commit c2a352711f
14 changed files with 232 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/templates/html/product_page.html
View File

@@ -40,12 +40,14 @@
<h4 class="item-price" itemprop="price"></h4>
<div class="item-stock" itemprop="availablity"></div>
<div id="item-add-to-cart">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-primary">
<i class="icon-shopping-cart"></i> Add to Cart</button>
</div>
<div id="item-update-cart" class="input-group col-lg-6" style="display: none;">
<input type="text">
<div class="input-group-btn">
<button class="btn btn-primary">Update</button>
<button class="btn btn-primary">
<i class="icon-shopping-cart"></i> Update</button>
</div>
</div>
</div>

139
website/templates/js/cart.js
View File

@@ -19,12 +19,10 @@
$(document).ready(function() {
// make list of items in the cart
// wn.cart.render();
// wn.cart.bind_events();
wn.cart.bind_events();
wn.call({
type: "POST",
method: "website.helpers.cart.get_cart_quotation",
args: {
_type: "POST"
},
callback: function(r) {
console.log(r);
$("#cart-container").removeClass("hide");
@@ -36,11 +34,7 @@ $(document).ready(function() {
wn.cart.show_error("Oops!", "Something went wrong.");
}
} else {
if(r.message[0].__islocal) {
wn.cart.show_error("Empty :-(", "Go ahead and add something to your cart.");
} else {
wn.cart.render(r.message);
}
wn.cart.render(r.message);
}
}
@@ -54,19 +48,74 @@ $.extend(wn.cart, {
$("#cart-container").html('<div class="well"><h4>' + title + '</h4> ' + text + '</div>');
},
bind_events: function() {
// bind update button
$(document).on("click", ".item-update-cart button", function() {
console.log("click!");
var item_code = $(this).attr("data-item-code");
wn.cart.update_cart({
item_code: item_code,
qty: $('input[data-item-code="'+item_code+'"]').val(),
with_doclist: 1,
btn: this,
callback: function(r) {
if(!r.exc) {
wn.cart.render(r.message);
var $button = $('button[data-item-code="'+item_code+'"]').addClass("btn-success");
setTimeout(function() { $button.removeClass("btn-success"); }, 1000);
}
},
});
});
},
render: function(doclist) {
return;
var $cart_wrapper = $("#cart-items").empty();
if(Object.keys(wn.cart.get_cart()).length) {
$('<div class="row">\
<div class="col col-lg-9 col-sm-9">\
<div class="row">\
<div class="col col-lg-3"></div>\
<div class="col col-lg-9"><strong>Item Details</strong></div>\
if($.map(doclist, function(d) { return d.item_code || null;}).length===0) {
wn.cart.show_error("Empty :-(", "Go ahead and add something to your cart.");
return;
}
$.each(doclist, function(i, doc) {
if(doc.doctype === "Quotation Item") {
doc.image_html = doc.image ?
'<div style="height: 120px; overflow: hidden;"><img src="' + doc.image + '" /></div>' :
'{% include "app/website/templates/html/product_missing_image.html" %}';
if(!doc.web_short_description) doc.web_short_description = doc.description;
$(repl('<div class="row">\
<div class="col col-lg-9 col-sm-9">\
<div class="row">\
<div class="col col-lg-3">%(image_html)s</div>\
<div class="col col-lg-9">\
<h4><a href="%(page_name)s">%(item_name)s</a></h4>\
<p>%(web_short_description)s</p>\
</div>\
</div>\
</div>\
</div>\
<div class="col col-lg-3 col-sm-3"><strong>Qty</strong></div>\
</div><hr>').appendTo($cart_wrapper);
<div class="col col-lg-3 col-sm-3">\
<div class="input-group item-update-cart">\
<input type="text" placeholder="Qty" value="%(qty)s" \
data-item-code="%(item_code)s">\
<div class="input-group-btn">\
<button class="btn btn-primary" data-item-code="%(item_code)s">\
<i class="icon-shopping-cart"></i>\
<span class="hidden-sm-inline"> Update</span></button>\
</div>\
</div>\
<p style="margin-top: 10px;">at %(formatted_rate)s</p>\
<small class="text-muted" style="margin-top: 10px;">= %(formatted_amount)s</small>\
</div>\
</div><hr>', doc)).appendTo($cart_wrapper);
}
});
return;
if(Object.keys(wn.cart.get_cart()).length) {
$.each(wn.cart.get_cart(), function(item_code, item) {
item.image_html = item.image ?
@@ -101,30 +150,30 @@ $.extend(wn.cart, {
}
},
bind_events: function() {
// on change of qty
$(".cart-input-qty").on("change", function on_change_of_qty() {
wn.cart.set_value_in_cart($(this).attr("item_code"), "qty", $(this).val());
});
// shopping cart button
$(".checkout-btn").on("click", function() {
console.log("checkout!");
console.log(wn.cart.get_cart());
var user_is_logged_in = getCookie("full_name");
if(user_is_logged_in) {
wn.call({
method: "website.helpers.cart.checkout",
args: {cart: wn.cart.get_cart()},
btn: this,
callback: function(r) {
console.log(r);
}
});
} else {
window.location.href = "login?from=cart";
}
});
}
// bind_events: function() {
// // on change of qty
// $(".cart-input-qty").on("change", function on_change_of_qty() {
// wn.cart.set_value_in_cart($(this).attr("item_code"), "qty", $(this).val());
// });
//
// // shopping cart button
// $(".checkout-btn").on("click", function() {
// console.log("checkout!");
// console.log(wn.cart.get_cart());
//
// var user_is_logged_in = getCookie("full_name");
// if(user_is_logged_in) {
// wn.call({
// method: "website.helpers.cart.checkout",
// args: {cart: wn.cart.get_cart()},
// btn: this,
// callback: function(r) {
// console.log(r);
// }
// });
// } else {
// window.location.href = "login?from=cart";
// }
// });
// }
});

11
website/templates/pages/cart.html
View File

@@ -8,7 +8,7 @@
{% block content %}
<div class="col col-lg-12">
<h2>Shopping Cart</h2>
<h2><i class="icon-shopping-cart"></i> Shopping Cart</h2>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 100%;"></div>
</div>
@@ -16,6 +16,15 @@
<button class="btn btn-success pull-right" type="button">Place Order</button>
<div class="clearfix"></div>
<hr>
<div class="row">
<div class="col col-lg-9 col-sm-9">
<div class="row">
<div class="col col-lg-3"></div>
<div class="col col-lg-9"><strong>Item Details</strong></div>
</div>
</div>
<div class="col col-lg-3 col-sm-3"><strong>Qty</strong></div>
</div><hr>
<div id="cart-items">
</div>
<hr>