feat: update item group template
diff --git a/erpnext/templates/generators/item_group.html b/erpnext/templates/generators/item_group.html
index 40a064f..f2f16d8 100644
--- a/erpnext/templates/generators/item_group.html
+++ b/erpnext/templates/generators/item_group.html
@@ -1,6 +1,12 @@
{% extends "templates/web.html" %}
-{% block header %}<h1>{{ name }}</h1>{% endblock %}
+{% block header %}
+<h2 class="mb-6">{{ name }}</h2>
+{% endblock header %}
+
+{% block script %}
+<script type="text/javascript" src="/all-products/index.js"></script>
+{% endblock %}
{% block page_content %}
<div class="item-group-content" itemscope itemtype="http://schema.org/Product">
@@ -9,30 +15,118 @@
{% include "templates/includes/slideshow.html" %}
{% endif %}
{% if description %}<!-- description -->
- <div class="mb-3" itemprop="description">{{ description or ""}}</div>
+ <div class="item-group-description" itemprop="description">{{ description or ""}}</div>
{% endif %}
</div>
- <div class="row">
- <div class="col-md-8">
- {% if items %}
- <div id="search-list">
- {% for i in range(0, page_length) %}
- {% if items[i] %}
- {%- set item = items[i] %}
+ <div class="row mt-5">
+ <div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
+ <div class="row">
+ {% if items %}
+ {% for item in items %}
{% include "erpnext/www/all-products/item_row.html" %}
- {% endif %}
+ {% endfor %}
+ {% else %}
+ {% include "erpnext/www/all-products/not_found.html" %}
+ {% endif %}
+ </div>
+ </div>
+ <div class="col-12 order-1 col-md-3 order-md-1">
+ <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="/{{ doc.route }}">{{ _('Clear All') }}</a>
+ </div>
+ {% for field_filter in field_filters %}
+ {%- set item_field = field_filter[0] %}
+ {%- set values = field_filter[1] %}
+ <div class="mb-4 filter-block pb-5">
+ <div class="filter-label mb-3">{{ item_field.label }}</div>
+
+ {% 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"/>
+ {% endif %}
+
+ {% if values %}
+ <div class="filter-options">
+ {% for value in values %}
+ <div class="checkbox" data-value="{{ value }}">
+ <label for="{{value}}">
+ <input type="checkbox"
+ class="product-filter field-filter"
+ id="{{value}}"
+ data-filter-name="{{ item_field.fieldname }}"
+ data-filter-value="{{ value }}"
+ >
+ <span class="label-area">{{ value }}</span>
+ </label>
+ </div>
+ {% endfor %}
+ </div>
+ {% else %}
+ <i class="text-muted">{{ _('No values') }}</i>
+ {% endif %}
+ </div>
+ {% endfor %}
+
+ {% for attribute in attribute_filters %}
+ <div class="mb-4 filter-block pb-5">
+ <div class="filter-label mb-3">{{ attribute.name}}</div>
+ {% 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"/>
+ {% endif %}
+
+ {% if attribute.item_attribute_values %}
+ <div class="filter-options">
+ {% for attr_value in attribute.item_attribute_values %}
+ <div class="checkbox">
+ <label data-value="{{ value }}">
+ <input type="checkbox"
+ class="product-filter attribute-filter"
+ id="{{attr_value.name}}"
+ data-attribute-name="{{ attribute.name }}"
+ data-attribute-value="{{ attr_value.attribute_value }}"
+ {% if attr_value.checked %} checked {% endif %}>
+ <span class="label-area">{{ attr_value.attribute_value }}</span>
+ </label>
+ </div>
+ {% endfor %}
+ </div>
+ {% else %}
+ <i class="text-muted">{{ _('No values') }}</i>
+ {% endif %}
+ </div>
{% endfor %}
</div>
- <div class="item-group-nav-buttons">
- {% if frappe.form_dict.start|int > 0 %}
- <a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</a>
- {% endif %}
- {% if items|length > page_length %}
- <a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</a>
- {% endif %}
- </div>
- {% else %}
- <div class="text-muted">{{ _("No items listed") }}.</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 class="row">
+ <div class="col-12">
+ {% if frappe.form_dict.start|int > 0 %}
+ <button class="btn btn-outline-secondary btn-prev" data-start="{{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</button>
+ {% endif %}
+ {% if items|length >= page_length %}
+ <button class="btn btn-outline-secondary btn-next" data-start="{{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</button>
{% endif %}
</div>
</div>