feat: Wishlist Page

- Navbar icon with badge count for wishlist - Wishlist page with cards - Cards can be moved to cart or removed in a click - Separated all wishlist related methods into wishlist.js - Made a common js method(util) to add/remove wishlist items - Bug fix: Make sure items are removed from session user's wishlist
2021-03-16 00:05:53 +05:30
parent 96cc5068b2
commit 59514408b9
11 changed files with 345 additions and 108 deletions
--- a/erpnext/public/js/wishlist.js
+++ b/erpnext/public/js/wishlist.js
@@ -1,13 +1,12 @@
-frappe.provide("erpnext.e_commerce");
-var wishlist = erpnext.e_commerce;
+frappe.provide("erpnext.wishlist");
+var wishlist = erpnext.wishlist;

-frappe.ready(function() {
-	$(".wishlist").toggleClass('hidden', true);
-	wishlist.set_wishlist_count();
-});
+frappe.provide("erpnext.shopping_cart");
+var shopping_cart = erpnext.shopping_cart;

 $.extend(wishlist, {
 	set_wishlist_count: function() {
+		// set badge count for wishlist icon
 		var wish_count = frappe.get_cookie("wish_count");
 		if(frappe.session.user==="Guest") {
 			wish_count = 0;
@@ -35,5 +34,127 @@ $.extend(wishlist, {
 		} else {
 			$badge.remove();
 		}
+	},
+
+	bind_move_to_cart_action: function() {
+		// move item to cart from wishlist
+		$('.page_content').on("click", ".btn-add-to-cart", (e) => {
+			const $move_to_cart_btn = $(e.currentTarget);
+			let item_code = $move_to_cart_btn.data("item-code");
+
+			shopping_cart.shopping_cart_update({
+				item_code,
+				qty: 1,
+				cart_dropdown: true
+			});
+
+			let success_action = function() {
+				const $card_wrapper = $move_to_cart_btn.closest(".item-card");
+				$card_wrapper.addClass("wish-removed");
+			};
+			let args = { item_code: item_code };
+			this.add_remove_from_wishlist("remove", args, success_action, null, true);
+		});
+	},
+
+	bind_remove_action: function() {
+		// remove item from wishlist
+		$('.page_content').on("click", ".remove-wish", (e) => {
+			const $remove_wish_btn = $(e.currentTarget);
+			let item_code = $remove_wish_btn.data("item-code");
+
+			let success_action = function() {
+				const $card_wrapper = $remove_wish_btn.closest(".item-card");
+				$card_wrapper.addClass("wish-removed");
+			};
+			let args = { item_code: item_code };
+			this.add_remove_from_wishlist("remove", args, success_action);
+		});
+	},
+
+	bind_wishlist_action() {
+		// 'wish'('like') or 'unwish' item in product listing
+		$('.page_content').on('click', '.like-action', (e) => {
+			const $btn = $(e.currentTarget);
+			const $wish_icon = $btn.find('.wish-icon');
+			let me = this;
+
+			let success_action = function() {
+				erpnext.wishlist.set_wishlist_count();
+			};
+
+			if ($wish_icon.hasClass('wished')) {
+				// un-wish item
+				$btn.removeClass("like-animate");
+				this.toggle_button_class($wish_icon, 'wished', 'not-wished');
+
+				let args = { item_code: $btn.data('item-code') };
+				let failure_action = function() {
+					me.toggle_button_class($wish_icon, 'not-wished', 'wished');
+				};
+				this.add_remove_from_wishlist("remove", args, success_action, failure_action);
+			} else {
+				// wish item
+				$btn.addClass("like-animate");
+				this.toggle_button_class($wish_icon, 'not-wished', 'wished');
+
+				let args = {
+					item_code: $btn.data('item-code'),
+					price: $btn.data('price'),
+					formatted_price: $btn.data('formatted-price')
+				};
+				let failure_action = function() {
+					me.toggle_button_class($wish_icon, 'wished', 'not-wished');
+				};
+				this.add_remove_from_wishlist("add", args, success_action, failure_action);
+			}
+		});
+	},
+
+	toggle_button_class(button, remove, add) {
+		button.removeClass(remove);
+		button.addClass(add);
+	},
+
+	add_remove_from_wishlist(action, args, success_action, failure_action, async=false) {
+		/*	AJAX call to add or remove Item from Wishlist
+			action: "add" or "remove"
+			args: args for method (item_code, price, formatted_price),
+			success_action: method to execute on successs,
+			failure_action: method to execute on failure,
+			async: make call asynchronously (true/false).	*/
+		let method = "erpnext.e_commerce.doctype.wishlist.wishlist.add_to_wishlist";
+		if (action === "remove") {
+			method = "erpnext.e_commerce.doctype.wishlist.wishlist.remove_from_wishlist";
+		}
+
+		frappe.call({
+			type: "POST",
+			method: method,
+			args: args,
+			callback: function (r) {
+				if (r.exc) {
+					if (failure_action && (typeof failure_action === 'function')) {failure_action();}
+					frappe.msgprint({
+						message: __("Sorry, something went wrong. Please refresh."),
+						indicator: "red", title: __("Note")
+					});
+				} else {
+					if (success_action && (typeof success_action === 'function')) {success_action();}
+				}
+			}
+		});
 	}
+
+});
+
+frappe.ready(function() {
+	if (window.location.pathname !== "/wishlist") {
+		$(".wishlist").toggleClass('hidden', true);
+		wishlist.set_wishlist_count();
+	} else {
+		wishlist.bind_move_to_cart_action();
+		wishlist.bind_remove_action();
+	}
+
 });