diff --git a/erpnext/e_commerce/shopping_cart/cart.py b/erpnext/e_commerce/shopping_cart/cart.py index a5f38c69ea7..c2c94a36644 100644 --- a/erpnext/e_commerce/shopping_cart/cart.py +++ b/erpnext/e_commerce/shopping_cart/cart.py @@ -138,7 +138,7 @@ def update_cart(item_code, qty, additional_notes=None, with_items=False): "additional_notes": additional_notes }) else: - quotation_items[0].qty = qty + quotation_items[0].qty = qty + 1 quotation_items[0].additional_notes = additional_notes apply_cart_settings(quotation=quotation) @@ -153,9 +153,8 @@ def update_cart(item_code, qty, additional_notes=None, with_items=False): set_cart_count(quotation) - context = get_cart_quotation(quotation) - if cint(with_items): + context = get_cart_quotation(quotation) return { "items": frappe.render_template("templates/includes/cart/cart_items.html", context), @@ -164,8 +163,7 @@ def update_cart(item_code, qty, additional_notes=None, with_items=False): } else: return { - 'name': quotation.name, - 'shopping_cart_menu': get_shopping_cart_menu(context) + 'name': quotation.name } @frappe.whitelist() diff --git a/erpnext/e_commerce/web_template/item_card_group/item_card_group.html b/erpnext/e_commerce/web_template/item_card_group/item_card_group.html index fe061d5f5f5..889a2281684 100644 --- a/erpnext/e_commerce/web_template/item_card_group/item_card_group.html +++ b/erpnext/e_commerce/web_template/item_card_group/item_card_group.html @@ -25,8 +25,7 @@ {%- if item -%} {%- set item = frappe.get_doc("Item", item) -%} {{ item_card( - item.item_name, item.image, item.route, item.description, - None, item.item_group, values['card_' + index + '_featured'], + item, is_featured=values['card_' + index + '_featured'], True, "Center" ) }} {%- endif -%} diff --git a/erpnext/public/js/shopping_cart.js b/erpnext/public/js/shopping_cart.js index 6553801de09..bcfa983e4a8 100644 --- a/erpnext/public/js/shopping_cart.js +++ b/erpnext/public/js/shopping_cart.js @@ -93,9 +93,6 @@ $.extend(shopping_cart, { btn: opts.btn, callback: function(r) { shopping_cart.set_cart_count(); - if (r.message.shopping_cart_menu) { - $('.shopping-cart-menu').html(r.message.shopping_cart_menu); - } if(opts.callback) opts.callback(r); } @@ -129,6 +126,10 @@ $.extend(shopping_cart, { if(cart_count) { $badge.html(cart_count); + $cart.addClass('cart-animate'); + setTimeout(() => { + $cart.removeClass('cart-animate'); + }, 500); } else { $badge.remove(); } diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss index 43172791864..8380f6cf338 100644 --- a/erpnext/public/scss/shopping_cart.scss +++ b/erpnext/public/scss/shopping_cart.scss @@ -363,6 +363,31 @@ body.product-page { } } +.cart-animate { + animation: wiggle 0.5s linear; +} +@keyframes wiggle { + 8%, + 41% { + transform: translateX(-10px); + } + 25%, + 58% { + transform: translate(10px); + } + 75% { + transform: translate(-5px); + } + 92% { + transform: translate(5px); + } + 0%, + 100% { + transform: translate(0); + } +} + + #page-cart { .shopping-cart-header { @@ -557,16 +582,50 @@ body.product-page { } } -.btn-add-to-cart-list { +.btn-explore-variants { + box-shadow: none; + margin: var(--margin-sm) 0; + margin-left: 18px; + max-height: 30px; // to avoid resizing on window resize + flex: none; + transition: 0.3s ease; + color: var(--orange-500); + background-color: white; + border: 1px solid var(--orange-500); + + &:hover { + color: white; + background-color: var(--orange-500); + } +} + +.btn-add-to-cart-list{ + box-shadow: none; + margin: var(--margin-sm) 0; + max-height: 30px; // to avoid resizing on window resize + flex: none; + transition: 0.3s ease; +} + +.not-added { + margin-left: 18px; color: var(--blue-500); background-color: white; - box-shadow: none; border: 1px solid var(--blue-500); - margin: var(--margin-sm) 0; - flex: none; &:hover { background-color: var(--blue-500); color: white; } } + +.added-to-cart { + margin-left: 18px; + background-color: var(--dark-green-400); + color: white; + border: 2px solid var(--green-300); + + &:hover { + color: white; + } +} diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html index 73c874542ad..818316c0cf9 100644 --- a/erpnext/templates/includes/macros.html +++ b/erpnext/templates/includes/macros.html @@ -59,13 +59,17 @@ {% endmacro %} -{%- macro item_card(title, image, url, description, rate, category, in_stock=None, is_featured=False, is_full_width=False, align="Left") -%} +{%- macro item_card(item, is_featured=False, is_full_width=False, align="Left") -%} {%- set align_items_class = resolve_class({ 'align-items-end': align == 'Right', 'align-items-center': align == 'Center', 'align-items-start': align == 'Left', }) -%} {%- set col_size = 3 if is_full_width else 4 -%} +{%- set title = item.item_name or item.item_code -%} +{%- set image = item.website_image or item.image -%} +{%- set description = item.website_description or item.description-%} + {% if is_featured %}
@@ -75,12 +79,12 @@ {{ title }}
- {{ item_card_body(title, description, url, rate, category, is_featured, align) }} + {{ item_card_body(title, description, item, is_featured, align) }}
{% else %}
- {{ item_card_body(title, description, url, rate, category, is_featured, align) }} + {{ item_card_body(title, description, item, is_featured, align) }}
{% endif %} @@ -90,24 +94,24 @@
{% if image %}
- + {{ title }}
{% else %} - +
{{ frappe.utils.get_abbr(title) }}
{% endif %} - {{ item_card_body(title, description, url, rate, category, is_featured, align, in_stock) }} + {{ item_card_body(title, description, item, is_featured, align) }}
{% endif %} {%- endmacro -%} -{%- macro item_card_body(title, description, url, rate, category, is_featured, align, in_stock=None) -%} +{%- macro item_card_body(title, description, item, is_featured, align) -%} {%- set align_class = resolve_class({ 'text-right': align == 'Right', 'text-center': align == 'Center' and not is_featured, @@ -116,33 +120,44 @@
- +
{{ title or '' }}
 - {% if in_stock %} - + {% if item.in_stock %} + + {% endif %} + {% if not item.has_variants %} + + {% endif %} - -
{% if is_featured %} -
{{ rate or '' }}
+
{{ item.formatted_price or '' }}
{{ description or '' }}
{% else %} -
{{ category or '' }}
+
{{ item.item_group or '' }}
- {% if rate %} -
{{ rate or '' }}
+ {% if item.formatted_price %} +
{{ item.formatted_price or '' }}
+ {% endif %} + {% if item.has_variants %} + +
+ {{ _('Explore') }} +
+ + {% else %} +
+ {{ _('Add to Cart') }} +
{% endif %} -
- {{ _('Add to Cart') }} -
{% endif %}
diff --git a/erpnext/www/all-products/index.js b/erpnext/www/all-products/index.js index 37e07f4c7ef..4572ee73704 100644 --- a/erpnext/www/all-products/index.js +++ b/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() { diff --git a/erpnext/www/all-products/item_row.html b/erpnext/www/all-products/item_row.html index 665936df191..072e35946b3 100644 --- a/erpnext/www/all-products/item_row.html +++ b/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) }} +