897c08c8e7
- Added fully functional list and grid view toggling - Added ProductGrid and ProductList controllers - Moved html snippets, rendered via JS now - Item Group page also rendered via common controller - Paging section rendered via JS - Minor style changes
100 lines
2.9 KiB
HTML
100 lines
2.9 KiB
HTML
{% from "erpnext/templates/includes/macros.html" import attribute_filter_section, field_filter_section, discount_range_filters %}
|
|
{% extends "templates/web.html" %}
|
|
|
|
{% block title %}{{ _('Products') }}{% endblock %}
|
|
{% block header %}
|
|
<div class="mb-6">{{ _('Products') }}</div>
|
|
{% endblock header %}
|
|
|
|
{% block page_content %}
|
|
<!-- Old Search -->
|
|
<!-- <div class="row" style="display: none;">
|
|
<div class="col-8">
|
|
<div class="input-group input-group-sm mb-3">
|
|
<input type="search" class="form-control" placeholder="{{_('Search')}}"
|
|
aria-label="{{_('Product Search')}}" aria-describedby="product-search"
|
|
value="{{ frappe.sanitize_html(frappe.form_dict.search) or '' }}"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4 pl-0">
|
|
<button class="btn btn-light btn-sm btn-block d-md-none"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#product-filters"
|
|
aria-expanded="false"
|
|
aria-controls="product-filters"
|
|
style="white-space: nowrap;"
|
|
>
|
|
{{ _('Toggle Filters') }}
|
|
</button>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="row">
|
|
<!-- Items section -->
|
|
<div id="product-listing" class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
|
|
<!-- Rendered via JS -->
|
|
</div>
|
|
|
|
<!-- Filters Section -->
|
|
<div class="col-12 order-1 col-md-3 order-md-1">
|
|
{% if frappe.form_dict.start or frappe.form_dict.field_filters or frappe.form_dict.attribute_filters or frappe.form_dict.search %}
|
|
|
|
|
|
{% endif %}
|
|
|
|
<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="/all-products">{{ _('Clear All') }}</a>
|
|
</div>
|
|
<!-- field filters -->
|
|
{% if field_filters %}
|
|
{{ field_filter_section(field_filters) }}
|
|
{% endif %}
|
|
|
|
<!-- attribute filters -->
|
|
{% if attribute_filters %}
|
|
{{ attribute_filter_section(attribute_filters) }}
|
|
{% 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>
|
|
|
|
<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 %}
|