Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: store home page and product page

Browse Source
This commit is contained in:
prssanna 2020-12-24 11:40:33 +05:30
parent 7a38f41350
commit eb0e596d43
15 changed files with 459 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
erpnext/public/build.json
View File

@ -13,7 +13,8 @@
"public/js/shopping_cart.js" "public/js/shopping_cart.js"
], ],
"css/erpnext-web.css": [ "css/erpnext-web.css": [
"public/scss/website.scss" "public/scss/website.scss",
"public/scss/shopping_cart.scss"
], ],
"js/marketplace.min.js": [ "js/marketplace.min.js": [
"public/js/hub/marketplace.js" "public/js/hub/marketplace.js"

206
erpnext/public/scss/shopping_cart.scss Normal file
View File

@ -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;
}
}
}

27
erpnext/public/scss/website.scss
View File

@ -1,29 +1,10 @@
@import "frappe/public/scss/website/variables"; @import "frappe/public/scss/website/variables";
.product-image img {
min-height: 20rem;
max-height: 30rem;
}
.filter-options { .filter-options {
max-height: 300px; max-height: 300px;
overflow: auto; 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 { .address-card {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -43,10 +24,10 @@
.check { .check {
display: inline-flex; display: inline-flex;
padding: 0.25rem; padding: 0.25rem;
background: $primary; background: $primary;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
font-size: 12px; font-size: 12px;
width: 24px; width: 24px;
height: 24px; height: 24px;

31
erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
View File

@ -46,11 +46,11 @@
{%- set primary_action_label = values['slide_' + index + '_primary_action_label'] -%} {%- set primary_action_label = values['slide_' + index + '_primary_action_label'] -%}
{%- set align = values['slide_' + index + '_content_align'] -%} {%- set align = values['slide_' + index + '_content_align'] -%}
{%- set theme = values['slide_' + index + '_theme'] -%} {%- set theme = values['slide_' + index + '_theme'] -%}
{%- if image -%} {%- if image -%}
{{ slide(image, title, subtitle, primary_action, primary_action_label, index, align, theme) }} {{ slide(image, title, subtitle, primary_action, primary_action_label, index, align, theme) }}
{%- endif -%} {%- endif -%}
{%- endfor -%} {%- endfor -%}
</div> </div>
{%- if show_controls -%} {%- if show_controls -%}
@ -82,31 +82,4 @@
</script> </script>
<style> <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> </style>

38
erpnext/shopping_cart/web_template/item_card_group/item_card_group.html
View File

@ -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>

95
erpnext/shopping_cart/web_template/item_card_group/item_card_group.json
View File

@ -16,6 +16,21 @@
"label": "Subtitle", "label": "Subtitle",
"reqd": 0 "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", "fieldname": "card_1",
"fieldtype": "Section Break", "fieldtype": "Section Break",
@ -36,264 +51,210 @@
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_2", "fieldname": "card_2",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 2", "label": "Card 2",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_2_item", "fieldname": "card_2_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_2_featured", "fieldname": "card_2_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_3", "fieldname": "card_3",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 3", "label": "Card 3",
"options": "",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_3_item", "fieldname": "card_3_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_3_featured", "fieldname": "card_3_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_4", "fieldname": "card_4",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 4", "label": "Card 4",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_4_item", "fieldname": "card_4_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_4_featured", "fieldname": "card_4_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_5", "fieldname": "card_5",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 5", "label": "Card 5",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_5_item", "fieldname": "card_5_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_5_featured", "fieldname": "card_5_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_6", "fieldname": "card_6",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 6", "label": "Card 6",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_6_item", "fieldname": "card_6_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_6_featured", "fieldname": "card_6_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_7", "fieldname": "card_7",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 7", "label": "Card 7",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_7_item", "fieldname": "card_7_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_7_featured", "fieldname": "card_7_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_8", "fieldname": "card_8",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 8", "label": "Card 8",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_8_item", "fieldname": "card_8_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_8_featured", "fieldname": "card_8_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_9", "fieldname": "card_9",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 9", "label": "Card 9",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_9_item", "fieldname": "card_9_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_9_featured", "fieldname": "card_9_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_10", "fieldname": "card_10",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 10", "label": "Card 10",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_10_item", "fieldname": "card_10_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_10_featured", "fieldname": "card_10_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_11", "fieldname": "card_11",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 11", "label": "Card 11",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_11_item", "fieldname": "card_11_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_11_featured", "fieldname": "card_11_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_12", "fieldname": "card_12",
"fieldtype": "Section Break", "fieldtype": "Section Break",
"label": "Card 12", "label": "Card 12",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_12_item", "fieldname": "card_12_item",
"fieldtype": "Link", "fieldtype": "Link",
"label": "Item", "label": "Item",
"options": "Item",
"reqd": 0 "reqd": 0
}, },
{ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "card_12_featured", "fieldname": "card_12_featured",
"fieldtype": "Check", "fieldtype": "Check",
"label": "Featured", "label": "Featured",
@ -301,7 +262,7 @@
} }
], ],
"idx": 0, "idx": 0,
"modified": "2020-11-17 16:37:46.325181", "modified": "2020-11-19 18:48:52.633045",
"modified_by": "Administrator", "modified_by": "Administrator",
"module": "Shopping Cart", "module": "Shopping Cart",
"name": "Item Card Group", "name": "Item Card Group",

15
erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
View File

@ -15,7 +15,7 @@
</div> </div>
{%- endmacro -%} {%- endmacro -%}
<div class="section-with-cards"> <div class="section-with-cards product-category-section">
{%- if title -%} {%- if title -%}
<h2 class="section-title">{{ title }}</h2> <h2 class="section-title">{{ title }}</h2>
{%- endif -%} {%- endif -%}
@ -37,17 +37,4 @@
</div> </div>
<style> <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> </style>

22
erpnext/templates/generators/item/item.html
View File

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

10
erpnext/templates/generators/item/item_add_to_cart.html
View File

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

23
erpnext/templates/generators/item/item_details.html
View File

@ -1,14 +1,21 @@
<div class="col-md-8"> <div class="col-md-8">
<!-- title --> <!-- title -->
<h1 itemprop="name"> <div class="product-title" itemprop="name">
{{ item_name }} {{ item_name }}
</h1> </div>
<p class="text-muted"> <p class="product-code">
<span>{{ _("Item Code") }}:</span> <span>{{ _("Item Code") }}:</span>
<span itemprop="productID">{{ doc.name }}</span> <span itemprop="productID">{{ doc.name }}</span>
</p> </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 --> <!-- description -->
<div itemprop="description"> <div class="product-description" itemprop="description">
{% if frappe.utils.strip_html(doc.web_long_description or '') %} {% if frappe.utils.strip_html(doc.web_long_description or '') %}
{{ doc.web_long_description | safe }} {{ doc.web_long_description | safe }}
{% elif frappe.utils.strip_html(doc.description or '') %} {% elif frappe.utils.strip_html(doc.description or '') %}
@ -17,12 +24,4 @@
{{ _("No description given") }} {{ _("No description given") }}
{% endif %} {% endif %}
</div> </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> </div>

72
erpnext/templates/generators/item/item_image.html
View File

@ -1,42 +1,42 @@
<div class="col-md-4 h-100"> <div class="col-md-4 h-100 d-flex">
{% if slides %} {% if slides %}
{{ product_image(slides[0].image, 'product-image') }} <div class="item-slideshow d-flex flex-column mr-3">
<div class="item-slideshow"> {% for item in slides %}
{% for item in slides %} <img class="item-slideshow-image mb-2 {% if loop.first %}active{% endif %}"
<img class="item-slideshow-image mt-2 {% if loop.first %}active{% endif %}" src="{{ item.image }}" alt="{{ item.heading }}">
src="{{ item.image }}" alt="{{ item.heading }}"> {% endfor %}
{% endfor %} </div>
</div> {{ product_image(slides[0].image, 'product-image') }}
<!-- Simple image slideshow --> <!-- Simple image slideshow -->
<script> <script>
frappe.ready(() => { frappe.ready(() => {
$('.page_content').on('click', '.item-slideshow-image', (e) => { $('.page_content').on('click', '.item-slideshow-image', (e) => {
const $img = $(e.currentTarget); const $img = $(e.currentTarget);
const link = $img.prop('src'); const link = $img.prop('src');
const $product_image = $('.product-image'); const $product_image = $('.product-image');
$product_image.find('a').prop('href', link); $product_image.find('a').prop('href', link);
$product_image.find('img').prop('src', link); $product_image.find('img').prop('src', link);
$('.item-slideshow-image').removeClass('active'); $('.item-slideshow-image').removeClass('active');
$img.addClass('active'); $img.addClass('active');
}); });
}) })
</script> </script>
{% else %} {% else %}
{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }} {{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
{% endif %} {% endif %}
<!-- Simple image preview --> <!-- Simple image preview -->
<div class="image-zoom-view" style="display: none;"> <div class="image-zoom-view" style="display: none;">
<button type="button" class="close" aria-label="Close"> <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" <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"> 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="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
<style> <style>
.website-image { .website-image {

69
erpnext/templates/includes/macros.html
View File

@ -8,9 +8,9 @@
{% endmacro %} {% endmacro %}
{% macro product_image(website_image, css_class="", alt="") %} {% 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 }}"> <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 %} {% endmacro %}
{% macro media_image(website_image, name, css_class="") %} {% macro media_image(website_image, name, css_class="") %}
@ -18,13 +18,13 @@
{% if not website_image -%} {% if not website_image -%}
<div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div> <div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div>
{%- endif %} {%- endif %}
{% if website_image -%} {% if website_image -%}
<a href="{{ frappe.utils.quoted(website_image) }}"> <a href="{{ frappe.utils.quoted(website_image) }}">
<img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}" <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%;"> class="img-responsive img-thumbnail sidebar-image" style="min-height:100%; min-width:100%;">
</a> </a>
{%- endif %} {%- endif %}
</div> </div>
{% endmacro %} {% endmacro %}
{% macro render_homepage_section(section) %} {% macro render_homepage_section(section) %}
@ -57,4 +57,61 @@
</section> </section>
{% endif %} {% 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 -%}

2
erpnext/templates/includes/products_as_list.html
View File

@ -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 }}"> <a class="product-link product-list-link" href="{{ route|abs_url }}">
<div class='row'> <div class='row'>

84
erpnext/www/all-products/index.html
View File

@ -1,12 +1,11 @@
{% extends "templates/web.html" %} {% extends "templates/web.html" %}
{% block title %}{{ _('Products') }}{% endblock %} {% block title %}{{ _('Products') }}{% endblock %}
{% block header %} {% block header %}
<h1>{{ _('Products') }}</h1> <div class="mb-6">{{ _('Products') }}</div>
{% endblock header %} {% endblock header %}
{% block page_content %} {% block page_content %}
<div class="row"> <div class="row" style="display: none;">
<div class="col-8"> <div class="col-8">
<div class="input-group input-group-sm mb-3"> <div class="input-group input-group-sm mb-3">
<input type="search" class="form-control" placeholder="{{_('Search')}}" <input type="search" class="form-control" placeholder="{{_('Search')}}"
@ -31,27 +30,34 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12 order-2 col-md-8 order-md-1 products-list"> <div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
{% if items %} <div class="row">
{% for item in items %} {% if items %}
{% include "erpnext/www/all-products/item_row.html" %} {% for item in items %}
{% endfor %} {% include "erpnext/www/all-products/item_row.html" %}
{% else %} {% endfor %}
{% include "erpnext/www/all-products/not_found.html" %} {% else %}
{% endif %} {% include "erpnext/www/all-products/not_found.html" %}
{% endif %}
</div>
</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 %} {% 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 %} {% 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 %} {% for field_filter in field_filters %}
{%- set item_field = field_filter[0] %} {%- set item_field = field_filter[0] %}
{%- set values = field_filter[1] %} {%- set values = field_filter[1] %}
<div class="mb-4"> <div class="mb-4 filter-block pb-5">
<h6>{{ item_field.label }}</h6> <div class="filter-label mb-3">{{ item_field.label }}</div>
{% if values | len > 20 %} {% if values | len > 20 %}
<!-- show inline filter if values more than 20 --> <!-- show inline filter if values more than 20 -->
@ -61,15 +67,15 @@
{% if values %} {% if values %}
<div class="filter-options"> <div class="filter-options">
{% for value in values %} {% for value in values %}
<div class="custom-control custom-checkbox" data-value="{{ value }}"> <div class="checkbox" data-value="{{ value }}">
<input type="checkbox" <label for="{{value}}">
class="product-filter field-filter custom-control-input" <input type="checkbox"
id="{{value}}" class="product-filter field-filter"
data-filter-name="{{ item_field.fieldname }}" id="{{value}}"
data-filter-value="{{ value }}" data-filter-name="{{ item_field.fieldname }}"
> data-filter-value="{{ value }}"
<label class="custom-control-label" for="{{value}}"> >
{{ value }} <span class="label-area">{{ value }}</span>
</label> </label>
</div> </div>
{% endfor %} {% endfor %}
@ -81,9 +87,8 @@
{% endfor %} {% endfor %}
{% for attribute in attribute_filters %} {% for attribute in attribute_filters %}
<div class="mb-4"> <div class="mb-4 filter-block pb-5">
<h6>{{ attribute.name }}</h6> <div class="filter-label mb-3">{{ attribute.name}}</div>
{% if values | len > 20 %} {% if values | len > 20 %}
<!-- show inline filter if values more than 20 --> <!-- show inline filter if values more than 20 -->
<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/> <input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
@ -92,16 +97,15 @@
{% if attribute.item_attribute_values %} {% if attribute.item_attribute_values %}
<div class="filter-options"> <div class="filter-options">
{% for attr_value in attribute.item_attribute_values %} {% for attr_value in attribute.item_attribute_values %}
<div class="custom-control custom-checkbox" data-value="{{ value }}"> <div class="checkbox">
<input type="checkbox" <label data-value="{{ value }}">
class="product-filter attribute-filter custom-control-input" <input type="checkbox"
id="{{attr_value.name}}" class="product-filter attribute-filter"
data-attribute-name="{{ attribute.name }}" id="{{attr_value.name}}"
data-attribute-value="{{ attr_value.attribute_value }}" data-attribute-name="{{ attribute.name }}"
{% if attr_value.checked %} checked {% endif %} data-attribute-value="{{ attr_value.attribute_value }}"
> {% if attr_value.checked %} checked {% endif %}>
<label class="custom-control-label" for="{{attr_value.name}}"> <span class="label-area">{{ attr_value.attribute_value }}</span>
{{ attr_value.attribute_value }}
</label> </label>
</div> </div>
{% endfor %} {% endfor %}
@ -158,6 +162,4 @@
}); });
</script> </script>
{% endblock %} {% endblock %}

31
erpnext/www/all-products/item_row.html
View File

@ -1,24 +1,7 @@
<div class="card mb-3"> {% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
<div class="row no-gutters">
<div class="col-md-3"> {{ item_card(
<div class="card-body"> item.item_name or item.name, item.website_image or item.image, item.route, item.website_description or item.description,
<a class="no-underline" href="/{{ item.route }}"> item.standard_rate, item.item_group
<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>