feat: (wip) Toggle Views

- Auto Height on Cards
- Title with ellipses on length exceed
- Changed namepaces
- Moved product card rendering to JS
- Added Image and List View Toggling buttons
- Kept basic filters rendering just as before

erpnext/templates/generators/item/item_add_to_cart.html

@@ -143,7 +143,7 @@
 			const $btn = $(e.currentTarget);
 			$btn.prop('disabled', true);
 			const item_code = $btn.data('item-code');
-			erpnext.shopping_cart.update_cart({
+			e_commerce.shopping_cart.update_cart({
 				item_code,
 				qty: 1,
 				callback(r) {
@@ -170,11 +170,11 @@
 			};
 			let success_action = function() {
 				$btn.prop('disabled', false);
-				erpnext.wishlist.set_wishlist_count();
+				e_commerce.wishlist.set_wishlist_count();
 				$('.btn-add-to-wishlist, .btn-view-in-wishlist').toggleClass('hidden');
 
 			};
-			erpnext.wishlist.add_remove_from_wishlist("add", args, success_action, failure_action);
+			e_commerce.wishlist.add_remove_from_wishlist("add", args, success_action, failure_action);
 		});
 
 		$('.page_content').on('click', '.offer-details', (e) => {

erpnext/templates/generators/item/item_configure.js

@@ -247,7 +247,7 @@ class ItemConfigure {
 		const additional_notes = Object.keys(this.range_values || {}).map(attribute => {
 			return `${attribute}: ${this.range_values[attribute]}`;
 		}).join('\n');
-		erpnext.shopping_cart.update_cart({
+		e_commerce.shopping_cart.update_cart({
 			item_code,
 			additional_notes,
 			qty: 1

erpnext/templates/generators/item_group.html

@@ -16,7 +16,8 @@
 {% endblock %}
 
 {% block page_content %}
-<div class="item-group-content" itemscope itemtype="http://schema.org/Product">
+<div class="item-group-content" itemscope itemtype="http://schema.org/Product"
+	data-item-group="{{ name }}">
 	<div class="item-group-slideshow">
 		{% if slideshow %}<!-- slideshow -->
 			{{ web_block(
@@ -33,7 +34,7 @@
 		{% endif %}
 	</div>
 	<div class="row">
-		<div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
+		<div id="product-listing" class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
 			{% if sub_categories %}
 			<div class="sub-category-container">
 				<div class="heading"> {{ _('Sub Categories') }} </div>
@@ -48,15 +49,9 @@
 				{% endfor %}
 			</div>
 			{% endif %}
-			<div class="row products-list">
-				{% if items %}
-					{% for item in items %}
-						{% include "erpnext/www/all-products/item_row.html" %}
-					{% endfor %}
-				{% else %}
-					{% include "erpnext/www/all-products/not_found.html" %}
-				{% endif %}
-			</div>
+
+			<!-- Products Rendered in all-products/index.js-->
+
 		</div>
 		<div class="col-12 order-1 col-md-3 order-md-1">
 			<div class="collapse d-md-block mr-4 filters-section" id="product-filters">
@@ -70,10 +65,6 @@
 				<!-- attribute filters -->
 				{{ attribute_filter_section(attribute_filters) }}
 
-				<!-- discount filters -->
-				{% if discount_filters %}
-					{{ discount_range_filters(discount_filters) }}
-				{% endif %}
 			</div>
 
 			<script>

erpnext/templates/includes/cart.js

@@ -4,8 +4,8 @@
 // js inside blog page
 
 // shopping cart
-frappe.provide("erpnext.shopping_cart");
-var shopping_cart = erpnext.shopping_cart;
+frappe.provide("e_commerce.shopping_cart");
+var shopping_cart = e_commerce.shopping_cart;
 
 $.extend(shopping_cart, {
 	show_error: function(title, text) {

erpnext/templates/includes/macros.html

@@ -66,7 +66,8 @@
 	'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 title = item.web_item_name or item.item_name or item.item_code -%}
+{%- set title = title[:50] + "..." if title|len > 50 else title -%}
 {%- set image = item.website_image or item.image -%}
 {%- set description = item.website_description or item.description-%}
 
@@ -120,11 +121,13 @@
 <div class="card-body {{ align_class }}" style="width:100%">
 	<div style="margin-top: 16px; display: flex;">
 		<a href="/{{ item.route or '#' }}">
-			<div class="product-title">{{ title or '' }}</div>
+			<div class="product-title">
+				{{ title or '' }}
+				{% if item.in_stock %}
+				<span class="indicator {{ item.in_stock }} card-indicator"></span>
+				{% endif %}
+			</div>
 		</a>
-		{% if item.in_stock %}
-			<span class="indicator {{ item.in_stock }} card-indicator"></span>
-		{% endif %}
 		{% if not item.has_variants and settings.enable_wishlist %}
 			<div class="like-action"
 				data-item-code="{{ item.item_code }}"
@@ -363,7 +366,7 @@
 		<div class="filter-options">
 			{% for attr_value in attribute.item_attribute_values %}
 			<div class="checkbox">
-				<label data-value="{{ value }}">
+				<label data-value="{{ attr_value }}">
 					<input type="checkbox"
 						class="product-filter attribute-filter"
 						id="{{attr_value.name}}"
@@ -380,25 +383,4 @@
 		{% endif %}
 	</div>
 {% endfor %}
-{%- endmacro -%}
-
-{%- macro discount_range_filters(filters)-%}
-<div class="mb-4 filter-block pb-5">
-	<div class="filter-label mb-3">{{ _("Discounts") }}</div>
-	<div class="filter-options">
-		{% for entry in filters %}
-		<div class="checkbox">
-			<label data-value="{{ entry[0] }}">
-				<input type="radio" class="product-filter discount-filter"
-					name="discount" id="{{ entry[0] }}"
-					data-filter-name="discount" data-filter-value="{{ entry[0] }}"
-				>
-					<span class="label-area" for="{{ entry[0] }}">
-						{{ entry[1] }}
-					</span>
-			</label>
-		</div>
-		{% endfor %}
-	</div>
-</div>
 {%- endmacro -%}