- ${ __("Recent") }
+ setupRecentsContainer() {
+ let $recents_section = this.search_dropdown.append(`
+
`).find(".recent-searches");
this.recents_container = $recents_section.append(`
-
+
- `).find("#recent-chips");
+ `).find("#recents");
}
getRecentSearches() {
@@ -144,12 +128,12 @@ erpnext.ProductSearch = class {
attachEventListenersToChips() {
let me = this;
- const chips = $(".recent-chip");
+ const chips = $(".recent-search");
window.chips = chips;
for (let chip of chips) {
chip.addEventListener("click", () => {
- me.searchBox[0].value = chip.innerText;
+ me.searchBox[0].value = chip.innerText.trim();
// Start search with `recent query`
me.searchBox.trigger("input");
@@ -179,15 +163,22 @@ erpnext.ProductSearch = class {
let recents = this.getRecentSearches();
if (!recents.length) {
+ this.recents_container.html(`
No searches yet.`);
return;
}
let html = "";
recents.forEach((key) => {
html += `
-
`;
});
diff --git a/erpnext/e_commerce/product_view.js b/erpnext/e_commerce/product_view.js
index a70be44de44..9f540001c79 100644
--- a/erpnext/e_commerce/product_view.js
+++ b/erpnext/e_commerce/product_view.js
@@ -12,11 +12,25 @@ erpnext.ProductView = class {
make(from_filters=false) {
this.products_section.empty();
- this.prepare_view_toggler();
+ this.prepare_toolbar();
this.get_item_filter_data(from_filters);
}
+ prepare_toolbar() {
+ this.products_section.append(`
+
+
+ `);
+ this.prepare_search();
+ this.prepare_view_toggler();
+
+ frappe.require('/assets/js/e-commerce.min.js', function() {
+ new erpnext.ProductSearch();
+ });
+ }
+
prepare_view_toggler() {
+
if (!$("#list").length || !$("#image-view").length) {
this.render_view_toggler();
this.bind_view_toggler_actions();
@@ -173,19 +187,45 @@ erpnext.ProductView = class {
}
}
+ prepare_search() {
+ $(".toolbar").append(`
+
+
+
+ `);
+ }
+
render_view_toggler() {
+ $(".toolbar").append(`
`);
+
["btn-list-view", "btn-grid-view"].forEach(view => {
let icon = view === "btn-list-view" ? "list" : "image-view";
- this.products_section.append(`
-
-
-
`);
+ $(".toggle-container").append(`
+
+
+
+ `);
});
}
@@ -448,9 +488,6 @@ erpnext.ProductView = class {
render_item_sub_categories(categories) {
if (categories && categories.length) {
let sub_group_html = `
-
-
${ __('Sub Categories') }
-
`;
diff --git a/erpnext/public/js/shopping_cart.js b/erpnext/public/js/shopping_cart.js
index 31d34bcc644..be0c21f0ce1 100644
--- a/erpnext/public/js/shopping_cart.js
+++ b/erpnext/public/js/shopping_cart.js
@@ -166,19 +166,6 @@ $.extend(shopping_cart, {
});
},
- animate_add_to_cart(button) {
- // Create 'added to cart' animation
- let btn_id = "#" + button[0].id;
- this.toggle_button_class(button, 'not-added', 'added-to-cart');
- $(btn_id).text('Added to Cart');
-
- // undo
- setTimeout(() => {
- this.toggle_button_class(button, 'added-to-cart', 'not-added');
- $(btn_id).text('Add to Cart');
- }, 2000);
- },
-
toggle_button_class(button, remove, add) {
button.removeClass(remove);
button.addClass(add);
@@ -189,7 +176,10 @@ $.extend(shopping_cart, {
const $btn = $(e.currentTarget);
$btn.prop('disabled', true);
- this.animate_add_to_cart($btn);
+ $btn.addClass('hidden');
+ $btn.parent().find('.go-to-cart').removeClass('hidden');
+ $btn.parent().find('.go-to-cart-grid').removeClass('hidden');
+ $btn.parent().find('.cart-indicator').removeClass('hidden');
const item_code = $btn.data('item-code');
e_commerce.shopping_cart.update_cart({
diff --git a/erpnext/public/js/wishlist.js b/erpnext/public/js/wishlist.js
index 984572383af..4333587dc6e 100644
--- a/erpnext/public/js/wishlist.js
+++ b/erpnext/public/js/wishlist.js
@@ -79,7 +79,7 @@ $.extend(wishlist, {
bind_wishlist_action() {
// 'wish'('like') or 'unwish' item in product listing
- $('.page_content').on('click', '.like-action', (e) => {
+ $('.page_content').on('click', '.like-action, .like-action-list', (e) => {
const $btn = $(e.currentTarget);
const $wish_icon = $btn.find('.wish-icon');
let me = this;
@@ -101,6 +101,7 @@ $.extend(wishlist, {
if ($wish_icon.hasClass('wished')) {
// un-wish item
$btn.removeClass("like-animate");
+ $btn.addClass("like-action-wished");
this.toggle_button_class($wish_icon, 'wished', 'not-wished');
let args = { item_code: $btn.data('item-code') };
@@ -111,6 +112,7 @@ $.extend(wishlist, {
} else {
// wish item
$btn.addClass("like-animate");
+ $btn.addClass("like-action-wished");
this.toggle_button_class($wish_icon, 'not-wished', 'wished');
let args = {
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index c57b62d6f2a..f217d672a55 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -1,5 +1,9 @@
@import "frappe/public/scss/common/mixins";
+:root {
+ --green-info: #38A160;
+}
+
body.product-page {
background: var(--gray-50);
}
@@ -70,6 +74,7 @@ body.product-page {
.item-card-group-section {
.card {
+ height: 100%;
align-items: center;
justify-content: center;
@@ -79,6 +84,19 @@ body.product-page {
}
}
+ .card:hover, .card:focus-within {
+ .btn-add-to-cart-list {
+ visibility: visible;
+ }
+ .like-action {
+ visibility: visible;
+ }
+ .btn-explore-variants {
+ visibility: visible;
+ }
+ }
+
+
.card-img-container {
height: 210px;
width: 100%;
@@ -92,12 +110,10 @@ body.product-page {
.no-image {
@include flex(flex, center, center, null);
- height: 200px;
- margin: 0 auto;
- margin-top: var(--margin-xl);
+ height: 220px;
background: var(--gray-100);
- width: 80%;
- border-radius: var(--border-radius);
+ width: 100%;
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
font-size: 2rem;
color: var(--gray-500);
}
@@ -113,6 +129,11 @@ body.product-page {
margin-bottom: 15px;
}
+ .card-body-flex {
+ display: flex;
+ flex-direction: column;
+ }
+
.product-title {
font-size: 14px;
color: var(--gray-800);
@@ -143,6 +164,24 @@ body.product-page {
font-weight: 600;
color: var(--text-color);
margin: var(--margin-sm) 0;
+
+ .striked-price {
+ font-weight: 500;
+ font-size: 15px;
+ color: var(--gray-500);
+ }
+ }
+
+ .product-info-green {
+ color: var(--green-info);
+ font-weight: 600;
+ }
+
+ .out-of-stock {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ color: #F47A7A;
}
.item-card {
@@ -156,6 +195,28 @@ body.product-page {
}
}
+.list-row {
+ padding-bottom: 1rem;
+ padding-top: 1.5rem !important;
+ border-radius: 8px;
+ border-bottom: 1px solid var(--gray-50);
+
+ &:hover, &:focus-within {
+ box-shadow: 0px 16px 60px rgba(0, 0, 0, 0.08), 0px 8px 30px -20px rgba(0, 0, 0, 0.04);
+ transition: box-shadow 400ms;
+
+ .btn-add-to-cart-list {
+ visibility: visible;
+ }
+ .like-action-list {
+ visibility: visible;
+ }
+ .btn-explore-variants {
+ visibility: visible;
+ }
+ }
+}
+
[data-doctype="Item Group"],
#page-all-products {
.page-header {
@@ -210,6 +271,7 @@ body.product-page {
}
.list-image {
+ border: none !important;
overflow: hidden;
max-height: 200px;
background-color: white;
@@ -331,7 +393,7 @@ body.product-page {
.product-code {
color: var(--text-muted);
- font-size: 13px;
+ font-size: 14px;
}
.item-configurator-dialog {
@@ -381,7 +443,7 @@ body.product-page {
}
.sub-category-container {
- padding-bottom: 1rem;
+ padding-bottom: .5rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--table-border-color);
@@ -658,14 +720,68 @@ body.product-page {
}
}
-.card-indicator {
- margin-left: 6px;
+.cart-indicator {
+ position: absolute;
+ text-align: center;
+ width: 22px;
+ height: 22px;
+ left: calc(100% - 40px);
+ top: 22px;
+
+ border-radius: 66px;
+ box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
+ background: white;
+ color: var(--primary-color);
+ font-size: 14px;
}
+
.like-action {
+ visibility: hidden;
text-align: center;
- margin-top: -2px;
- margin-left: 12px;
+ position: absolute;
+ cursor: pointer;
+ width: 28px;
+ height: 28px;
+ left: 20px;
+ top: 20px;
+
+ /* White */
+ background: white;
+ box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
+ border-radius: 66px;
+
+ &.like-action-wished {
+ visibility: visible !important;
+ }
+
+ @media (max-width: 992px) {
+ visibility: visible !important;
+ }
+}
+
+.like-action-list {
+ visibility: hidden;
+ text-align: center;
+ position: absolute;
+ cursor: pointer;
+ width: 28px;
+ height: 28px;
+ left: 20px;
+ top: 0;
+
+ /* White */
+ background: white;
+ box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
+ border-radius: 66px;
+
+ &.like-action-wished {
+ visibility: visible !important;
+ }
+
+ @media (max-width: 992px) {
+ visibility: visible !important;
+ }
}
.like-animate {
@@ -674,21 +790,19 @@ body.product-page {
@keyframes expand {
30% {
- transform: scale(1.6);
+ transform: scale(1.3);
}
50% {
transform: scale(0.8);
}
70% {
- transform: scale(1.3);
+ transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
-@keyframes heart { 0%, 17.5% { font-size: 0; } }
-
.not-wished {
cursor: pointer;
stroke: #F47A7A !important;
@@ -715,52 +829,52 @@ body.product-page {
}
.btn-explore-variants {
+ visibility: hidden;
box-shadow: none;
margin: var(--margin-sm) 0;
width: 90px;
max-height: 50px; // to avoid resizing on window resize
flex: none;
transition: 0.3s ease;
- color: var(--orange-500);
- background-color: white;
+
+ color: white;
+ background-color: var(--orange-500);
border: 1px solid var(--orange-500);
font-size: 13px;
&:hover {
color: white;
- background-color: var(--orange-500);
}
}
.btn-add-to-cart-list{
+ visibility: hidden;
box-shadow: none;
margin: var(--margin-sm) 0;
+ margin-top: auto !important;
max-height: 50px; // to avoid resizing on window resize
flex: none;
transition: 0.3s ease;
-}
-.not-added {
- color: var(--primary-color);
- background-color: transparent;
- border: 1px solid var(--blue-500);
- font-size: 13px;
-
- &:hover {
- background-color: var(--primary-color);
- color: white;
- }
-}
-
-.added-to-cart {
- background-color: var(--dark-green-400);
- color: white;
- border: 2px solid var(--green-300);
font-size: 13px;
&:hover {
color: white;
}
+
+ @media (max-width: 992px) {
+ visibility: visible !important;
+ }
+}
+
+.go-to-cart-grid {
+ max-height: 30px;
+ margin-top: 1rem !important;
+}
+
+.go-to-cart {
+ max-height: 30px;
+ float: right;
}
.wishlist-cart-not-added {
@@ -872,6 +986,41 @@ body.product-page {
font-size: 14px;
}
+#search-results-container {
+ padding: .25rem 1rem;
+
+ .category-chip {
+ background-color: var(--gray-100);
+ border: none !important;
+ box-shadow: none;
+ }
+
+ .recent-search {
+ padding: .5rem .5rem;
+ border-radius: var(--border-radius);
+
+ &:hover {
+ background-color: var(--gray-100);
+ }
+ }
+}
+
+#search-box {
+ padding-left: 2.5rem;
+}
+
+.search-icon {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 2.5rem;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 1px;
+}
+
#toggle-view {
float: right;
}
diff --git a/erpnext/setup/doctype/item_group/item_group.py b/erpnext/setup/doctype/item_group/item_group.py
index d4f40676fc3..e7d10c7f23d 100644
--- a/erpnext/setup/doctype/item_group/item_group.py
+++ b/erpnext/setup/doctype/item_group/item_group.py
@@ -102,6 +102,7 @@ class ItemGroup(NestedSet, WebsiteGenerator):
context.no_breadcrumbs = False
context.title = self.website_title or self.name
context.name = self.name
+ context.item_group_name = self.item_group_name
return context
diff --git a/erpnext/templates/generators/item_group.html b/erpnext/templates/generators/item_group.html
index e37cb8d0e7b..0c5ae75b123 100644
--- a/erpnext/templates/generators/item_group.html
+++ b/erpnext/templates/generators/item_group.html
@@ -2,18 +2,7 @@
{% extends "templates/web.html" %}
{% block header %}
-
+
{{ _(item_group_name) }}
{% endblock header %}
{% block script %}
diff --git a/erpnext/www/all-products/index.html b/erpnext/www/all-products/index.html
index b2609dc2a15..534b93f72c9 100644
--- a/erpnext/www/all-products/index.html
+++ b/erpnext/www/all-products/index.html
@@ -1,20 +1,9 @@
{% from "erpnext/templates/includes/macros.html" import attribute_filter_section, field_filter_section, discount_range_filters %}
{% extends "templates/web.html" %}
-{% block title %}{{ _('Products') }}{% endblock %}
+{% block title %}{{ _('All Products') }}{% endblock %}
{% block header %}
-
-
{{ _('Products') }}
-
-
-
-
-
+
{{ _('All Products') }}
{% endblock header %}
{% block page_content %}
diff --git a/erpnext/www/all-products/index.js b/erpnext/www/all-products/index.js
index db2dec046dd..68d60b26065 100644
--- a/erpnext/www/all-products/index.js
+++ b/erpnext/www/all-products/index.js
@@ -9,8 +9,6 @@ $(() => {
// Render Product Views, Filters & Search
frappe.require('/assets/js/e-commerce.min.js', function() {
- new erpnext.ProductSearch();
-
new erpnext.ProductView({
view_type: view_type,
products_section: $('#product-listing'),