feat: store home page and product page
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index d30bc8c..b4a1cf8 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -13,7 +13,8 @@
"public/js/shopping_cart.js"
],
"css/erpnext-web.css": [
- "public/scss/website.scss"
+ "public/scss/website.scss",
+ "public/scss/shopping_cart.scss"
],
"js/marketplace.min.js": [
"public/js/hub/marketplace.js"
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
new file mode 100644
index 0000000..16a2bc5
--- /dev/null
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -0,0 +1,206 @@
+@import "frappe/public/scss/desk/variables";
+@import "frappe/public/scss/mixins";
+
+.carousel-control {
+ height: 42px;
+ width: 42px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: white;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
+ border-radius: 100px;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+ opacity: 1;
+}
+
+.carousel-body {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.carousel-content {
+ max-width: 400px;
+}
+
+.card {
+ border: none;
+}
+
+.card-grid {
+ display: grid;
+ grid-gap: 15px;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));;
+}
+
+.product-category-section {
+ .card:hover {
+ box-shadow: 0px 16px 45px 6px rgba(0, 0, 0, 0.08), 0px 8px 10px -10px rgba(0, 0, 0, 0.04);
+ }
+}
+
+.item-card-group-section {
+ .card {
+ height: 360px;
+ align-items: center;
+ justify-content: center;
+ }
+
+ // .card-body {
+ // text-align: center;
+ // }
+
+ // .featured-item {
+ // .card-body {
+ // text-align: left;
+ // }
+ // }
+
+ .card-img {
+ max-height: 210px;
+ object-fit: contain;
+ margin-top: 1.25rem;
+ }
+
+ .product-title {
+ font-size: 14px;
+ color: var(--gray-800);
+ font-weight: 500;
+ }
+
+ .product-description {
+ font-size: 12px;
+ color: var(--text-color);
+ margin: 20px 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 6;
+ -webkit-box-orient: vertical;
+ }
+
+ .product-category {
+ font-size: 13px;
+ color: var(--gray-600);
+ margin: var(--margin-sm) 0;
+ }
+
+ .product-price {
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: var(--margin-sm) 0;
+ }
+
+ .item-card {
+ padding: var(--padding-sm);
+ }
+}
+
+#page-all-products {
+ .page-header {
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--text-color);
+ }
+
+ .filters-section {
+ .title-section {
+ border-bottom: 1px solid var(--table-border-color);
+ }
+
+ .filter-title {
+ font-weight: 500;
+ }
+
+ .clear-filters {
+ font-size: 13px;
+ }
+
+ .filter-label {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--gray-700);
+ text-transform: uppercase;
+ }
+
+ .filter-block {
+ border-bottom: 1px solid var(--table-border-color);
+ }
+
+ .checkbox {
+ .label-area {
+ font-size: 13px;
+ color: var(--gray-800);
+ }
+ }
+ }
+}
+
+.product-page {
+ @include card($padding: var(--padding-md));
+ min-height: 70vh;
+
+ .product-title {
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--text-color);
+ }
+
+ .product-code {
+ color: var(--gray-600);
+ font-size: 13px;
+ }
+
+ .product-description {
+ font-size: 13px;
+ color: var(--gray-800);
+ }
+
+
+
+ .product-image {
+ border-color: var(--table-border-color) !important;
+ img {
+ min-height: 320px;
+ max-height: 30rem;
+ min-width: 320px;
+ }
+ }
+
+ .item-slideshow-image {
+ height: 4rem;
+ width: 4rem;
+ object-fit: contain;
+ padding: 0.5rem;
+ border: 1px solid var(--table-border-color);
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover, &.active {
+ border-color: $primary;
+ }
+ }
+
+ .item-cart {
+ .product-price {
+ font-size: 20px;
+ color: var(--text-color);
+ font-weight: 600;
+
+ .formatted-price {
+ color: var(--gray-600);
+ font-size: 14px;
+ }
+ }
+
+ .no-stock {
+ font-size: 14px;
+ }
+ }
+}
+
diff --git a/erpnext/public/scss/website.scss b/erpnext/public/scss/website.scss
index 24a1b37..56b717c 100644
--- a/erpnext/public/scss/website.scss
+++ b/erpnext/public/scss/website.scss
@@ -1,29 +1,10 @@
@import "frappe/public/scss/website/variables";
-.product-image img {
- min-height: 20rem;
- max-height: 30rem;
-}
-
.filter-options {
max-height: 300px;
overflow: auto;
}
-.item-slideshow-image {
- height: 3rem;
- width: 3rem;
- object-fit: contain;
- padding: 0.5rem;
- border: 1px solid $border-color;
- border-radius: 4px;
- cursor: pointer;
-
- &:hover, &.active {
- border-color: $primary;
- }
-}
-
.address-card {
cursor: pointer;
position: relative;
@@ -43,10 +24,10 @@
.check {
display: inline-flex;
- padding: 0.25rem;
- background: $primary;
- color: white;
- border-radius: 50%;
+ padding: 0.25rem;
+ background: $primary;
+ color: white;
+ border-radius: 50%;
font-size: 12px;
width: 24px;
height: 24px;
diff --git a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
index 3f0419e..ace23bf 100644
--- a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
+++ b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
@@ -46,11 +46,11 @@
{%- set primary_action_label = values['slide_' + index + '_primary_action_label'] -%}
{%- set align = values['slide_' + index + '_content_align'] -%}
{%- set theme = values['slide_' + index + '_theme'] -%}
-
+
{%- if image -%}
{{ slide(image, title, subtitle, primary_action, primary_action_label, index, align, theme) }}
{%- endif -%}
-
+
{%- endfor -%}
</div>
{%- if show_controls -%}
@@ -82,31 +82,4 @@
</script>
<style>
- .carousel-control {
- height: 42px;
- width: 42px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: white;
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
- border-radius: 100px;
- }
-
- .carousel-control-prev,
- .carousel-control-next {
- opacity: 1;
- }
-
- .carousel-body {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
-
- .carousel-content {
- max-width: 400px;
- }
</style>
\ No newline at end of file
diff --git a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html
index e69de29..d39d1b7 100644
--- a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html
+++ b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html
@@ -0,0 +1,38 @@
+{% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
+
+<div class="section-with-cards item-card-group-section">
+ <div class="item-group-header d-flex justify-content-between">
+ <div class="title-section">
+ {%- if title -%}
+ <h2 class="section-title">{{ title }}</h2>
+ {%- endif -%}
+ {%- if subtitle -%}
+ <p class="section-description">{{ subtitle }}</p>
+ {%- endif -%}
+ </div>
+ <div class="primary-action-section">
+ {%- if primary_action -%}
+ <a href="{{ action }}" class="btn btn-primary pull-right">
+ {{ primary_action_label }}
+ </a>
+ {%- endif -%}
+ </div>
+ </div>
+
+ <div class="row">
+ {%- for index in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] -%}
+ {%- set item = values['card_' + index + '_item'] -%}
+ {%- if item -%}
+ {%- set item = frappe.get_doc("Item", item) -%}
+ {{ item_card(
+ item.item_name, item.image, item.route, item.description,
+ item.standard_rate, item.item_group, values['card_' + index + '_featured'],
+ True, "Center"
+ ) }}
+ {%- endif -%}
+ {%- endfor -%}
+ </div>
+</div>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json
index f1a70a9..ad087b0 100644
--- a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json
+++ b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json
@@ -17,6 +17,21 @@
"reqd": 0
},
{
+ "__unsaved": 1,
+ "fieldname": "primary_action_label",
+ "fieldtype": "Data",
+ "label": "Primary Action Label",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "primary_action",
+ "fieldtype": "Data",
+ "label": "Primary Action",
+ "reqd": 0
+ },
+ {
"fieldname": "card_1",
"fieldtype": "Section Break",
"label": "Card 1",
@@ -36,264 +51,210 @@
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_2",
"fieldtype": "Section Break",
"label": "Card 2",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_2_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_2_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_3",
"fieldtype": "Section Break",
"label": "Card 3",
+ "options": "",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_3_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_3_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_4",
"fieldtype": "Section Break",
"label": "Card 4",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_4_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_4_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_5",
"fieldtype": "Section Break",
"label": "Card 5",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_5_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_5_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_6",
"fieldtype": "Section Break",
"label": "Card 6",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_6_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_6_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_7",
"fieldtype": "Section Break",
"label": "Card 7",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_7_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_7_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_8",
"fieldtype": "Section Break",
"label": "Card 8",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_8_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_8_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_9",
"fieldtype": "Section Break",
"label": "Card 9",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_9_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_9_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_10",
"fieldtype": "Section Break",
"label": "Card 10",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_10_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_10_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_11",
"fieldtype": "Section Break",
"label": "Card 11",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_11_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_11_featured",
"fieldtype": "Check",
"label": "Featured",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_12",
"fieldtype": "Section Break",
"label": "Card 12",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_12_item",
"fieldtype": "Link",
"label": "Item",
+ "options": "Item",
"reqd": 0
},
{
- "__islocal": 1,
- "__unsaved": 1,
"fieldname": "card_12_featured",
"fieldtype": "Check",
"label": "Featured",
@@ -301,7 +262,7 @@
}
],
"idx": 0,
- "modified": "2020-11-17 16:37:46.325181",
+ "modified": "2020-11-19 18:48:52.633045",
"modified_by": "Administrator",
"module": "Shopping Cart",
"name": "Item Card Group",
diff --git a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
index 88ba7fd..06b76af 100644
--- a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
+++ b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
@@ -15,7 +15,7 @@
</div>
{%- endmacro -%}
-<div class="section-with-cards">
+<div class="section-with-cards product-category-section">
{%- if title -%}
<h2 class="section-title">{{ title }}</h2>
{%- endif -%}
@@ -37,17 +37,4 @@
</div>
<style>
- .card-grid {
- display: grid;
- grid-gap: 15px;
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));;
- }
-
- .card {
- border: none;
- }
-
- .card:hover {
- box-shadow: 0px 16px 45px 6px rgba(0, 0, 0, 0.08), 0px 8px 10px -10px rgba(0, 0, 0, 0.04);
- }
</style>
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'>
diff --git a/erpnext/www/all-products/index.html b/erpnext/www/all-products/index.html
index 0126b59..1d194ee 100644
--- a/erpnext/www/all-products/index.html
+++ b/erpnext/www/all-products/index.html
@@ -1,12 +1,11 @@
{% extends "templates/web.html" %}
-
{% block title %}{{ _('Products') }}{% endblock %}
{% block header %}
-<h1>{{ _('Products') }}</h1>
+<div class="mb-6">{{ _('Products') }}</div>
{% endblock header %}
{% block page_content %}
-<div class="row">
+<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')}}"
@@ -31,27 +30,34 @@
</div>
<div class="row">
- <div class="col-12 order-2 col-md-8 order-md-1 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 class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
+ <div class="row">
+ {% 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>
- <div class="col-12 order-1 col-md-4 order-md-2">
+ <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 %}
- <a class="mb-3 d-inline-block" href="/all-products">{{ _('Clear filters') }}</a>
+
+
{% endif %}
- <div class="collapse d-md-block" id="product-filters">
+ <div class="collapse d-md-block mr-4 filters-section" id="product-filters">
+ <div class="d-flex justify-content-between align-items-center mb-5 title-section">
+ <div class="mb-4 filters-title" > {{ _('Filters') }} </div>
+ <a class="mb-4 clear-filters" href="/all-products">{{ _('Clear All') }}</a>
+ </div>
{% for field_filter in field_filters %}
{%- set item_field = field_filter[0] %}
{%- set values = field_filter[1] %}
- <div class="mb-4">
- <h6>{{ item_field.label }}</h6>
+ <div class="mb-4 filter-block pb-5">
+ <div class="filter-label mb-3">{{ item_field.label }}</div>
{% if values | len > 20 %}
<!-- show inline filter if values more than 20 -->
@@ -61,15 +67,15 @@
{% if values %}
<div class="filter-options">
{% for value in values %}
- <div class="custom-control custom-checkbox" data-value="{{ value }}">
- <input type="checkbox"
- class="product-filter field-filter custom-control-input"
- id="{{value}}"
- data-filter-name="{{ item_field.fieldname }}"
- data-filter-value="{{ value }}"
- >
- <label class="custom-control-label" for="{{value}}">
- {{ value }}
+ <div class="checkbox" data-value="{{ value }}">
+ <label for="{{value}}">
+ <input type="checkbox"
+ class="product-filter field-filter"
+ id="{{value}}"
+ data-filter-name="{{ item_field.fieldname }}"
+ data-filter-value="{{ value }}"
+ >
+ <span class="label-area">{{ value }}</span>
</label>
</div>
{% endfor %}
@@ -81,9 +87,8 @@
{% endfor %}
{% for attribute in attribute_filters %}
- <div class="mb-4">
- <h6>{{ attribute.name }}</h6>
-
+ <div class="mb-4 filter-block pb-5">
+ <div class="filter-label mb-3">{{ attribute.name}}</div>
{% if values | len > 20 %}
<!-- show inline filter if values more than 20 -->
<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
@@ -92,16 +97,15 @@
{% if attribute.item_attribute_values %}
<div class="filter-options">
{% for attr_value in attribute.item_attribute_values %}
- <div class="custom-control custom-checkbox" data-value="{{ value }}">
- <input type="checkbox"
- class="product-filter attribute-filter custom-control-input"
- id="{{attr_value.name}}"
- data-attribute-name="{{ attribute.name }}"
- data-attribute-value="{{ attr_value.attribute_value }}"
- {% if attr_value.checked %} checked {% endif %}
- >
- <label class="custom-control-label" for="{{attr_value.name}}">
- {{ attr_value.attribute_value }}
+ <div class="checkbox">
+ <label data-value="{{ value }}">
+ <input type="checkbox"
+ class="product-filter attribute-filter"
+ id="{{attr_value.name}}"
+ data-attribute-name="{{ attribute.name }}"
+ data-attribute-value="{{ attr_value.attribute_value }}"
+ {% if attr_value.checked %} checked {% endif %}>
+ <span class="label-area">{{ attr_value.attribute_value }}</span>
</label>
</div>
{% endfor %}
@@ -158,6 +162,4 @@
});
</script>
-{% endblock %}
-
-
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/all-products/item_row.html b/erpnext/www/all-products/item_row.html
index 9e62826..b5280ea 100644
--- a/erpnext/www/all-products/item_row.html
+++ b/erpnext/www/all-products/item_row.html
@@ -1,24 +1,7 @@
-<div class="card mb-3">
- <div class="row no-gutters">
- <div class="col-md-3">
- <div class="card-body">
- <a class="no-underline" href="/{{ item.route }}">
- <img class="website-image" src="{{ item.website_image or item.image or 'no-image.jpg' }}" alt="{{ item.item_name }}">
- </a>
- </div>
- </div>
- <div class="col-md-9">
- <div class="card-body">
- <h5 class="card-title">
- <a class="text-dark" href="/{{ item.route }}">
- {{ item.item_name or item.name }}
- </a>
- </h5>
- <p class="card-text">
- {{ item.website_description or item.description or '<i class="text-muted">No description</i>' }}
- </p>
- <a href="/{{ item.route }}" class="btn btn-sm btn-light">{{ _('More details') }}</a>
- </div>
- </div>
- </div>
-</div>
+{% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
+
+{{ item_card(
+ item.item_name or item.name, item.website_image or item.image, item.route, item.website_description or item.description,
+ item.standard_rate, item.item_group
+) }}
+