chore: Wishlist UI (minor)
- Minor wishlist UI refresh, actions on hover, new icon
- Increase max length of wishlist card title
- Dont fetch outdated price in wishlist
- Translate 'out of stock'
- Use ORM
diff --git a/erpnext/e_commerce/product_grid.js b/erpnext/e_commerce/product_grid.js
index d29f62f..b46e0d9 100644
--- a/erpnext/e_commerce/product_grid.js
+++ b/erpnext/e_commerce/product_grid.js
@@ -61,7 +61,7 @@
get_card_body_html(item, title, settings) {
let body_html = `
<div class="card-body text-left card-body-flex" style="width:100%">
- <div style="margin-top: 16px; display: flex;">
+ <div style="margin-top: 1rem; display: flex;">
`;
body_html += this.get_title(item, title);
@@ -76,7 +76,7 @@
}
- body_html += `</div>`; // close div on line 50
+ body_html += `</div>`;
body_html += `<div class="product-category">${ item.item_group || '' }</div>`;
if (item.formatted_price) {
@@ -145,7 +145,7 @@
get_stock_availability(item, settings) {
if (!item.has_variants && !item.in_stock && settings.show_stock_availability) {
- return `<span class="out-of-stock">Out of stock</span>`;
+ return `<span class="out-of-stock">${ __("Out of stock") }</span>`;
}
return ``;
}
diff --git a/erpnext/e_commerce/product_list.js b/erpnext/e_commerce/product_list.js
index 03cef60..822a9ef 100644
--- a/erpnext/e_commerce/product_list.js
+++ b/erpnext/e_commerce/product_list.js
@@ -126,7 +126,10 @@
get_stock_availability(item, settings) {
if (!item.has_variants && !item.in_stock && settings.show_stock_availability) {
- return `<br><span class="out-of-stock mt-2">Out of stock</span>`;
+ return `
+ <br>
+ <span class="out-of-stock mt-2">${ __("Out of stock") }</span>
+ `;
}
return ``;
}
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 0130e70..e25de9a 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -203,6 +203,10 @@
.wishlist-card {
padding: var(--padding-sm);
min-width: 260px;
+ .card-body-flex {
+ display: flex;
+ flex-direction: column;
+ }
}
}
@@ -984,30 +988,18 @@
float: right;
}
-.wishlist-cart-not-added {
- color: var(--blue-500);
- background-color: white;
- border: 1px solid var(--blue-500);
- --icon-stroke: var(--blue-500);
- font-size: 14px;
-
- &:hover {
- background-color: var(--blue-500);
- color: white;
- --icon-stroke: white;
- }
-}
-
.remove-wish {
- background-color: var(--gray-200);
+ background-color: white;
position: absolute;
cursor: pointer;
top:10px;
right: 20px;
+ width: 32px;
+ height: 32px;
+
border-radius: 50%;
border: 1px solid var(--gray-100);
- width: 25px;
- height: 25px;
+ box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
}
.wish-removed {
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 2863e15..99b7154 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -145,9 +145,9 @@
{%- macro wishlist_card(item, settings) %}
{%- set title = item.web_item_name or ''-%}
-{%- set title = title[:50] + "..." if title|len > 50 else title -%}
+{%- set title = title[:90] + "..." if title|len > 90 else title -%}
<div class="col-sm-3 wishlist-card">
- <div class="card text-center" style="height: 100%">
+ <div class="card text-center">
<div class="card-img-container">
<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
{% if item.image %}
@@ -159,11 +159,9 @@
{% endif %}
</a>
<div class="remove-wish" 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>
+ <svg class="icon icon-md remove-wish-icon">
+ <use class="close" href="#icon-delete"></use>
+ </svg>
</div>
</div>
@@ -173,18 +171,19 @@
{%- endmacro -%}
{%- macro wishlist_card_body(item, title, settings) %}
-<div class="card-body text-center" style="width: 100%;">
- <div style="margin-top: 16px;">
+<div class="card-body card-body-flex text-left" style="width: 100%;">
+ <div class="mt-4">
<div class="product-title">{{ title or ''}}</div>
+ <div class="product-category">{{ item.item_group or '' }}</div>
</div>
<div class="product-price">
- {{ item.formatted_price or '' }}
+ {{ item.get("formatted_price") or '' }}
{% if item.get("formatted_mrp") %}
- <small class="ml-1 text-muted">
+ <small class="ml-1 striked-price">
<s>{{ item.formatted_mrp }}</s>
</small>
- <small class="ml-1" style="color: #F47A7A; font-weight: 500;">
+ <small class="ml-1 product-info-green" >
{{ item.discount }} OFF
</small>
{% endif %}
@@ -192,7 +191,8 @@
{% 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 mt-2">
+ <button data-item-code="{{ item.item_code}}"
+ class="btn btn-primary btn-add-to-cart-list btn-add-to-cart mt-2 w-100">
<span class="mr-2">
<svg class="icon icon-md">
<use href="#icon-assets"></use>
@@ -201,8 +201,8 @@
{{ _("Move to Cart") }}
</button>
{% else %}
- <div class="mt-4" style="color: #F47A7A; width: 100%;">
- {{ _("Not in Stock") }}
+ <div class="out-of-stock">
+ {{ _("Out of stock") }}
</div>
{% endif %}
</div>
diff --git a/erpnext/templates/pages/wishlist.py b/erpnext/templates/pages/wishlist.py
index 5992863..dfd60f5 100644
--- a/erpnext/templates/pages/wishlist.py
+++ b/erpnext/templates/pages/wishlist.py
@@ -21,6 +21,7 @@
)
if price_details:
+ item.formatted_price = price_details.get('formatted_price')
item.formatted_mrp = price_details.get('formatted_mrp')
if item.formatted_mrp:
item.discount = price_details.get('formatted_discount_percent') or \
@@ -42,13 +43,16 @@
return bool(stock_qty)
def get_wishlist_items():
- if frappe.db.exists("Wishlist", frappe.session.user):
- return frappe.db.sql("""
- Select
- web_item_name, item_code, item_name, website_item, price,
- warehouse, image, item_group, route, formatted_price
- from
- `tabWishlist Item`
- where
- parent=%(user)s""", {"user": frappe.session.user}, as_dict=1)
- return
\ No newline at end of file
+ if not frappe.db.exists("Wishlist", frappe.session.user):
+ return []
+
+ return frappe.db.get_all(
+ "Wishlist Item",
+ filters={
+ "parent": frappe.session.user
+ },
+ fields=[
+ "web_item_name", "item_code", "item_name",
+ "website_item", "price", "warehouse",
+ "image", "item_group", "route"
+ ])