feat: store home page and product page

erpnext/templates/generators/item/item.html

@@ -7,17 +7,19 @@
 {% endblock %}
 
 {% block page_content %}
-{% from "erpnext/templates/includes/macros.html" import product_image %}
-<div class="item-content">
-	<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
-		<div class="row mb-5">
-			{% include "templates/generators/item/item_image.html" %}
-			{% include "templates/generators/item/item_details.html" %}
+<div class="product-page">
+	{% from "erpnext/templates/includes/macros.html" import product_image %}
+	<div class="item-content">
+		<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
+			<div class="row mb-5">
+				{% include "templates/generators/item/item_image.html" %}
+				{% include "templates/generators/item/item_details.html" %}
+			</div>
+
+			{% include "templates/generators/item/item_specifications.html" %}
+
+			{{ doc.website_content or '' }}
 		</div>
-
-		{% include "templates/generators/item/item_specifications.html" %}
-
-		{{ doc.website_content or '' }}
 	</div>
 </div>
 {% endblock %}

erpnext/templates/generators/item/item_add_to_cart.html

@@ -6,10 +6,10 @@
 <div class="item-cart row mt-2" data-variant-item-code="{{ item_code }}">
 	<div class="col-md-12">
 		{% if cart_settings.show_price and product_info.price %}
-		<h4>
+		<div class="product-price">
 			{{ product_info.price.formatted_price_sales_uom }}
-			<small class="text-muted">({{ product_info.price.formatted_price }} / {{ product_info.uom }})</small>
-		</h4>
+			<small class="formatted-price">({{ product_info.price.formatted_price }} / {{ product_info.uom }})</small>
+		</div>
 		{% else %}
 			{{ _("Unit of Measurement") }} : {{ product_info.uom }}
 		{% endif %}
@@ -17,11 +17,11 @@
 		{% if cart_settings.show_stock_availability %}
 		<div>
 			{% if product_info.in_stock == 0 %}
-			<span class="text-danger">
+			<span class="text-danger no-stock">
 				{{ _('Not in stock') }}
 			</span>
 			{% elif product_info.in_stock == 1 %}
-			<span class="text-success">
+			<span class="text-success has-stock">
 				{{ _('In stock') }}
 				{% if product_info.show_stock_qty and product_info.stock_qty %}
 					({{ product_info.stock_qty[0][0] }})

erpnext/templates/generators/item/item_details.html

@@ -1,14 +1,21 @@
 <div class="col-md-8">
 <!-- title -->
-<h1 itemprop="name">
+<div class="product-title" itemprop="name">
 	{{ item_name }}
-</h1>
-<p class="text-muted">
+</div>
+<p class="product-code">
 	<span>{{ _("Item Code") }}:</span>
 	<span itemprop="productID">{{ doc.name }}</span>
 </p>
+{% if has_variants %}
+	<!-- configure template -->
+	{% include "templates/generators/item/item_configure.html" %}
+{% else %}
+	<!-- add variant to cart -->
+	{% include "templates/generators/item/item_add_to_cart.html" %}
+{% endif %}
 <!-- description -->
-<div itemprop="description">
+<div class="product-description" itemprop="description">
 {% if frappe.utils.strip_html(doc.web_long_description or '') %}
 	{{ doc.web_long_description | safe }}
 {% elif frappe.utils.strip_html(doc.description or '')  %}
@@ -17,12 +24,4 @@
 	{{ _("No description given") }}
 {% endif  %}
 </div>
-
-{% if has_variants %}
-	<!-- configure template -->
-	{% include "templates/generators/item/item_configure.html" %}
-{% else %}
-	<!-- add variant to cart -->
-	{% include "templates/generators/item/item_add_to_cart.html" %}
-{% endif %}
 </div>

erpnext/templates/generators/item/item_image.html

@@ -1,42 +1,42 @@
-<div class="col-md-4 h-100">
-{% if slides %}
-{{ product_image(slides[0].image, 'product-image') }}
-<div class="item-slideshow">
-	{% for item in slides %}
-	<img class="item-slideshow-image mt-2 {% if loop.first %}active{% endif %}"
-			src="{{ item.image }}" alt="{{ item.heading }}">
-	{% endfor %}
-</div>
-<!-- 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="col-md-4 h-100 d-flex">
+	{% 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);
 
-			$('.item-slideshow-image').removeClass('active');
-			$img.addClass('active');
-		});
-	})
-</script>
-{% else %}
-{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
-{% endif %}
+				$('.item-slideshow-image').removeClass('active');
+				$img.addClass('active');
+			});
+		})
+	</script>
+	{% else %}
+	{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
+	{% endif %}
 
-<!-- Simple image preview -->
+	<!-- Simple image preview -->
 
-<div class="image-zoom-view" style="display: none;">
-	<button type="button" class="close" aria-label="Close">
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-		 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
-			<line x1="18" y1="6" x2="6" y2="18"></line>
-			<line x1="6" y1="6" x2="18" y2="18"></line>
-		</svg>
-	</button>
-</div>
+	<div class="image-zoom-view" style="display: none;">
+		<button type="button" class="close" aria-label="Close">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+			stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
 </div>
 <style>
 	.website-image {

erpnext/templates/includes/macros.html

@@ -8,9 +8,9 @@
 {% endmacro %}
 
 {% macro product_image(website_image, css_class="", alt="") %}
-    <div class="border text-center rounded h-100 {{ css_class }}" style="overflow: hidden;">
+	<div class="border text-center rounded h-100 {{ css_class }}" style="overflow: hidden;">
 		<img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
-    </div>
+	</div>
 {% endmacro %}
 
 {% macro media_image(website_image, name, css_class="") %}
@@ -18,13 +18,13 @@
 		{% if not website_image -%}
 		<div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div>
 		{%- endif %}
-    	{% if website_image -%}
+		{% if website_image -%}
 			<a href="{{ frappe.utils.quoted(website_image) }}">
 				<img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}"
 					class="img-responsive img-thumbnail sidebar-image" style="min-height:100%; min-width:100%;">
 			</a>
-    	{%- endif %}
-    </div>
+		{%- endif %}
+	</div>
 {% endmacro %}
 
 {% macro render_homepage_section(section) %}
@@ -57,4 +57,61 @@
 </section>
 {% endif %}
 
-{% endmacro %}
+{% endmacro %}
+
+{%- macro item_card(title, image, url, description, rate, category, is_featured=False, is_full_width=False, align="Left") -%}
+{%- set align_items_class = resolve_class({
+	'align-items-end': align == 'Right',
+	'align-items-center': align == 'Center',
+	'align-items-start': align == 'Left',
+}) -%}
+{%- set col_size = 3 if is_full_width else 4 -%}
+{% if is_featured %}
+<div class="col-sm-{{ col_size*2 }} item-card">
+	<div class="card featured-item {{ align_items_class }}">
+		{% if image %}
+		<div class="row no-gutters">
+			<div class="col-md-6">
+				<img class="card-img" src="{{ image }}" alt="{{ title }}">
+			</div>
+			<div class="col-md-6">
+				{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+			</div>
+		</div>
+		{% else %}
+			<div class="col-md-12">
+				{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+			</div>
+		{% endif %}
+	</div>
+</div>
+{% else %}
+<div class="col-sm-{{ col_size }} item-card">
+	<div class="card {{ align_items_class }}">
+		{% if image %}
+		<img class="card-img" src="{{ image }}" alt="{{ title }}">
+		{% endif %}
+		{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+	</div>
+</div>
+{% endif %}
+{%- endmacro -%}
+
+{%- macro item_card_body(title, description, url, rate, category, is_featured, align) -%}
+{%- set align_class = resolve_class({
+	'text-right': align == 'Right',
+	'text-center': align == 'Center' and not is_featured,
+	'text-left': align == 'Left' or is_featured,
+}) -%}
+<div class="card-body {{ align_class }}">
+	<div class="product-title">{{ title or '' }}</div>
+	{% if is_featured %}
+	<div class="product-price">{{ rate or '' }}</div>
+	<div class="product-description ellipsis">{{ description or '' }}</div>
+	{% else %}
+	<div class="product-category">{{ category or '' }}</div>
+	<div class="product-price">{{ rate or '' }}</div>
+	{% endif %}
+</div>
+<a href="{{ url or '#' }}" class="stretched-link"></a>
+{%- endmacro -%}

erpnext/templates/includes/products_as_list.html

@@ -1,4 +1,4 @@
-{% from "erpnext/templates/includes/macros.html" import product_image_square %}
+{% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
 
 <a class="product-link product-list-link" href="{{ route|abs_url }}">
 	<div class='row'>