chore: Shopping Cart styles and cleanup shallow
- Added remove button to cart item rows
- Freeze on change in Shopping Cart (UX)
- Fixed cart items and taxes/totals alignment issues
- Made Cart responsive
- Added free item indicator
- Fixed item group nested routing issue
- Sales Order is populated with right source warehouse
diff --git a/erpnext/templates/includes/cart.js b/erpnext/templates/includes/cart.js
index f0781ab..28fe882 100644
--- a/erpnext/templates/includes/cart.js
+++ b/erpnext/templates/includes/cart.js
@@ -18,6 +18,7 @@
shopping_cart.bind_place_order();
shopping_cart.bind_request_quotation();
shopping_cart.bind_change_qty();
+ shopping_cart.bind_remove_cart_item();
shopping_cart.bind_change_notes();
shopping_cart.bind_coupon_code();
},
@@ -153,6 +154,18 @@
});
},
+ bind_remove_cart_item: function() {
+ $(".cart-items").on("click", ".remove-cart-item", (e) => {
+ const $remove_cart_item_btn = $(e.currentTarget);
+ var item_code = $remove_cart_item_btn.data("item-code");
+
+ shopping_cart.shopping_cart_update({
+ item_code: item_code,
+ qty: 0
+ });
+ })
+ },
+
render_tax_row: function($cart_taxes, doc, shipping_rules) {
var shipping_selector;
if(shipping_rules) {
diff --git a/erpnext/templates/includes/cart/cart_items.html b/erpnext/templates/includes/cart/cart_items.html
index d534b8f..226c600 100644
--- a/erpnext/templates/includes/cart/cart_items.html
+++ b/erpnext/templates/includes/cart/cart_items.html
@@ -1,42 +1,86 @@
-{% for d in doc.items %}
-<tr data-name="{{ d.name }}">
- <td>
- <div class="item-title mb-1">
- {{ d.item_name }}
- </div>
- <div class="item-subtitle">
- {{ d.item_code }}
- </div>
- {%- set variant_of = frappe.db.get_value('Item', d.item_code, 'variant_of') %}
- {% if variant_of %}
- <span class="item-subtitle">
- {{ _('Variant of') }} <a href="{{frappe.db.get_value('Item', variant_of, 'route')}}">{{ variant_of }}</a>
- </span>
- {% endif %}
- <div class="mt-2 notes">
- <textarea data-item-code="{{d.item_code}}" class="form-control" rows="2" placeholder="{{ _('Add notes') }}">{{d.additional_notes or ''}}</textarea>
- </div>
- </td>
- <td class="text-right">
- <div class="input-group number-spinner">
- <span class="input-group-prepend d-none d-sm-inline-block">
- <button class="btn cart-btn" data-dir="dwn">–</button>
- </span>
- <input class="form-control text-center cart-qty" value="{{ d.get_formatted('qty') }}" data-item-code="{{ d.item_code }}">
- <span class="input-group-append d-none d-sm-inline-block">
- <button class="btn cart-btn" data-dir="up">+</button>
+{% macro item_subtotal(item) %}
+ <div>
+ {{ item.get_formatted('amount') }}
+ </div>
+
+ {% if item.is_free_item %}
+ <div class="text-success mt-4">
+ <span style="
+ padding: 4px 8px;
+ border-radius: 4px;
+ border: 1px dashed">
+ {{ _('FREE') }}
</span>
</div>
- </td>
- {% if cart_settings.enable_checkout %}
- <td class="text-right item-subtotal">
- <div>
- {{ d.get_formatted('amount') }}
- </div>
+ {% else %}
<span class="item-rate">
- {{ _('Rate:') }} {{ d.get_formatted('rate') }}
+ {{ _('Rate:') }} {{ item.get_formatted('rate') }}
</span>
- </td>
{% endif %}
-</tr>
+{% endmacro %}
+
+{% for d in doc.items %}
+ <tr data-name="{{ d.name }}">
+ <td>
+ <div class="item-title mb-1 mr-3">
+ {{ d.item_name }}
+ </div>
+ <div class="item-subtitle mr-2">
+ {{ d.item_code }}
+ </div>
+ {%- set variant_of = frappe.db.get_value('Item', d.item_code, 'variant_of') %}
+ {% if variant_of %}
+ <span class="item-subtitle mr-2">
+ {{ _('Variant of') }} <a href="{{frappe.db.get_value('Item', variant_of, 'route')}}">{{ variant_of }}</a>
+ </span>
+ {% endif %}
+ <div class="mt-2 notes">
+ <textarea data-item-code="{{d.item_code}}" class="form-control" rows="2" placeholder="{{ _('Add notes') }}">
+ {{d.additional_notes or ''}}
+ </textarea>
+ </div>
+ </td>
+
+ <!-- Qty column -->
+ <td class="text-right">
+ <div class="input-group number-spinner mt-1 mb-4">
+ <span class="input-group-prepend d-sm-inline-block">
+ <button class="btn cart-btn" data-dir="dwn">–</button>
+ </span>
+ <input class="form-control text-center cart-qty" value="{{ d.get_formatted('qty') }}" data-item-code="{{ d.item_code }}">
+ <span class="input-group-append d-sm-inline-block">
+ <button class="btn cart-btn" data-dir="up">+</button>
+ </span>
+ </div>
+
+ <!-- Shown on mobile view, else hidden -->
+ {% if cart_settings.enable_checkout %}
+ <div class="text-right sm-item-subtotal">
+ {{ item_subtotal(d) }}
+ </div>
+ {% endif %}
+ </td>
+
+ <!-- Subtotal column -->
+ {% if cart_settings.enable_checkout %}
+ <td class="text-right item-subtotal column-sm-view">
+ {{ item_subtotal(d) }}
+ </td>
+ {% endif %}
+
+ <!-- Show close button irrespective except on free items -->
+ <td class="text-right">
+ {% if not d.is_free_item %}
+ <div class="ml-1 remove-cart-item column-sm-view" data-item-code="{{ d.item_code }}">
+ <span>
+ <svg class="icon sm remove-cart-item-logo"
+ width="18" height="18" viewBox="0 0 18 18"
+ xmlns="http://www.w3.org/2000/svg" id="icon-close">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M4.146 11.217a.5.5 0 1 0 .708.708l3.182-3.182 3.181 3.182a.5.5 0 1 0 .708-.708l-3.182-3.18 3.182-3.182a.5.5 0 1 0-.708-.708l-3.18 3.181-3.183-3.182a.5.5 0 0 0-.708.708l3.182 3.182-3.182 3.181z" stroke-width="0"></path>
+ </svg>
+ </span>
+ </div>
+ {% endif %}
+ </td>
+ </tr>
{% endfor %}
diff --git a/erpnext/templates/includes/order/order_taxes.html b/erpnext/templates/includes/order/order_taxes.html
index d2c458e..b821e62 100644
--- a/erpnext/templates/includes/order/order_taxes.html
+++ b/erpnext/templates/includes/order/order_taxes.html
@@ -1,9 +1,9 @@
{% if doc.taxes %}
<tr>
- <td class="text-right" colspan="2">
+ <td class="text-left" colspan="1">
{{ _("Net Total") }}
</td>
- <td class="text-right">
+ <td class="text-right totals" colspan="3">
{{ doc.get_formatted("net_total") }}
</td>
</tr>
@@ -12,10 +12,10 @@
{% for d in doc.taxes %}
{% if d.base_tax_amount %}
<tr>
- <td class="text-right" colspan="2">
+ <td class="text-left" colspan="1">
{{ d.description }}
</td>
- <td class="text-right">
+ <td class="text-right totals" colspan="3">
{{ d.get_formatted("base_tax_amount") }}
</td>
</tr>
@@ -23,76 +23,62 @@
{% endfor %}
{% if doc.doctype == 'Quotation' %}
-{% if doc.coupon_code %}
-<tr>
- <th class="text-right" colspan="2">
- {{ _("Discount") }}
- </th>
- <th class="text-right tot_quotation_discount">
- {% set tot_quotation_discount = [] %}
- {%- for item in doc.items -%}
- {% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
- * item.discount_percentage) / 100)) %}{% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }}
- </th>
-</tr>
-{% endif %}
+ {% if doc.coupon_code %}
+ <tr>
+ <td class="text-left total-discount" colspan="1">
+ {{ _("Savings") }}
+ </td>
+ <td class="text-right tot_quotation_discount total-discount totals" colspan="3">
+ {% set tot_quotation_discount = [] %}
+ {%- for item in doc.items -%}
+ {% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
+ * item.discount_percentage) / 100)) %}
+ {% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }}
+ </td>
+ </tr>
+ {% endif %}
{% endif %}
{% if doc.doctype == 'Sales Order' %}
-{% if doc.coupon_code %}
-<tr>
- <th class="text-right" colspan="2">
- {{ _("Total Amount") }}
- </th>
- <th class="text-right">
- <span>
- {% set total_amount = [] %}
- {%- for item in doc.items -%}
- {% if total_amount.append((item.price_list_rate * item.qty)) %}{% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((total_amount | sum),currency=doc.currency) }}
- </span>
- </th>
-</tr>
-<tr>
- <th class="text-right" colspan="2">
- {{ _("Applied Coupon Code") }}
- </th>
- <th class="text-right">
- <span>
- {%- for row in frappe.get_all(doctype="Coupon Code",
- fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
- <span>{{ row.coupon_code }}</span>
- {% endfor %}
- </span>
- </th>
-</tr>
-<tr>
- <th class="text-right" colspan="2">
- {{ _("Discount") }}
- </th>
- <th class="text-right">
- <span>
- {% set tot_SO_discount = [] %}
- {%- for item in doc.items -%}
- {% if tot_SO_discount.append((((item.price_list_rate * item.qty)
- * item.discount_percentage) / 100)) %}{% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
- </span>
- </th>
-</tr>
-{% endif %}
+ {% if doc.coupon_code %}
+ <tr>
+ <td class="text-left total-discount" colspan="2" style="padding-right: 2rem;">
+ {{ _("Applied Coupon Code") }}
+ </td>
+ <td class="text-right total-discount">
+ <span>
+ {%- for row in frappe.get_all(doctype="Coupon Code",
+ fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
+ <span>{{ row.coupon_code }}</span>
+ {% endfor %}
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td class="text-left total-discount" colspan="2">
+ {{ _("Savings") }}
+ </td>
+ <td class="text-right total-discount">
+ <span>
+ {% set tot_SO_discount = [] %}
+ {%- for item in doc.items -%}
+ {% if tot_SO_discount.append((((item.price_list_rate * item.qty)
+ * item.discount_percentage) / 100)) %}{% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
+ </span>
+ </td>
+ </tr>
+ {% endif %}
{% endif %}
<tr>
- <th></th>
- <th class="item-grand-total">
+ <th class="text-left item-grand-total" colspan="1">
{{ _("Grand Total") }}
</th>
- <th class="text-right item-grand-total">
+ <th class="text-right item-grand-total totals" colspan="3">
{{ doc.get_formatted("grand_total") }}
</th>
</tr>
diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index 0c7993b..262b86f 100644
--- a/erpnext/templates/pages/cart.html
+++ b/erpnext/templates/pages/cart.html
@@ -21,7 +21,7 @@
{% if doc.items %}
<div class="cart-container">
<div class="row m-0">
- <div class="col-md-8 frappe-card p-5">
+ <div class="col-md-8 frappe-card p-5 mb-4">
<div>
<div id="cart-error" class="alert alert-danger" style="display: none;"></div>
<div class="cart-items-header">
@@ -30,11 +30,12 @@
<table class="table mt-3 cart-table">
<thead>
<tr>
- <th width="60%">{{ _('Item') }}</th>
+ <th class="item-column">{{ _('Item') }}</th>
<th width="20%">{{ _('Quantity') }}</th>
{% if cart_settings.enable_checkout %}
- <th width="20%" class="text-right">{{ _('Subtotal') }}</th>
+ <th width="20" class="text-right column-sm-view">{{ _('Subtotal') }}</th>
{% endif %}
+ <th width="10%" class="column-sm-view"></th>
</tr>
</thead>
<tbody class="cart-items">
@@ -47,31 +48,32 @@
{% endif %}
</table>
</div>
- <div class="row">
- <div class="col-4">
+
+ <div class="row mt-2">
+ <div class="col-3">
{% if cart_settings.enable_checkout %}
- <a class="btn btn-outline-primary" href="/orders">
- {{ _('See past orders') }}
- </a>
+ <a class="btn btn-outline-primary" href="/orders">
+ {{ _('Past Orders') }}
+ </a>
{% else %}
- <a class="btn btn-outline-primary" href="/quotations">
- {{ _('See past quotations') }}
- </a>
+ <a class="btn btn-outline-primary" href="/quotations">
+ {{ _('See past quotations') }}
+ </a>
{% endif %}
</div>
- <div class="col-8">
+ <div class="col-9">
{% if doc.items %}
<div class="place-order-container">
<a class="btn btn-primary-light mr-2" href="/all-products">
- {{ _("Continue Shopping") }}
+ {{ _('Back to Shop') }}
</a>
{% if cart_settings.enable_checkout %}
<button class="btn btn-primary btn-place-order" type="button">
- {{ _("Place Order") }}
+ {{ _('Place Order') }}
</button>
{% else %}
<button class="btn btn-primary btn-request-for-quotation" type="button">
- {{ _("Request for Quotation") }}
+ {{ _('Request for Quotation') }}
</button>
{% endif %}
</div>