brotherton-erpnext/erpnext/templates/generators/item_group.html
marination 48b3ce82b9 feat: (wip) Toggle Views
- Auto Height on Cards
- Title with ellipses on length exceed
- Changed namepaces
- Moved product card rendering to JS
- Added Image and List View Toggling buttons
- Kept basic filters rendering just as before
2021-11-16 16:11:09 +05:30

123 lines
3.7 KiB
HTML

{% from "erpnext/templates/includes/macros.html" import field_filter_section, attribute_filter_section, discount_range_filters %}
{% extends "templates/web.html" %}
{% block header %}
<!-- <h2>{{ title }}</h2> -->
{% 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 %}
<h2 class="mt-3">{{ title }}</h2>
{% 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">
{% if sub_categories %}
<div class="sub-category-container">
<div class="heading"> {{ _('Sub Categories') }} </div>
</div>
<div class="sub-category-container scroll-categories">
{% for row in sub_categories%}
<a href="{{ row.route or '#' }}" style="text-decoration: none;">
<div class="category-pill">
{{ row.name }}
</div>
</a>
{% endfor %}
</div>
{% endif %}
<!-- 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 class="row mt-6">
<div class="col-3">
</div>
<div class="col-9">
{% 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 }}"
style="float: right;">
{{ _("Next") }}
</button>
{% endif %}
</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 %}