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

erpnext/e_commerce/product_grid.js

@@ -61,7 +61,7 @@ erpnext.ProductGrid = class {
 	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 @@ erpnext.ProductGrid = class {
 
 		}
 
-		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 @@ erpnext.ProductGrid = class {
 
 	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 ``;
 	}

erpnext/e_commerce/product_list.js

@@ -126,7 +126,10 @@ erpnext.ProductList = class {
 
 	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 ``;
 	}

erpnext/public/scss/shopping_cart.scss

@@ -203,6 +203,10 @@ body.product-page {
 	.wishlist-card {
 		padding: var(--padding-sm);
 		min-width: 260px;
+		.card-body-flex {
+			display: flex;
+			flex-direction: column;
+		}
 	}
 }
 
@@ -984,30 +988,18 @@ body.product-page {
 	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;
+	box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
-	height: 25px;
 }
 
 .wish-removed {

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 icon-md remove-wish-icon">
-					<svg class="icon sm remove-wish-icon" style="margin-bottom: 4px; margin-left: 0.5px;">
+					<use class="close" href="#icon-delete"></use>
-						<use class="close" href="#icon-close"></use>
 				</svg>
-				</span>
 			</div>
 		</div>
 
@@ -173,18 +171,19 @@
 {%- endmacro -%}
 
 {%- macro wishlist_card_body(item, title, settings) %}
-<div class="card-body text-center" style="width: 100%;">
+<div class="card-body card-body-flex text-left" style="width: 100%;">
-	<div style="margin-top: 16px;">
+	<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%;">
+		<div class="out-of-stock">
-			{{ _("Not in Stock") }}
+			{{ _("Out of stock") }}
 		</div>
 	{% endif %}
 </div>

erpnext/templates/pages/wishlist.py

@@ -21,6 +21,7 @@ def get_context(context):
 		)
 
 		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 @@ def get_stock_availability(item_code, warehouse):
 	return bool(stock_qty)
 
 def get_wishlist_items():
-	if frappe.db.exists("Wishlist", frappe.session.user):
+	if not frappe.db.exists("Wishlist", frappe.session.user):
-		return frappe.db.sql("""
+		return []
-			Select
+
-				web_item_name, item_code, item_name, website_item, price,
+	return frappe.db.get_all(
-				warehouse, image, item_group, route, formatted_price
+		"Wishlist Item",
-			from
+		filters={
-				`tabWishlist Item`
+			"parent": frappe.session.user
-			where
+		},
-				parent=%(user)s""", {"user": frappe.session.user}, as_dict=1)
+		fields=[
-	return
+			"web_item_name", "item_code", "item_name",
+			"website_item", "price", "warehouse",
+			"image", "item_group", "route"
+		])