[enhancement] website: optionally show products as list

erpnext/public/css/website.css

@@ -48,10 +48,12 @@
   text-transform: uppercase;
   font-size: 12px;
 }
+.product-search {
+  margin-bottom: 15px;
+}
 @media (max-width: 767px) {
   .product-search {
     width: 100%;
-    margin-bottom: 13px;
   }
 }
 .borderless td,
@@ -124,3 +126,24 @@
   border-top: 1px solid #d1d8dd;
   padding-top: 15px;
 }
+.product-list-link .row {
+  border-bottom: 1px solid #EBEFF2;
+}
+.product-list-link .row:hover {
+  background-color: #fafbfc;
+}
+.product-list-link .row > div {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.product-list-link:first-child .row {
+  border-top: 1px solid #EBEFF2;
+}
+.item-group-nav-buttons {
+  margin-top: 15px;
+}
+@media (min-width: 992px) {
+  .footer-subscribe {
+    max-width: 350px;
+  }
+}

erpnext/public/less/website.less

@@ -56,10 +56,14 @@
 	font-size: 12px;
 }
 
+.product-search {
+	margin-bottom: 15px;
+}
+
+
 @media (max-width: 767px) {
 	.product-search {
 		width: 100%;
-		margin-bottom: 13px;
 	}
 }
 
@@ -157,3 +161,31 @@
 	}
 }
 
+.product-list-link {
+	.row {
+		border-bottom: 1px solid @light-border-color;
+	}
+
+	.row:hover {
+		background-color: @light-bg;
+	}
+
+	.row > div {
+		padding-top: 15px;
+		padding-bottom: 15px;
+	}
+}
+
+.product-list-link:first-child .row {
+	border-top: 1px solid @light-border-color;
+}
+
+.item-group-nav-buttons {
+	margin-top: 15px;
+}
+
+@media (min-width: 992px) {
+	.footer-subscribe {
+		max-width: 350px;
+	}
+}

erpnext/setup/doctype/item_group/item_group.py

@@ -4,7 +4,7 @@
 from __future__ import unicode_literals
 import frappe
 import urllib
-from frappe.utils import nowdate
+from frappe.utils import nowdate, cint, cstr
 from frappe.utils.nestedset import NestedSet
 from frappe.website.website_generator import WebsiteGenerator
 from frappe.website.render import clear_cache
@@ -60,7 +60,8 @@ class ItemGroup(NestedSet, WebsiteGenerator):
 		context.update({
 			"items": get_product_list_for_group(product_group = self.name, start=start, limit=24, search=frappe.form_dict.get("q")),
 			"parent_groups": get_parent_item_groups(self.name),
-			"title": self.name
+			"title": self.name,
+			"products_as_list": cint(frappe.db.get_single_value('Website Settings', 'products_as_list'))
 		})
 
 		if self.slideshow:
@@ -73,8 +74,8 @@ def get_product_list_for_group(product_group=None, start=0, limit=10, search=Non
 	child_groups = ", ".join(['"' + i[0] + '"' for i in get_child_groups(product_group)])
 
 	# base query
-	query = """select name, item_name, page_name, website_image, thumbnail, item_group,
+	query = """select name, item_name, item_code, page_name, website_image, thumbnail, item_group,
-			web_long_description as website_description,
+			description, web_long_description as website_description,
 			concat(parent_website_route, "/", page_name) as route
 		from `tabItem`
 		where show_in_website = 1
@@ -108,7 +109,12 @@ def get_item_for_list_in_html(context):
 	# user may forget it during upload
 	if (context.get("website_image") or "").startswith("files/"):
 		context["website_image"] = "/" + urllib.quote(context["website_image"])
-	return frappe.get_template("templates/includes/product_in_grid.html").render(context)
+
+	products_template = 'templates/includes/products_as_grid.html'
+	if cint(frappe.db.get_single_value('Products Settings', 'products_as_list')):
+		products_template = 'templates/includes/products_as_list.html'
+
+	return frappe.get_template(products_template).render(context)
 
 def get_group_item_count(item_group):
 	child_groups = ", ".join(['"' + i[0] + '"' for i in get_child_groups(item_group)])

erpnext/templates/generators/item_group.html

@@ -27,12 +27,12 @@
 	</div>
 	<div>
 		{% if items %}
-		<div id="search-list" class="row">
+		<div id="search-list" {% if not products_as_list -%} class="row" {%- endif %}>
 			{% for item in items %}
 				{{ item }}
 			{% endfor %}
 		</div>
-			<div class="text-center">
+		<div class="text-center item-group-nav-buttons">
 			{% if frappe.form_dict.start|int > 0 %}
 			<a class="btn btn-default" href="{{ pathname }}?start={{ frappe.form_dict.start|int - 24 }}">Prev</a>
 			{% endif %}

erpnext/templates/includes/footer/footer_extension.html

@@ -1,10 +1,12 @@
 {% if not hide_footer_signup %}
-
+<div class='input-group input-group-sm pull-right footer-subscribe'>
 	<input class="form-control" type="text" id="footer-subscribe-email"
-                    style="display: inline-block; max-width: 50%;margin-right:15px;"
 		placeholder="{{ _('Your email address') }}...">
-				<button class="btn btn-default btn-sm btn-subscribe" type="button"
+	<span class='input-group-btn'>
-					id="footer-subscribe-button" style="float:right; border-radius:8px; border:1px solid #7575ff; 					color:#7575ff; background-color:white;">{{ _("Get Updates") }}</button>
+		<button class="btn btn-default" type="button"
+			id="footer-subscribe-button">{{ _("Get Updates") }}</button>
+	</span>
+</div>
 
 <script>
 frappe.ready(function() {
@@ -33,4 +35,5 @@ frappe.ready(function() {
 	});
 });
 </script>
+
 {% endif %}

erpnext/templates/includes/product_in_list.html

@@ -1,16 +0,0 @@
-<!-- TODO product listing -->
-<div class="container content">
-	<div style="height: 120px; overflow: hidden;">
-		<a href="{{ (route or page_name)|abs_url }}">
-		{%- if website_image -%}
-		<img class="product-image" style="width: 80%; margin: auto;" src="{{
-            (thumbnail or website_image)|abs_url }}">
-		{%- else -%}
-        <div style="width: 80%; height: 120px; background-color: #F7FAFC;"></div>
-		{%- endif -%}
-		</a>
-	</div>
-	<div style="height: 100px; overflow: hidden; font-size: 80%;">
-		<div><a href="{{ (route or page_name)|abs_url }}">{{ item_name }}</a></div>
-	</div>
-</div>

erpnext/templates/includes/product_list.js

@@ -22,14 +22,14 @@ window.get_product_list = function() {
 		},
 		dataType: "json",
 		success: function(data) {
-			window.render_product_list(data.message);
+			window.render_product_list(data.message || []);
 		}
 	})
 }
 
 window.render_product_list = function(data) {
-	if(data.length) {
 	var table = $("#search-list .table");
+	if(data.length) {
 		if(!table.length)
 			var table = $("<table class='table'>").appendTo("#search-list");
 

erpnext/templates/includes/products_as_list.html

@@ -0,0 +1,18 @@
+{% from "erpnext/templates/includes/macros.html" import product_image_square %}
+
+<a class="product-link product-list-link" href="{{ (route or page_name)|abs_url }}">
+	<div class='row'>
+		<div class='col-xs-3 col-sm-2 product-image-wrapper'>
+			{{ product_image_square(thumbnail or website_image) }}
+		</div>
+		<div class='col-xs-9 col-sm-10 text-left'>
+			<div class="text-ellipsis product-text strong">{{ item_name }}</div>
+			{% set website_description = website_description or description %}
+			{% if website_description != item_name %}
+				<div class="text-ellipsis text-muted">{{ website_description or description }}</div>
+			{% elif item_code != item_name %}
+				<div class="text-ellipsis text-muted">{{ _('Item Code') }}: {{ item_code }}</div>
+			{% endif %}
+		</div>
+	</div>
+</a>

erpnext/templates/pages/product_search.py

@@ -14,8 +14,8 @@ def get_product_list(search=None, start=0, limit=12):
 	# limit = 12 because we show 12 items in the grid view
 
 	# base query
-	query = """select name, item_name, page_name, website_image, thumbnail, item_group,
+	query = """select name, item_name, item_code, page_name, website_image, thumbnail, item_group,
-			web_long_description as website_description, parent_website_route
+			description, web_long_description as website_description, parent_website_route
 		from `tabItem`
 		where show_in_website = 1
 			and disabled=0