From ab69029d4ed5603e35d2f5b2cb74a429590bd6d9 Mon Sep 17 00:00:00 2001 From: Anand Doshi Date: Thu, 13 Jun 2013 11:21:35 +0530 Subject: [PATCH] [shopping cart] [start] --- public/js/website_utils.js | 59 +++++++++++++++--- website/templates/html/outer.html | 9 +++ website/templates/html/product_in_list.html | 3 +- website/templates/html/product_page.html | 10 +++- website/templates/js/cart.js | 66 +++++++++++++++++++++ website/templates/js/product_page.js | 33 +++++++++-- website/templates/pages/cart.html | 17 ++++++ 7 files changed, 180 insertions(+), 17 deletions(-) create mode 100644 website/templates/js/cart.js create mode 100644 website/templates/pages/cart.html diff --git a/public/js/website_utils.js b/public/js/website_utils.js index d1b5ab7f206..73fb04b1078 100644 --- a/public/js/website_utils.js +++ b/public/js/website_utils.js @@ -70,16 +70,17 @@ $(document).ready(function() { // update login var full_name = getCookie("full_name"); if(full_name) { - $("#user-tools").html(repl('%(full_name)s | \ - My Account | \ - \ - ', { - full_name: full_name, - count: getCookie("cart_count") || "0" - })); - $("#user-tools a").tooltip({"placement":"bottom"}); + $("#user-tools").addClass("hide"); + $("#user-tools-post-login").removeClass("hide"); + $("#user-full-name").text(full_name); } -}) + + wn.cart.update_display(); + $("#user-tools a").tooltip({"placement":"bottom"}); + $("#user-tools-post-login a").tooltip({"placement":"bottom"}); + + $(window).on("storage", function() { wn.cart.update_display(); }); +}); // Utility functions @@ -162,3 +163,43 @@ if (typeof Array.prototype.map !== "function") { return a; }; } + +// shopping cart +if(!wn.cart) wn.cart = {}; +$.extend(wn.cart, { + get_count: function() { + return Object.keys(this.get_cart()).length; + }, + + add_to_cart: function(itemprop) { + var cart = this.get_cart(); + cart[itemprop.item_code] = $.extend(itemprop, {qty: 1}); + this.set_cart(cart); + console.log(this.get_cart()); + }, + + remove_from_cart: function(item_code) { + var cart = this.get_cart(); + delete cart[item_code]; + this.set_cart(cart); + console.log(this.get_cart()); + }, + + get_cart: function() { + if( !("localStorage" in window) ) { + alert("Your browser seems to be ancient. Please use a modern browser."); + throw "ancient browser error"; + } + + return JSON.parse(localStorage.getItem("cart")) || {}; + }, + + set_cart: function(cart) { + localStorage.setItem("cart", JSON.stringify(cart)); + wn.cart.update_display(); + }, + + update_display: function() { + $(".cart-count").text("( " + wn.cart.get_count() + " )"); + } +}); \ No newline at end of file diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html index ec71476f77b..cc1181cbd2c 100644 --- a/website/templates/html/outer.html +++ b/website/templates/html/outer.html @@ -3,8 +3,17 @@ {% block body %}
+
+ | + My Account | + + | + +
{% if banner_html %}
{{ banner_html }}
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html index e9752b3d4a5..14f020bb91a 100644 --- a/website/templates/html/product_in_list.html +++ b/website/templates/html/product_in_list.html @@ -1,4 +1,5 @@ -
+ +

{{ item_name }}

-

Item Code: {{ name }}

+

Item Code: {{ name }}

Product Description

{{ web_long_description or web_short_description or "[No description given]" }}
-
-
+
+
+
+ + +
{% if obj.doclist.get({"doctype":"Item Website Specification"}) -%} diff --git a/website/templates/js/cart.js b/website/templates/js/cart.js new file mode 100644 index 00000000000..8746dd6d5ab --- /dev/null +++ b/website/templates/js/cart.js @@ -0,0 +1,66 @@ +// ERPNext - web based ERP (http://erpnext.com) +// Copyright (C) 2012 Web Notes Technologies Pvt Ltd +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with this program. If not, see . + +// js inside blog page + +$(document).ready(function() { + // make list of items in the cart + wn.cart.render(); +}); + +// shopping cart +if(!wn.cart) wn.cart = {}; +$.extend(wn.cart, { + render: function() { + var $cart_wrapper = $("#cart-added-items").empty(); + if(Object.keys(wn.cart.get_cart()).length) { + $('
\ +
\ +
\ +
\ +
Item Details
\ +
\ +
\ +
Qty
\ +
').appendTo($cart_wrapper); + + $.each(wn.cart.get_cart(), function(item_code, item) { + item.image_html = item.image ? + '
' : + '{% include "app/website/templates/html/product_missing_image.html" %}'; + item.price_html = item.price ? ('

@ ' + item.price + '

') : ""; + + $(repl('
\ +
\ +
\ +
%(image_html)s
\ +
\ +

%(item_name)s

\ +

%(description)s

\ +
\ +
\ +
\ +
\ + \ + %(price_html)s\ +
\ +
', item)).appendTo($cart_wrapper); + }); + } else { + $('

No Items added to cart.

').appendTo($cart_wrapper); + } + } +}); \ No newline at end of file diff --git a/website/templates/js/product_page.js b/website/templates/js/product_page.js index 69e9cd52feb..338f25331d9 100644 --- a/website/templates/js/product_page.js +++ b/website/templates/js/product_page.js @@ -28,16 +28,41 @@ $(document).ready(function() { if(data.message.price) { $("

").html(data.message.price.ref_currency + " " + data.message.price.ref_rate).appendTo(".item-price"); - $(".item-price").toggle(true); + $(".item-price").removeClass("hide"); } if(data.message.stock==0) { - $(".item-stock").html("
Not in stock
") + $(".item-stock").html("
Not in stock
"); } else if(data.message.stock==1) { $(".item-stock").html("
\ - Available (in stock)
") + Available (in stock)

"); } } } - }) + }); + + if(wn.cart.get_cart()[$('[itemscope] [itemprop="name"]').text().trim()]) { + $(".item-remove-from-cart").removeClass("hide"); + } else { + $(".item-add-to-cart").removeClass("hide"); + } + + $("button.item-add-to-cart").on("click", function() { + wn.cart.add_to_cart({ + url: window.location.href, + image: $('[itemscope] [itemprop="image"]').attr("src"), + item_code: $('[itemscope] [itemprop="name"]').text().trim(), + item_name: $('[itemscope] [itemprop="productID"]').text().trim(), + description: $('[itemscope] [itemprop="description"]').html().trim(), + price: $('[itemscope] [itemprop="price"]').text().trim() + }); + $(".item-add-to-cart").addClass("hide"); + $(".item-remove-from-cart").removeClass("hide"); + }); + + $("button.item-remove-from-cart").on("click", function() { + wn.cart.remove_from_cart($('[itemscope] [itemprop="name"]').text().trim()); + $(".item-add-to-cart").removeClass("hide"); + $(".item-remove-from-cart").addClass("hide"); + }); }) \ No newline at end of file diff --git a/website/templates/pages/cart.html b/website/templates/pages/cart.html new file mode 100644 index 00000000000..31d50848fd6 --- /dev/null +++ b/website/templates/pages/cart.html @@ -0,0 +1,17 @@ +{% extends "app/website/templates/html/page.html" %} + +{% block javascript %} + {% include "app/website/templates/js/cart.js" %} +{% endblock %} + +{% set title="Shopping Cart" %} + +{% block content %} +
+

Shopping Cart

+
+
+ +
+
+{% endblock %} \ No newline at end of file