fix: Discount Filters and Web templates

- Fixed discount filters (didn’t work after js render change)
- Fix Item Card Group template height and style
- Add placeholder to missing images in Product Category Cards template
- Code cleanup
This commit is contained in:
marination
2021-05-25 01:35:22 +05:30
parent 03b88bd7b8
commit b29c5d6e84
15 changed files with 215 additions and 204 deletions

View File

@@ -5,86 +5,18 @@ $(() => {
let is_item_group_page = $(".item-group-content").data("item-group");
this.item_group = is_item_group_page || null;
// Render Products and Discount Filters
let view_type = "List View";
// Render Product Views and setup Filters
frappe.require('assets/js/e-commerce.min.js', function() {
new erpnext.ProductView({
view_type: "List",
view_type: view_type,
products_section: $('#product-listing'),
item_group: me.item_group
});
});
this.bind_filters();
this.bind_card_actions();
this.bind_search();
this.restore_filters_state();
}
bind_filters() {
let me = this;
this.field_filters = {};
this.attribute_filters = {};
$('.product-filter').on('change', frappe.utils.debounce((e) => {
const $checkbox = $(e.target);
const is_checked = $checkbox.is(':checked');
if ($checkbox.is('.attribute-filter')) {
const {
attributeName: attribute_name,
attributeValue: attribute_value
} = $checkbox.data();
if (is_checked) {
this.attribute_filters[attribute_name] = this.attribute_filters[attribute_name] || [];
this.attribute_filters[attribute_name].push(attribute_value);
} else {
this.attribute_filters[attribute_name] = this.attribute_filters[attribute_name] || [];
this.attribute_filters[attribute_name] = this.attribute_filters[attribute_name].filter(v => v !== attribute_value);
}
if (this.attribute_filters[attribute_name].length === 0) {
delete this.attribute_filters[attribute_name];
}
} else if ($checkbox.is('.field-filter') || $checkbox.is('.discount-filter')) {
const {
filterName: filter_name,
filterValue: filter_value
} = $checkbox.data();
if ($checkbox.is('.discount-filter')) {
// clear previous discount filter to accomodate new
delete this.field_filters["discount"];
}
if (is_checked) {
this.field_filters[filter_name] = this.field_filters[filter_name] || [];
this.field_filters[filter_name].push(filter_value);
} else {
this.field_filters[filter_name] = this.field_filters[filter_name] || [];
this.field_filters[filter_name] = this.field_filters[filter_name].filter(v => v !== filter_value);
}
if (this.field_filters[filter_name].length === 0) {
delete this.field_filters[filter_name];
}
}
const query_string = get_query_string({
field_filters: JSON.stringify(if_key_exists(this.field_filters)),
attribute_filters: JSON.stringify(if_key_exists(this.attribute_filters)),
});
window.history.pushState('filters', '', `${location.pathname}?` + query_string);
$('.page_content input').prop('disabled', true);
frappe.require('assets/js/e-commerce.min.js', function() {
new erpnext.ProductView({
view_type: "List",
products_section: $('#product-listing'),
item_group: me.item_group
});
$('.page_content input').prop('disabled', false);
});
}, 1000));
}
bind_card_actions() {
@@ -92,70 +24,20 @@ $(() => {
e_commerce.wishlist.bind_wishlist_action();
}
bind_search() {
$('input[type=search]').on('keydown', (e) => {
if (e.keyCode === 13) {
// Enter
const value = e.target.value;
if (value) {
window.location.search = 'search=' + e.target.value;
} else {
window.location.search = '';
}
}
});
}
restore_filters_state() {
const filters = frappe.utils.get_query_params();
let {field_filters, attribute_filters} = filters;
if (field_filters) {
field_filters = JSON.parse(field_filters);
for (let fieldname in field_filters) {
const values = field_filters[fieldname];
const selector = values.map(value => {
return `input[data-filter-name="${fieldname}"][data-filter-value="${value}"]`;
}).join(',');
$(selector).prop('checked', true);
}
this.field_filters = field_filters;
}
if (attribute_filters) {
attribute_filters = JSON.parse(attribute_filters);
for (let attribute in attribute_filters) {
const values = attribute_filters[attribute];
const selector = values.map(value => {
return `input[data-attribute-name="${attribute}"][data-attribute-value="${value}"]`;
}).join(',');
$(selector).prop('checked', true);
}
this.attribute_filters = attribute_filters;
}
}
// bind_search() {
// $('input[type=search]').on('keydown', (e) => {
// if (e.keyCode === 13) {
// // Enter
// const value = e.target.value;
// if (value) {
// window.location.search = 'search=' + e.target.value;
// } else {
// window.location.search = '';
// }
// }
// });
// }
}
new ProductListing();
function get_query_string(object) {
const url = new URLSearchParams();
for (let key in object) {
const value = object[key];
if (value) {
url.append(key, value);
}
}
return url.toString();
}
function if_key_exists(obj) {
let exists = false;
for (let key in obj) {
if (obj.hasOwnProperty(key) && obj[key]) {
exists = true;
break;
}
}
return exists ? obj : undefined;
}
});

View File

@@ -11,18 +11,6 @@
width: 300px !important;
margin: 30px !important;
}
.placeholder-div {
height:80%;
width: -webkit-fill-available;
padding: 50px;
text-align: center;
background-color: #F9FAFA;
border-top-left-radius: calc(0.75rem - 1px);
border-top-right-radius: calc(0.75rem - 1px);
}
.placeholder {
font-size: 72px;
}
</style>
{% endblock %}

View File

@@ -4,7 +4,7 @@ from frappe import _
sitemap = 1
def get_context(context):
settings = frappe.get_doc("E Commerce Settings")
settings = frappe.get_cached_doc("E Commerce Settings")
context.categories_enabled = settings.enable_field_filters
if context.categories_enabled:
@@ -23,9 +23,9 @@ def get_slideshow(slideshow):
'rounded': 1,
'slider_name': "Categories"
}
slideshow = frappe.get_doc("Website Slideshow", slideshow)
slideshow = frappe.get_cached_doc("Website Slideshow", slideshow)
slides = slideshow.get({"doctype": "Website Slideshow Item"})
for index, slide in enumerate(slides):
for index, slide in enumerate(slides, start=1):
values[f"slide_{index + 1}_image"] = slide.image
values[f"slide_{index + 1}_title"] = slide.heading
values[f"slide_{index + 1}_subtitle"] = slide.description
@@ -41,7 +41,7 @@ def get_tabs(categories):
}
categorical_data = get_category_records(categories)
for index, tab in enumerate(categorical_data):
for index, tab in enumerate(categorical_data, start=1):
tab_values[f"tab_{index + 1}_title"] = frappe.unscrub(tab)
# pre-render cards for each tab
tab_values[f"tab_{index + 1}_content"] = frappe.render_template(
@@ -55,19 +55,24 @@ def get_category_records(categories):
for category in categories:
if category == "item_group":
categorical_data["item_group"] = frappe.db.sql("""
Select name, parent_item_group, is_group, image, route
from `tabItem Group`
where parent_item_group='All Item Groups'
and show_in_website=1""", as_dict=1)
Select
name, parent_item_group, is_group, image, route
from
`tabItem Group`
where
parent_item_group = 'All Item Groups'
and show_in_website = 1
""",
as_dict=1)
else:
doctype = frappe.unscrub(category)
fields = ["name"]
if frappe.get_meta(doctype, cached=True).get_field("image"):
fields += ["image"]
categorical_data[category] = frappe.db.sql("""
Select {fields}
from `tab{doctype}`""".format(doctype=doctype, fields=",".join(fields)), as_dict=1)
categorical_data[category] = frappe.db.sql(f"""
Select {",".join(fields)}
from `tab{doctype}`""", as_dict=1)
return categorical_data