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
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 743daaf..aec201e 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -118,7 +118,6 @@
'text-left': align == 'Left' or is_featured,
}) -%}
<div class="card-body {{ align_class }}" style="width:100%">
-
<div style="margin-top: 16px; display: flex;">
<a href="/{{ item.route or '#' }}">
<div class="product-title">{{ title or '' }}</div>
@@ -128,7 +127,9 @@
{% endif %}
{% if not item.has_variants %}
<div class="like-action"
- data-item-code="{{ item.item_code }}" data-price="{{ item.price }}">
+ data-item-code="{{ item.item_code }}"
+ data-price="{{ item.price }}"
+ data-formatted-price="{{ item.get('formatted_price') }}">
<svg class="icon sm">
{%- set icon_class = "wished" if item.wished else "not-wished"-%}
<use class="{{ icon_class }} wish-icon" href="#icon-heart"></use>
@@ -161,3 +162,63 @@
{% endif %}
</div>
{%- endmacro -%}
+
+
+{%- macro wishlist_card(item, settings) %}
+<div class="col-sm-3 item-card" style="min-width: 220px;">
+ <div class="card text-center">
+ {% if item.image %}
+ <div class="card-img-container">
+ <a href="/{{ item.route or '#' }}" style="text-decoration: none;">
+ <img class="card-img" src="{{ item.image }}" alt="{{ title }}">
+ </a>
+ <div class="remove-wish"
+ style="position:absolute; top:10px; right: 20px; border-radius: 50%; border: 1px solid var(--gray-100); width: 25px; height: 25px;"
+ data-item-code="{{ item.item_code }}">
+ <span style="padding-bottom: 2px;">
+ <svg class="icon sm remove-wish-icon" style="margin-bottom: 4px; margin-left: 0.5px;">
+ <use class="close" href="#icon-close"></use>
+ </svg>
+ </span>
+ </div>
+
+ </div>
+ {% else %}
+ <a href="/{{ item.route or '#' }}" style="text-decoration: none;">
+ <div class="card-img-top no-image">
+ {{ frappe.utils.get_abbr(title) }}
+ </div>
+ </a>
+ {% endif %}
+
+ {{ wishlist_card_body(item, settings) }}
+
+
+ </div>
+</div>
+{%- endmacro -%}
+
+{%- macro wishlist_card_body(item, settings) %}
+<div class="card-body text-center" style="width:100%">
+ <div style="margin-top: 16px;">
+ <div class="product-title">{{ item.item_name or item.item_code or ''}}</div>
+ </div>
+ <div class="product-price">{{ item.formatted_price or '' }}</div>
+
+ {% if (item.available and settings.show_stock_availability) or (not settings.show_stock_availability) %}
+ <!-- Show move to cart button if in stock or if showing stock availability is disabled -->
+ <button data-item-code="{{ item.item_code}}" class="btn btn-add-to-cart w-100 wishlist-cart-not-added">
+ <span class="mr-2">
+ <svg class="icon icon-md">
+ <use href="#icon-assets"></use>
+ </svg>
+ </span>
+ {{ _("Move to Cart") }}
+ </button>
+ {% else %}
+ <div style="color: #F47A7A; width: 100%;">
+ {{ _("Not in Stock") }}
+ </div>
+ {% endif %}
+</div>
+{%- endmacro -%}
diff --git a/erpnext/templates/includes/navbar/navbar_items.html b/erpnext/templates/includes/navbar/navbar_items.html
index 54ed98a..793bacb 100644
--- a/erpnext/templates/includes/navbar/navbar_items.html
+++ b/erpnext/templates/includes/navbar/navbar_items.html
@@ -10,7 +10,7 @@
</a>
</li>
<li class="wishlist wishlist-icon hidden">
- <a class="nav-link" href="/cart">
+ <a class="nav-link" href="/wishlist">
<svg class="icon icon-lg">
<use href="#icon-heart"></use>
</svg>
diff --git a/erpnext/templates/pages/wishlist.html b/erpnext/templates/pages/wishlist.html
new file mode 100644
index 0000000..6e7a65b
--- /dev/null
+++ b/erpnext/templates/pages/wishlist.html
@@ -0,0 +1,24 @@
+{% extends "templates/web.html" %}
+
+{% block title %} {{ _("Wishlist") }} {% endblock %}
+
+{% block header %}<h3 class="shopping-cart-header mt-2 mb-6">{{ _("Wishlist") }}</h1>{% endblock %}
+
+{% block page_content %}
+{% if items %}
+ <div class="row">
+ <div class="col-12 col-md-11 item-card-group-section">
+ <div class="row products-list">
+ {% from "erpnext/templates/includes/macros.html" import wishlist_card %}
+ {% for item in items %}
+ {{ wishlist_card(item, settings) }}
+ {% endfor %}
+ </div>
+ </div>
+ </div>
+{% else %}
+ <!-- TODO: Make empty state for wishlist -->
+ {% include "erpnext/www/all-products/not_found.html" %}
+{% endif %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/pages/wishlist.py b/erpnext/templates/pages/wishlist.py
new file mode 100644
index 0000000..15aef87
--- /dev/null
+++ b/erpnext/templates/pages/wishlist.py
@@ -0,0 +1,39 @@
+# Copyright (c) 2021, Frappe Technologies Pvt. Ltd. and Contributors
+# License: GNU General Public License v3. See license.txt
+from __future__ import unicode_literals
+
+no_cache = 1
+
+import frappe
+from erpnext.e_commerce.shopping_cart.cart import get_cart_quotation
+
+def get_context(context):
+ settings = frappe.get_doc("E Commerce Settings")
+ items = get_wishlist_items()
+
+ if settings.show_stock_availability:
+ for item in items:
+ stock_qty = frappe.utils.flt(
+ frappe.db.get_value("Bin",
+ {
+ "item_code": item.item_code,
+ "warehouse": item.get("warehouse")
+ },
+ "actual_qty")
+ )
+ item.available = True if stock_qty else False
+
+ context.items = items
+ context.settings = settings
+
+def get_wishlist_items():
+ if frappe.db.exists("Wishlist", frappe.session.user):
+ return frappe.db.sql("""
+ Select
+ item_code, item_name, website_item, price,
+ warehouse, image, item_group, route, formatted_price
+ from
+ `tabWishlist Items`
+ where
+ parent=%(user)s"""%{"user": frappe.db.escape(frappe.session.user)}, as_dict=1)
+ return
\ No newline at end of file