feat: store home page and product page
diff --git a/erpnext/templates/generators/item/item.html b/erpnext/templates/generators/item/item.html
index d3691a6..55c45e2 100644
--- a/erpnext/templates/generators/item/item.html
+++ b/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 %}
diff --git a/erpnext/templates/generators/item/item_add_to_cart.html b/erpnext/templates/generators/item/item_add_to_cart.html
index dbf15de..3210e24 100644
--- a/erpnext/templates/generators/item/item_add_to_cart.html
+++ b/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] }})
diff --git a/erpnext/templates/generators/item/item_details.html b/erpnext/templates/generators/item/item_details.html
index 4cbecb0..9a0bb5c 100644
--- a/erpnext/templates/generators/item/item_details.html
+++ b/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>
diff --git a/erpnext/templates/generators/item/item_image.html b/erpnext/templates/generators/item/item_image.html
index 5d46a45..fa70ebe 100644
--- a/erpnext/templates/generators/item/item_image.html
+++ b/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 {
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index ea6b00f..1523b0d 100644
--- a/erpnext/templates/includes/macros.html
+++ b/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 %}
\ No newline at end of file
+{% 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 -%}
\ No newline at end of file
diff --git a/erpnext/templates/includes/products_as_list.html b/erpnext/templates/includes/products_as_list.html
index 88910d0..9bf9fd9 100644
--- a/erpnext/templates/includes/products_as_list.html
+++ b/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'>