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
This commit is contained in:
marination
parent
2fec068aff
commit
ef4579e4eb
@ -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 ``;
|
||||
}
|
||||
|
||||
@ -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 ``;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
height: 25px;
|
||||
box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
|
||||
}
|
||||
|
||||
.wish-removed {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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):
|
||||
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
|
||||
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"
|
||||
])
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user