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

erpnext/templates/includes/cart.js

@@ -18,6 +18,7 @@ $.extend(shopping_cart, {
 		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 @@ $.extend(shopping_cart, {
 		});
 	},
 
+	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) {

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 %}

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>

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>