2016-01-01 11:53:12 +00:00
|
|
|
{% extends "templates/web.html" %}
|
|
|
|
|
2020-12-29 11:48:41 +00:00
|
|
|
{% block header %}
|
2020-12-30 07:30:35 +00:00
|
|
|
<!-- <h2>{{ title }}</h2> -->
|
2020-12-29 11:48:41 +00:00
|
|
|
{% endblock header %}
|
|
|
|
|
|
|
|
{% block script %}
|
|
|
|
<script type="text/javascript" src="/all-products/index.js"></script>
|
|
|
|
{% endblock %}
|
2016-01-04 12:20:40 +00:00
|
|
|
|
2021-03-02 14:24:01 +00:00
|
|
|
{% block breadcrumbs %}
|
|
|
|
<div class="item-breadcrumbs small text-muted">
|
|
|
|
{% include "templates/includes/breadcrumbs.html" %}
|
|
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
|
2016-01-01 11:53:12 +00:00
|
|
|
{% block page_content %}
|
2021-07-13 11:57:55 +00:00
|
|
|
<div class="item-group-content" itemscope itemtype="http://schema.org/Product" data-item-group="{{ name }}">
|
2020-08-11 10:33:46 +00:00
|
|
|
<div class="item-group-slideshow">
|
2014-04-18 10:45:31 +00:00
|
|
|
{% if slideshow %}<!-- slideshow -->
|
2020-12-30 07:30:35 +00:00
|
|
|
{{ web_block(
|
|
|
|
"Hero Slider",
|
|
|
|
values=slideshow,
|
|
|
|
add_container=0,
|
|
|
|
add_top_padding=0,
|
|
|
|
add_bottom_padding=0,
|
|
|
|
) }}
|
2014-04-18 10:45:31 +00:00
|
|
|
{% endif %}
|
2020-12-30 07:30:35 +00:00
|
|
|
<h2 class="mt-3">{{ title }}</h2>
|
2014-04-18 10:45:31 +00:00
|
|
|
{% if description %}<!-- description -->
|
2020-12-30 07:30:35 +00:00
|
|
|
<div class="item-group-description text-muted mb-5" itemprop="description">{{ description or ""}}</div>
|
2014-04-18 10:45:31 +00:00
|
|
|
{% endif %}
|
|
|
|
</div>
|
2020-12-30 07:30:35 +00:00
|
|
|
<div class="row">
|
2020-12-29 11:48:41 +00:00
|
|
|
<div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
|
2021-03-02 14:24:01 +00:00
|
|
|
{% 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 %}
|
2020-12-30 07:30:35 +00:00
|
|
|
<div class="row products-list">
|
2020-12-29 11:48:41 +00:00
|
|
|
{% if items %}
|
|
|
|
{% for item in items %}
|
2019-03-19 06:18:32 +00:00
|
|
|
{% include "erpnext/www/all-products/item_row.html" %}
|
2020-12-29 11:48:41 +00:00
|
|
|
{% endfor %}
|
|
|
|
{% else %}
|
|
|
|
{% include "erpnext/www/all-products/not_found.html" %}
|
2019-03-19 06:18:32 +00:00
|
|
|
{% endif %}
|
|
|
|
</div>
|
2020-12-29 11:48:41 +00:00
|
|
|
</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>
|
|
|
|
|
|
|
|
<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>
|
2021-07-14 14:31:36 +00:00
|
|
|
<div class="row mt-6">
|
|
|
|
<div class="col-3">
|
|
|
|
</div>
|
|
|
|
<div class="col-9">
|
2020-12-29 11:48:41 +00:00
|
|
|
{% if frappe.form_dict.start|int > 0 %}
|
2021-07-14 14:31:36 +00:00
|
|
|
<button class="btn btn-outline-secondary btn-prev" data-start="{{ frappe.form_dict.start|int - page_length }}">
|
|
|
|
{{ _("Prev") }}
|
|
|
|
</button>
|
2020-12-29 11:48:41 +00:00
|
|
|
{% endif %}
|
|
|
|
{% if items|length >= page_length %}
|
2021-07-14 14:31:36 +00:00
|
|
|
<button class="btn btn-outline-secondary btn-next" data-start="{{ frappe.form_dict.start|int + page_length }}"
|
|
|
|
style="float: right;">
|
|
|
|
{{ _("Next") }}
|
|
|
|
</button>
|
2016-04-09 16:55:21 +00:00
|
|
|
{% endif %}
|
|
|
|
</div>
|
2014-04-21 06:12:22 +00:00
|
|
|
</div>
|
2014-04-18 10:45:31 +00:00
|
|
|
</div>
|
2021-07-14 14:31:36 +00:00
|
|
|
|
|
|
|
<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>
|
2021-08-19 08:11:10 +00:00
|
|
|
{% endblock %}
|