feat: Animate Add to Cart List interactions (UX)

- Increased qty in cart on clicking add to cart for existing item
- Simplified macro arguments
- Navbar cart icon animation
- Explore button for template item in card
- Add to cart button animation

erpnext/www/all-products/index.js

@@ -2,6 +2,7 @@ $(() => {
 	class ProductListing {
 		constructor() {
 			this.bind_filters();
+			this.bind_card_actions();
 			this.bind_search();
 			this.restore_filters_state();
 		}
@@ -71,8 +72,35 @@ $(() => {
 			}, 1000));
 		}
 
-		make_filters() {
+		bind_card_actions() {
+			$('.page_content').on('click', '.btn-add-to-cart-list', (e) => {
+				const $btn = $(e.currentTarget);
+				$btn.prop('disabled', true);
 
+				this.animate_add_to_cart($btn);
+
+				const item_code = $btn.data('item-code');
+				erpnext.shopping_cart.update_cart({
+					item_code,
+					qty: 1
+				});
+
+			});
+		}
+
+		animate_add_to_cart(button) {
+			// Create 'added to cart' animation
+			let btn_id = "#" + button[0].id;
+			button.removeClass('not-added');
+			button.addClass('added-to-cart');
+			$(btn_id).text('Added to Cart');
+
+			// undo
+			setTimeout(() => {
+				button.removeClass('added-to-cart');
+				button.addClass('not-added');
+				$(btn_id).text('Add to Cart');
+			}, 2000);
 		}
 
 		bind_search() {

erpnext/www/all-products/item_row.html

@@ -1,6 +1,4 @@
 {% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
 
-{{ item_card(
-	item.item_name or item.name, item.website_image or item.image, item.route, item.website_description or item.description,
-	item.formatted_price, item.item_group, in_stock=item.in_stock
-) }}
+{{ item_card(item) }}
+