fix: Product Filters Lookup
- bind the right classes to the filter lookup field
- make class names more descriptive
- make filter lookup field more visible with white bg and border
- bind lookup input field js in `views.js`
- make filter lookup field functioning for atribute filters too
- added placeholder to lookup field
diff --git a/erpnext/e_commerce/product_ui/views.js b/erpnext/e_commerce/product_ui/views.js
index 6dce79d..fb63b21 100644
--- a/erpnext/e_commerce/product_ui/views.js
+++ b/erpnext/e_commerce/product_ui/views.js
@@ -418,6 +418,22 @@
me.change_route_with_filters();
});
+
+ // bind filter lookup input box
+ $('.filter-lookup-input').on('keydown', frappe.utils.debounce((e) => {
+ const $input = $(e.target);
+ const keyword = ($input.val() || '').toLowerCase();
+ const $filter_options = $input.next('.filter-options');
+
+ $filter_options.find('.filter-lookup-wrapper').show();
+ $filter_options.find('.filter-lookup-wrapper').each((i, el) => {
+ const $el = $(el);
+ const value = $el.data('value').toLowerCase();
+ if (!value.includes(keyword)) {
+ $el.hide();
+ }
+ });
+ }, 300));
}
change_route_with_filters() {
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 019496d..6ae464d 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -264,6 +264,15 @@
font-size: 13px;
}
+ .filter-lookup-input {
+ background-color: white;
+ border: 1px solid var(--gray-300);
+
+ &:focus {
+ border: 1px solid var(--primary);
+ }
+ }
+
.filter-label {
font-size: 11px;
font-weight: 600;
diff --git a/erpnext/templates/generators/item_group.html b/erpnext/templates/generators/item_group.html
index e099cdd..956c3c51 100644
--- a/erpnext/templates/generators/item_group.html
+++ b/erpnext/templates/generators/item_group.html
@@ -52,24 +52,6 @@
</div>
- <script>
- frappe.ready(() => {
- $('.product-filter-filter').on('keydown', frappe.utils.debounce((e) => {
- const $input = $(e.target);
- const keyword = ($input.val() || '').toLowerCase();
- const $filter_options = $input.next('.filter-options');
-
- $filter_options.find('.custom-control').show();
- $filter_options.find('.custom-control').each((i, el) => {
- const $el = $(el);
- const value = $el.data('value').toLowerCase();
- if (!value.includes(keyword)) {
- $el.hide();
- }
- });
- }, 300));
- })
- </script>
</div>
</div>
</div>
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 4741307..fb4cecf 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -300,13 +300,13 @@
{% 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"/>
+ <input type="text" class="form-control form-control-sm mb-2 filter-lookup-input" placeholder="Search {{ item_field.label + 's' }}"/>
{% endif %}
{% if values %}
<div class="filter-options">
{% for value in values %}
- <div class="checkbox" data-value="{{ value }}">
+ <div class="filter-lookup-wrapper checkbox" data-value="{{ value }}">
<label for="{{value}}">
<input type="checkbox"
class="product-filter field-filter"
@@ -329,16 +329,16 @@
{%- macro attribute_filter_section(filters)-%}
{% for attribute in filters %}
<div class="mb-4 filter-block pb-5">
- <div class="filter-label mb-3">{{ attribute.name}}</div>
- {% if values | len > 20 %}
+ <div class="filter-label mb-3">{{ attribute.name }}</div>
+ {% if attribute.item_attribute_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"/>
+ <input type="text" class="form-control form-control-sm mb-2 filter-lookup-input" placeholder="Search {{ attribute.name + 's' }}"/>
{% endif %}
{% if attribute.item_attribute_values %}
<div class="filter-options">
{% for attr_value in attribute.item_attribute_values %}
- <div class="checkbox">
+ <div class="filter-lookup-wrapper checkbox" data-value="{{ attr_value }}">
<label data-value="{{ attr_value }}">
<input type="checkbox"
class="product-filter attribute-filter"
diff --git a/erpnext/www/all-products/index.html b/erpnext/www/all-products/index.html
index 3d5517c..04fc74c 100644
--- a/erpnext/www/all-products/index.html
+++ b/erpnext/www/all-products/index.html
@@ -31,24 +31,6 @@
{% endif %}
</div>
- <script>
- frappe.ready(() => {
- $('.product-filter-filter').on('keydown', frappe.utils.debounce((e) => {
- const $input = $(e.target);
- const keyword = ($input.val() || '').toLowerCase();
- const $filter_options = $input.next('.filter-options');
-
- $filter_options.find('.custom-control').show();
- $filter_options.find('.custom-control').each((i, el) => {
- const $el = $(el);
- const value = $el.data('value').toLowerCase();
- if (!value.includes(keyword)) {
- $el.hide();
- }
- });
- }, 300));
- })
- </script>
</div>
</div>