{% from "erpnext/templates/includes/macros.html" import field_filter_section, attribute_filter_section, discount_range_filters %} {% extends "templates/web.html" %} {% block header %} <div class="mb-6">{{ _(item_group_name) }}</div> {% endblock header %} {% block script %} <script type="text/javascript" src="/all-products/index.js"></script> {% endblock %} {% block breadcrumbs %} <div class="item-breadcrumbs small text-muted"> {% include "templates/includes/breadcrumbs.html" %} </div> {% endblock %} {% block page_content %} <div class="item-group-content" itemscope itemtype="http://schema.org/Product" data-item-group="{{ name }}"> <div class="item-group-slideshow"> {% if slideshow %} <!-- slideshow --> {{ web_block( "Hero Slider", values=slideshow, add_container=0, add_top_padding=0, add_bottom_padding=0, ) }} {% endif %} {% if description %} <!-- description --> <div class="item-group-description text-muted mb-5" itemprop="description">{{ description or ""}}</div> {% endif %} </div> <div class="row"> <div id="product-listing" class="col-12 order-2 col-md-9 order-md-2 item-card-group-section"> <!-- Products Rendered in all-products/index.js--> </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> <!-- field filters --> {{ field_filter_section(field_filters) }} <!-- attribute filters --> {{ attribute_filter_section(attribute_filters) }} </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> <script> frappe.ready(() => { $('.btn-prev, .btn-next').click((e) => { const $btn = $(e.target); $btn.prop('disabled', true); const start = $btn.data('start'); let query_params = frappe.utils.get_query_params(); query_params.start = start; let path = window.location.pathname + '?' + frappe.utils.get_url_from_dict(query_params); window.location.href = path; }); }); </script> {% endblock %}