Chore: Miscellaneous UI review changes

- Added bg (variable) to pages, card space separation visible
- Removed `show brand line` in settings, shown by default
- Re-arranged settings by importance
- View toggling primary colour is grey
- Only populate recent searches on successful search
- Hit only one server side api, once while searching
- List view primary button float right
- Discounts takes upper limit eg. 10% and below
- Navbar icons only wiggle on qty increase in cart/wishlist
- Pay button in SO portal
- Remove bottom white space below item full page image, min-height fits to content
- List view vertical space between heading and item code
- Empty offer subtitle handled

erpnext/templates/generators/item/item_add_to_cart.html

@@ -71,7 +71,7 @@
 					</div>
 					<p class="mr-1 mb-1">
 						{{ _(offer.offer_title) }}:
-						{{ _(offer.offer_subtitle) }}
+						{{ _(offer.offer_subtitle) if offer.offer_subtitle else '' }}
 						<a class="offer-details" href="#"
 							data-offer-title="{{ offer.offer_title }}" data-offer-id="{{ offer.name }}"
 							role="button">
@@ -117,7 +117,7 @@
 			const $btn = $(e.currentTarget);
 			$btn.prop('disabled', true);
 			const item_code = $btn.data('item-code');
-			e_commerce.shopping_cart.update_cart({
+			erpnext.e_commerce.shopping_cart.update_cart({
 				item_code,
 				qty: 1,
 				callback(r) {

erpnext/templates/generators/item/item_details.html

@@ -58,6 +58,6 @@
 	$('.page_content').on('click', '.like-action-item-fp', (e) => {
 			// Bind action on wishlist button
 			const $btn = $(e.currentTarget);
-			e_commerce.wishlist.wishlist_action($btn);
+			erpnext.e_commerce.wishlist.wishlist_action($btn);
 		});
 </script>

erpnext/templates/generators/item/item_image.html

@@ -1,30 +1,30 @@
 {% set column_size = 5 if slides else 4 %}
 <div class="col-md-{{ column_size }} h-100 d-flex mb-4">
 	{% if slides %}
-	<div class="item-slideshow d-flex flex-column mr-3">
-		{% for item in slides %}
-		<img class="item-slideshow-image mb-2 {% if loop.first %}active{% endif %}"
-				src="{{ item.image }}" alt="{{ item.heading }}">
-		{% endfor %}
-	</div>
-	{{ product_image(slides[0].image, 'product-image') }}
-	<!-- Simple image slideshow -->
-	<script>
-		frappe.ready(() => {
-			$('.page_content').on('click', '.item-slideshow-image', (e) => {
-				const $img = $(e.currentTarget);
-				const link = $img.prop('src');
-				const $product_image = $('.product-image');
-				$product_image.find('a').prop('href', link);
-				$product_image.find('img').prop('src', link);
+		<div class="item-slideshow d-flex flex-column mr-3">
+			{% for item in slides %}
+			<img class="item-slideshow-image mb-2 {% if loop.first %}active{% endif %}"
+					src="{{ item.image }}" alt="{{ item.heading }}">
+			{% endfor %}
+		</div>
+		{{ product_image(slides[0].image, 'product-image') }}
+		<!-- Simple image slideshow -->
+		<script>
+			frappe.ready(() => {
+				$('.page_content').on('click', '.item-slideshow-image', (e) => {
+					const $img = $(e.currentTarget);
+					const link = $img.prop('src');
+					const $product_image = $('.product-image');
+					$product_image.find('a').prop('href', link);
+					$product_image.find('img').prop('src', link);
 
-				$('.item-slideshow-image').removeClass('active');
-				$img.addClass('active');
-			});
-		})
-	</script>
+					$('.item-slideshow-image').removeClass('active');
+					$img.addClass('active');
+				});
+			})
+		</script>
 	{% else %}
-	{{ product_image(doc.website_image or doc.image, alt=doc.website_image_alt or doc.item_name) }}
+		{{ product_image(doc.website_image or doc.image, alt=doc.website_image_alt or doc.item_name) }}
 	{% endif %}
 
 	<!-- Simple image preview -->

erpnext/templates/generators/item/item_specifications.html

@@ -1,9 +1,9 @@
 <!-- Is reused to render within tabs as well as independently -->
 {% if website_specifications %}
-<div class="mt-5 item-website-specification">
+<div class="{{ 'mt-2' if not show_tabs else 'mt-5'}} item-website-specification">
 	<div class="col-md-11">
 		{% if not show_tabs %}
-			<div class="product-title mb-5 mt-8">
+			<div class="product-title mb-5 mt-4">
 				Product Details
 			</div>
 		{% endif %}