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/www/all-products/index.html

@@ -7,7 +7,8 @@
 {% endblock header %}
 
 {% block page_content %}
-<div class="row" style="display: none;">
+<!-- Old Search -->
+<!-- <div class="row" style="display: none;">
 	<div class="col-8">
 		<div class="input-group input-group-sm mb-3">
 			<input type="search" class="form-control" placeholder="{{_('Search')}}"
@@ -29,22 +30,16 @@
 			{{ _('Toggle Filters') }}
 		</button>
 	</div>
-</div>
+</div> -->
 
+<!-- Items section -->
 <div class="row">
-	<div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
-		<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>
+	<div id="product-listing" class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
+		<!-- Rendered via JS -->
 	</div>
-	<div class="col-12 order-1 col-md-3 order-md-1">
 
+	<!-- Filters Section -->
+	<div class="col-12 order-1 col-md-3 order-md-1">
 		{% if frappe.form_dict.start or frappe.form_dict.field_filters or frappe.form_dict.attribute_filters or frappe.form_dict.search %}
 
 
@@ -64,11 +59,6 @@
 			{% if attribute_filters %}
 				{{ attribute_filter_section(attribute_filters) }}
 			{% endif %}
-
-			<!-- discount filters -->
-			{% if discount_filters %}
-				{{ discount_range_filters(discount_filters) }}
-			{% endif %}
 		</div>
 
 		<script>
@@ -91,7 +81,10 @@
 		</script>
 	</div>
 </div>
-<div class="row product-paging-area mt-5">
+
+<!-- TODO -->
+<!-- Paging Section -->
+<!-- <div class="row product-paging-area mt-5">
 	<div class="col-3">
 	</div>
 	<div class="col-9 text-right">
@@ -102,7 +95,7 @@
 		<button class="btn btn-default btn-next" data-start="{{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</button>
 		{% endif %}
 	</div>
-</div>
+</div> -->
 
 <script>
 	frappe.ready(() => {

erpnext/www/all-products/index.js

@@ -1,6 +1,17 @@
 $(() => {
 	class ProductListing {
 		constructor() {
+			let is_item_group_page = $(".item-group-content").data("item-group");
+			let item_group = is_item_group_page || null;
+
+			// Render Products
+			frappe.require('assets/js/e-commerce.min.js', function() {
+				new erpnext.ProductView({
+					products_section: $('#product-listing'),
+					item_group: item_group
+				});
+			});
+
 			this.bind_filters();
 			this.bind_card_actions();
 			this.bind_search();
@@ -77,8 +88,8 @@ $(() => {
 		}
 
 		bind_card_actions() {
-			erpnext.shopping_cart.bind_add_to_cart_action();
-			erpnext.wishlist.bind_wishlist_action();
+			e_commerce.shopping_cart.bind_add_to_cart_action();
+			e_commerce.wishlist.bind_wishlist_action();
 		}
 
 		bind_search() {

erpnext/www/all-products/index.py

@@ -6,33 +6,55 @@ from erpnext.e_commerce.filters import ProductFiltersBuilder
 sitemap = 1
 
 def get_context(context):
+	# Add homepage as parent
+	context.parents = [{"name": frappe._("Home"), "route":"/"}]
 
+	filter_engine = ProductFiltersBuilder()
+	context.field_filters = filter_engine.get_field_filters()
+	context.attribute_filters = filter_engine.get_attribute_filters()
+
+	context.page_length = cint(frappe.db.get_single_value('E Commerce Settings', 'products_per_page'))or 20
+
+	context.no_cache = 1
+
+@frappe.whitelist(allow_guest=True)
+def get_product_filter_data():
+	"""Get pre-rendered filtered products and discount filters on load."""
 	if frappe.form_dict:
 		search = frappe.form_dict.search
 		field_filters = frappe.parse_json(frappe.form_dict.field_filters)
 		attribute_filters = frappe.parse_json(frappe.form_dict.attribute_filters)
 		start = cint(frappe.parse_json(frappe.form_dict.start))
+		item_group = frappe.form_dict.item_group
 	else:
-		search = field_filters = attribute_filters = None
+		search, attribute_filters, item_group = None, None, None
+		field_filters = {}
 		start = 0
 
+	if item_group:
+		field_filters['item_group'] = item_group
+
 	engine = ProductQuery()
-	context.items, discounts = engine.query(attribute_filters, field_filters, search, start)
+	items, discounts = engine.query(attribute_filters, field_filters, search_term=search, start=start)
 
-	# Add homepage as parent
-	context.parents = [{"name": frappe._("Home"), "route":"/"}]
+	item_html = []
+	for item in items:
+		item_html.append(frappe.render_template('erpnext/www/all-products/item_row.html', {
+			'item': item,
+			'e_commerce_settings': engine.settings
+		}))
+	html = ''.join(item_html)
 
-	filter_engine = ProductFiltersBuilder()
+	if not items:
+		html = frappe.render_template('erpnext/www/all-products/not_found.html', {})
 
-	context.field_filters = filter_engine.get_field_filters()
-	context.attribute_filters = filter_engine.get_attribute_filters()
+	# discount filter data
+	filters = {}
 	if discounts:
-		context.discount_filters = filter_engine.get_discount_filters(discounts)
+		filter_engine = ProductFiltersBuilder()
+		filters["discount_filters"] = filter_engine.get_discount_filters(discounts)
 
-	context.e_commerce_settings = engine.settings
-	context.page_length = engine.settings.products_per_page or 20
-
-	context.no_cache = 1
+	return html, filters
 
 @frappe.whitelist(allow_guest=True)
 def get_products_html_for_website(field_filters=None, attribute_filters=None):
@@ -47,7 +69,7 @@ def get_products_html_for_website(field_filters=None, attribute_filters=None):
 	for item in items:
 		item_html.append(frappe.render_template('erpnext/www/all-products/item_row.html', {
 			'item': item,
-			'e_commerce_settings': None
+			'e_commerce_settings': engine.settings
 		}))
 	html = ''.join(item_html)