fix: Filters state, Search input clearing, Paging buttons
- Fixed repetitive calls on checking filter checkbox
- Query count of items after offset for accurate Paging button display
- Order items by ranking in query
- Search results get empty on clearing input
diff --git a/erpnext/e_commerce/product_query.py b/erpnext/e_commerce/product_query.py
index b368252..476c640 100644
--- a/erpnext/e_commerce/product_query.py
+++ b/erpnext/e_commerce/product_query.py
@@ -117,12 +117,17 @@
def query_items(self, start=0):
"""Build a query to fetch Website Items based on field filters."""
- count = frappe.db.get_all(
+ # MySQL does not support offset without limit,
+ # frappe does not accept two parameters for limit
+ # https://dev.mysql.com/doc/refman/8.0/en/select.html#id4651989
+ count_items = frappe.db.get_all(
"Website Item",
- fields=["count(*) as count"],
filters=self.filters,
or_filters=self.or_filters,
- limit_start=start)[0].get("count")
+ limit_page_length=184467440737095516,
+ limit_start=start, # get all items from this offset for total count ahead
+ order_by="ranking desc")
+ count = len(count_items)
items = frappe.db.get_all(
"Website Item",
@@ -130,9 +135,10 @@
filters=self.filters,
or_filters=self.or_filters,
limit_page_length=self.page_length,
- limit_start=start)
+ limit_start=start,
+ order_by="ranking desc")
- return items, count or 0
+ return items, count
def query_items_with_attributes(self, attributes, start=0):
"""Build a query to fetch Website Items based on field & attribute filters."""
diff --git a/erpnext/e_commerce/product_search.js b/erpnext/e_commerce/product_search.js
index e537688..8466b4f 100644
--- a/erpnext/e_commerce/product_search.js
+++ b/erpnext/e_commerce/product_search.js
@@ -39,6 +39,11 @@
this.searchBox.on("input", (e) => {
let query = e.target.value;
+ if (query.length == 0) {
+ me.populateResults([]);
+ me.populateCategoriesList([]);
+ }
+
if (query.length < 3 || !query.length) return;
// Populate recent search chips
@@ -191,7 +196,7 @@
}
populateResults(data) {
- if (data.message.results.length === 0) {
+ if (data.length === 0 || data.message.results.length === 0) {
let empty_html = `
<div class="mt-6 w-100 text-muted" style="font-weight: 400; text-align: center;">
${ __('No results') }
@@ -220,7 +225,7 @@
}
populateCategoriesList(data) {
- if (data.message.results.length === 0) {
+ if (data.length === 0 || data.message.results.length === 0) {
let empty_html = `
<span class="text-muted" style="font-weight: 400;">
${__('No results')}
diff --git a/erpnext/e_commerce/product_view.js b/erpnext/e_commerce/product_view.js
index 67fc913..c083991 100644
--- a/erpnext/e_commerce/product_view.js
+++ b/erpnext/e_commerce/product_view.js
@@ -10,10 +10,10 @@
this.make();
}
- make() {
+ make(from_filters=false) {
this.products_section.empty();
this.prepare_view_toggler();
- this.get_item_filter_data();
+ this.get_item_filter_data(from_filters);
}
prepare_view_toggler() {
@@ -24,7 +24,7 @@
}
}
- get_item_filter_data() {
+ get_item_filter_data(from_filters=false) {
// Get and render all Product related views
let me = this;
let args = this.get_query_filters();
@@ -43,16 +43,25 @@
if (!result.message["items"].length) {
// if result has no items or result is empty
me.render_no_products_section();
-
- me.bind_filters();
- me.restore_filters_state();
} else {
- me.render_filters(result.message["filters"]);
+ // Add discount filters
+ me.get_discount_filter_html(result.message["filters"].discount_filters);
// Render views
me.render_list_view(result.message["items"], result.message["settings"]);
me.render_grid_view(result.message["items"], result.message["settings"]);
+
me.products = result.message["items"];
+ me.product_count = result.message["items_count"];
+ }
+
+ // Bind filter actions
+ if (!from_filters) {
+ // If `get_product_filter_data` was triggered after checking a filter,
+ // don't touch filters unnecessarily, only data must change
+ // filter persistence is handle on filter change event
+ me.bind_filters();
+ me.restore_filters_state();
}
// Bottom paging
@@ -71,12 +80,6 @@
$('#image-view').prop('disabled', disable);
}
- render_filters(filter_data) {
- this.get_discount_filter_html(filter_data.discount_filters);
- this.bind_filters();
- this.restore_filters_state();
- }
-
render_grid_view(items, settings) {
// loop over data and add grid html to it
let me = this;
@@ -143,10 +146,9 @@
let query_params = frappe.utils.get_query_params();
let start = query_params.start ? cint(JSON.parse(query_params.start)) : 0;
let page_length = settings.products_per_page || 0;
- let no_of_products = this.products.length;
let prev_disable = start > 0 ? "" : "disabled";
- let next_disable = (no_of_products > page_length || no_of_products == page_length) ? "" : "disabled";
+ let next_disable = (this.product_count > page_length) ? "" : "disabled";
paging_html += `
<button class="btn btn-default btn-prev" data-start="${ start - page_length }"
@@ -302,7 +304,9 @@
}
if (is_checked) {
this.field_filters[filter_name] = this.field_filters[filter_name] || [];
- this.field_filters[filter_name].push(filter_value);
+ if (!in_list(this.field_filters[filter_name], filter_value)) {
+ 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);
@@ -322,7 +326,8 @@
window.history.pushState('filters', '', `${location.pathname}?` + query_string);
$('.page_content input').prop('disabled', true);
- me.make();
+
+ me.make(from_filters=true);
$('.page_content input').prop('disabled', false);
});
}