Website Product Image

erpnext/hooks.py

@@ -11,7 +11,7 @@ error_report_email = "support@erpnext.com"
 app_include_js = "assets/js/erpnext.min.js"
 app_include_css = "assets/css/erpnext.css"
 web_include_js = "assets/js/erpnext-web.min.js"
-web_include_css = "assets/css/shopping-cart-web.css"
+web_include_css = "assets/erpnext/css/website.css"
 
 after_install = "erpnext.setup.install.after_install"
 

erpnext/public/css/erpnext.css

@@ -2,23 +2,17 @@
   margin: 11px auto;
   text-align: center;
 }
-
 .show-all-reports {
   margin-top: 5px;
   font-size: 11px;
 }
-
 /* toolbar */
 .toolbar-splash {
   width: 32px;
   height: 32px;
   margin: -10px auto;
 }
-
 /* pos */
-.pos {
-}
-
 .pos-item {
   display: inline-block;
   overflow: hidden;
@@ -31,90 +25,73 @@
   margin: 1.6%;
   border: 1px solid #d1d8dd;
 }
-
 .pos-item-text {
   padding: 0px 5px;
 }
-
 .pos-item .item-code {
   margin-bottom: 0px;
 }
-
 .pos-item .no-image {
   background-color: #fafbfc;
   border: 1px dashed #d1d8dd;
 }
-
 .pos-item-image {
   padding-bottom: 100%;
   background-size: cover;
   border: 1px solid transparent;
 }
-
 .pos-item-area {
   border: 1px solid #d1d8dd;
   border-top: none;
 }
-
 .pos-item-toolbar {
   padding: 10px 0px;
   border-bottom: 1px solid #d1d8dd;
 }
-
 .item-list-area {
   padding: 15px 0px;
 }
-
+.pos-toolbar,
-.pos-toolbar, .pos-bill-toolbar {
+.pos-bill-toolbar {
   padding: 10px 0px;
   border-bottom: 1px solid #d1d8dd;
   height: 51px;
 }
-
 .pos-item-toolbar .form-group {
   margin-bottom: 0px;
 }
-
 .pos-bill-wrapper {
   border: 1px solid #d1d8dd;
   border-top: none;
   margin-right: -1px;
 }
-
 .pos-bill {
   margin-left: -15px;
   margin-right: -15px;
 }
-
 .pos-bill-row {
   margin: 0px;
   padding: 7px 0px;
   border-top: 1px solid #d1d8dd;
 }
-
 .pos-bill-header {
   border: none !important;
   background-color: #f5f7fa;
 }
-
 .pos-item-qty {
   display: inline-block;
 }
-
 .pos-qty-row > div {
   padding: 5px 0px;
 }
-
 .pos-qty-btn {
   margin-top: 3px;
   cursor: pointer;
   font-size: 120%;
 }
-
 .pos .search-area .form-group {
   max-width: 100% !important;
 }
-
 .pos .tax-table {
   margin-bottom: 10px;
 }

erpnext/public/css/shopping_cart.css

@@ -1,11 +0,0 @@
-.item-main-image {
-	max-width: 100%;
-	margin: auto;
-}
-.web-long-description {
-	font-size: 18px;
-	line-height: 200%;
-}
-.item-stock {
-	margin-bottom: 10px !important;
-}

erpnext/public/css/website.css

@@ -0,0 +1,50 @@
+.web-long-description {
+  font-size: 18px;
+  line-height: 200%;
+}
+.item-stock {
+  margin-bottom: 10px !important;
+}
+.product-link {
+  display: block;
+  text-align: center;
+}
+.product-image-wrapper {
+  max-width: 300px;
+  margin: auto;
+  border-radius: 4px;
+}
+@media (max-width: 767px) {
+  .product-image {
+    height: 0px;
+    padding: 0px 0px 100%;
+    overflow: hidden;
+  }
+}
+.product-image-square {
+  width: 100%;
+  height: 0;
+  padding: 50% 0px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  border-radius: 0.5em;
+}
+.product-image.missing-image {
+  width: 100%;
+  height: 0;
+  padding: 50% 0px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  border-radius: 0.5em;
+  border: 1px dashed #d1d8dd;
+  position: relative;
+}
+.product-image.missing-image .octicon {
+  font-size: 32px;
+  color: #d1d8dd;
+}
+.product-text {
+  padding: 15px 0px;
+}

erpnext/public/js/shopping_cart.js

@@ -45,22 +45,16 @@ $.extend(shopping_cart, {
 
 	set_cart_count: function() {
 		var cart_count = getCookie("cart_count");
-		var $cart = $("#website-post-login").find('[data-label="Cart"]');
+		var $cart = $('.dropdown [data-label="Cart"]');
 		var $badge = $cart.find(".badge");
-		var $cog = $("#website-post-login").find(".dropdown-toggle");
-		var $cog_count = $cog.find(".cart-count");
 		if(cart_count) {
 			if($badge.length === 0) {
-				var $badge = $('<span class="badge pull-right"></span>').prependTo($cart.find("a"));
+				var $badge = $('<span class="badge pull-right"></span>')
+					.prependTo($cart.find("a").addClass("badge-hover"));
 			}
 			$badge.html(cart_count);
-			if($cog_count.length === 0) {
-				var $cog_count = $('<sup class="cart-count"></span>').insertAfter($cog.find(".icon-cog"));
-			}
-			$cog_count.html(cart_count);
 		} else {
 			$badge.remove();
-			$cog_count.remove();
 		}
 	}
 });

erpnext/public/less/erpnext.less

@@ -0,0 +1,121 @@
+.erpnext-footer {
+	margin: 11px auto;
+	text-align: center;
+}
+
+.show-all-reports {
+	margin-top: 5px;
+	font-size: 11px;
+}
+
+/* toolbar */
+.toolbar-splash {
+	width: 32px;
+	height: 32px;
+	margin: -10px auto;
+}
+
+/* pos */
+.pos {
+}
+
+.pos-item {
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	cursor: pointer;
+	padding: 5px;
+	height: 0px;
+	padding-bottom: 38%;
+	width: 30%;
+	margin: 1.6%;
+	border: 1px solid #d1d8dd;
+}
+
+.pos-item-text {
+	padding: 0px 5px;
+}
+
+.pos-item .item-code {
+	margin-bottom: 0px;
+}
+
+.pos-item .no-image {
+	background-color: #fafbfc;
+	border: 1px dashed #d1d8dd;
+}
+
+.pos-item-image {
+	padding-bottom: 100%;
+	background-size: cover;
+	border: 1px solid transparent;
+}
+
+.pos-item-area {
+	border: 1px solid #d1d8dd;
+	border-top: none;
+}
+
+.pos-item-toolbar {
+	padding: 10px 0px;
+	border-bottom: 1px solid #d1d8dd;
+}
+
+.item-list-area {
+	padding: 15px 0px;
+}
+
+.pos-toolbar, .pos-bill-toolbar {
+	padding: 10px 0px;
+	border-bottom: 1px solid #d1d8dd;
+	height: 51px;
+}
+
+.pos-item-toolbar .form-group {
+	margin-bottom: 0px;
+}
+
+.pos-bill-wrapper {
+	border: 1px solid #d1d8dd;
+	border-top: none;
+	margin-right: -1px;
+}
+
+.pos-bill {
+	margin-left: -15px;
+	margin-right: -15px;
+}
+
+.pos-bill-row {
+	margin: 0px;
+	padding: 7px 0px;
+	border-top: 1px solid #d1d8dd;
+}
+
+.pos-bill-header {
+	border: none !important;
+	background-color: #f5f7fa;
+}
+
+.pos-item-qty {
+	display: inline-block;
+}
+
+.pos-qty-row > div {
+	padding: 5px 0px;
+}
+
+.pos-qty-btn {
+	margin-top: 3px;
+	cursor: pointer;
+	font-size: 120%;
+}
+
+.pos .search-area .form-group {
+	max-width: 100% !important;
+}
+
+.pos .tax-table {
+	margin-bottom: 10px;
+}
+

erpnext/public/less/website.less

@@ -0,0 +1,53 @@
+@border-color: #d1d8dd;
+
+.web-long-description {
+	font-size: 18px;
+	line-height: 200%;
+}
+.item-stock {
+	margin-bottom: 10px !important;
+}
+
+.product-link {
+	display: block;
+	text-align: center;
+}
+
+.product-image-wrapper {
+	max-width: 300px;
+	margin: auto;
+	border-radius: 4px;
+}
+
+@media (max-width: 767px) {
+	.product-image {
+		height: 0px;
+		padding: 0px 0px 100%;
+		overflow: hidden;
+	}
+}
+
+.product-image-square {
+	width: 100%;
+	height: 0;
+	padding: 50% 0px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center top;
+	border-radius: 0.5em;
+}
+
+.product-image.missing-image {
+	.product-image-square;
+	border: 1px dashed @border-color;
+	position: relative;
+}
+
+.product-image.missing-image .octicon {
+	font-size: 32px;
+	color: @border-color;
+}
+
+.product-text {
+	padding: 15px 0px;
+}

erpnext/shopping_cart/utils.py

@@ -25,7 +25,7 @@ def clear_cart_count(login_manager):
 	if show_cart_count():
 		frappe.local.cookie_manager.delete_cookie("cart_count")
 
-def update_website_params(context):
+def update_website_context(context):
 	cart_enabled = is_cart_enabled()
 	context["shopping_cart_enabled"] = cart_enabled
 
@@ -44,6 +44,6 @@ def update_my_account_context(context):
 		{"label": _("Orders"), "url": "orders"},
 		{"label": _("Invoices"), "url": "invoices"},
 		{"label": _("Shipments"), "url": "shipments"},
-		{"label": _("Issues"), "url": "tickets"},
+		# {"label": _("Issues"), "url": "tickets"},
 		{"label": _("Addresses"), "url": "addresses"},
 	])

erpnext/stock/doctype/item/item_list.js

@@ -1,6 +1,7 @@
 frappe.listview_settings['Item'] = {
 	add_fields: ["item_name", "stock_uom", "item_group", "image", "variant_of",
 		"has_variants", "end_of_life", "is_sales_item"],
+
 	get_indicator: function(doc) {
 		if(doc.end_of_life < frappe.datetime.get_today()) {
 			return [__("Expired"), "grey", "end_of_life,<,Today"]

erpnext/templates/generators/item.html

@@ -3,25 +3,19 @@
 {% block header %}<h2>{{ title }}</h2>{% endblock %}
 
 {% block content %}
+{% from "erpnext/templates/includes/macros.html" import product_image %}
 <div class="item-content">
 	{% include 'templates/includes/product_search_box.html' %}
 	<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
 		<div class="row">
-			<div class="col-md-6">
+			<div class="col-sm-5">
 				{% if slideshow %}
 					{% include "templates/includes/slideshow.html" %}
 				{% else %}
-					{% if website_image %}
+					{{ product_image(website_image, "product-full-image") }}
-					<image itemprop="image" class="item-main-image"
-						src="{{ website_image }}" />
-					{% else %}
-					<div class="img-area">
-		{% include 'templates/includes/product_missing_image.html' %}
-					</div>
-					{% endif %}
 				{% endif %}
 			</div>
-			<div class="col-md-6">
+			<div class="col-sm-7">
 				<!-- <h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3> -->
 				<div itemprop="description">
 				{{ web_long_description or description or _("No description given") }}

erpnext/templates/generators/item_group.html

@@ -39,33 +39,12 @@ $(function() {
 
 {% block style %}
 <style>
-	.product-link {
-		display: block;
-		text-align: center;
-	}
-
-	.product-image-wrapper {
-		max-width: 300px;
-		margin: auto;
-	}
-
-	.product-image {
-		width: 100%;
-		height: 0;
-		padding-bottom: 100%;
-		border-radius: 4px;
-		border: 1px solid transparent;
-		background-size: cover;
-		background-repeat: no-repeat;
-	}
-
 	.product-image.missing-image {
-		border: 1px dashed {{ border_color or "#d1d8dd" }};
+		border: 1px dashed {{ theme.border_color or "#d1d8dd" }};
 	}
 
-	.product-text {
+	.product-image.missing-image .octicon {
-		padding: 15px 0px;
+		color: {{ theme.border_color or "#d1d8dd" }};
 	}
-
 </style>
 {% endblock %}

erpnext/templates/includes/cart.js

@@ -105,8 +105,7 @@ $.extend(shopping_cart, {
 
 	render_item_row: function($cart_items, doc) {
 		doc.image_html = doc.website_image ?
-			'<div style="height: 120px; overflow: hidden;"><img src="' + doc.website_image + '" /></div>' :
+		'<div style="height: 120px; overflow: hidden;"><img src="' + doc.website_image + '" /></div>': "";
-			'{% include "templates/includes/product_missing_image.html" %}';
 
 		if(doc.description === doc.item_name) doc.description = "";
 
@@ -265,7 +264,7 @@ $.extend(shopping_cart, {
 						.html(msg || frappe._("Something went wrong!"))
 						.toggle(true);
 				} else {
-					window.location.href = "order?name=" + encodeURIComponent(r.message);
+					window.location.href = "/orders/" + encodeURIComponent(r.message);
 				}
 			}
 		});

erpnext/templates/includes/macros.html

@@ -0,0 +1,17 @@
+{% macro product_image_square(website_image, css_class="") %}
+<div class="product-image product-image-square {% if not website_image -%} missing-image {%- endif %} {{ css_class }}"
+	{% if website_image -%} style="background-image: url({{ website_image }});" {%- endif %}>
+	{% if not website_image -%}<i class="centered octicon octicon-device-camera"></i>{%- endif %}
+</div>
+{% endmacro %}
+
+{% macro product_image(website_image, css_class="") %}
+<div class="product-image {% if not website_image -%} missing-image {%- endif %} {{ css_class }}">
+	{% if website_image -%}
+		<img src="{{ website_image }}" class="img-responsive">
+	{%- else -%}
+		<i class="centered octicon octicon-device-camera"></i>
+	{%- endif %}
+</div>
+{% endmacro %}
+

erpnext/templates/includes/product_in_grid.html

@@ -1,8 +1,8 @@
+{% from "erpnext/templates/includes/macros.html" import product_image_square %}
+
 <a class="product-link" href="{{ route or page_name }}">
-	<div class="col-sm-2 product-image-wrapper">
+	<div class="col-sm-2 col-xs-4 product-image-wrapper">
-		<div class="product-image {% if not website_image -%}missing-image{%- endif %}"
+		{{ product_image_square(website_image) }}
-			{% if website_image -%} style="background-image: url({{ website_image }});" {%- endif %}>
-		</div>
 		<div class="product-text small">{{ item_name }}</div>
 	</div>
 </a>

erpnext/templates/includes/product_missing_image.html

@@ -1 +0,0 @@
-<div class="missing-image"><i class="icon-camera"></i></div>