Azimkin
3d356c7d6a
All checks were successful
Build and Push Docker Image / build (push) Successful in 41s
- Implemented JavaScript-based price slider for catalog filtering - Updated catalog views to handle min/max price inputs and compute slider bounds - Enhanced templates (`index.html`, `side-bar.html`) with filtering form and updated URLs - Added CSS for price slider styling and form layout - Introduced utility functions for URL building and price parsing - Expanded tests for price filtering, sliders, and sidebar active states - Updated context processor and header for dynamic navigation with price filters
99 lines
4.3 KiB
HTML
99 lines
4.3 KiB
HTML
<aside>
|
||
<section class="categories a-section">
|
||
<h2>Категории</h2>
|
||
<a href="{{ all_items_url }}" class="category {% if selected_category.id == None %}active{% endif %}">Все товары</a>
|
||
{% for category in categories %}
|
||
<a href="{{ category.catalog_url }}" class="category {% if selected_category.id == category.slug %}active{% endif %}">
|
||
{{ category.name }}
|
||
</a>
|
||
{% empty %}
|
||
<p class="categories-empty">Категории пока не добавлены.</p>
|
||
{% endfor %}
|
||
</section>
|
||
|
||
<section class="sub-categories a-section">
|
||
<h2>Подкатегории</h2>
|
||
{% if selected_category.id != None %}
|
||
<a href="{{ selected_category_url }}" class="category {% if selected_subcategory.id == None %}active{% endif %}">
|
||
Все подкатегории
|
||
</a>
|
||
{% for subcategory in subcategories %}
|
||
<a href="{{ subcategory.catalog_url }}" class="category {% if selected_subcategory.id == subcategory.slug %}active{% endif %}">
|
||
{{ subcategory.name }}
|
||
</a>
|
||
{% empty %}
|
||
<p class="categories-empty">Подкатегории пока не добавлены.</p>
|
||
{% endfor %}
|
||
{% else %}
|
||
<p class="categories-empty">Выберите категорию.</p>
|
||
{% endif %}
|
||
</section>
|
||
|
||
<form action="{{ price_filter_action }}" method="get" class="catalog-filter-form">
|
||
<input type="hidden" name="q" value="{{ current_search_query }}">
|
||
{% if selected_subcategory.id != None %}
|
||
<input type="hidden" name="subcategory" value="{{ selected_subcategory.id }}">
|
||
{% endif %}
|
||
<section class="a-section cost-section">
|
||
<h2>Стоимость</h2>
|
||
<div
|
||
class="catalog-price-slider"
|
||
data-price-slider
|
||
data-min-bound="{{ price_slider_min_bound }}"
|
||
data-max-bound="{{ price_slider_max_bound }}"
|
||
>
|
||
<input type="hidden" name="min_price" value="{{ current_min_price }}" data-price-hidden-min>
|
||
<input type="hidden" name="max_price" value="{{ current_max_price }}" data-price-hidden-max>
|
||
|
||
<div class="catalog-price-slider__values" aria-live="polite">
|
||
<span data-price-label-min>{{ price_slider_selected_min }} руб.</span>
|
||
<span data-price-label-max>{{ price_slider_selected_max }} руб.</span>
|
||
</div>
|
||
|
||
<div class="catalog-price-slider__controls">
|
||
<div class="catalog-price-slider__track">
|
||
<div class="catalog-price-slider__track-fill" data-price-track-fill></div>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min="{{ price_slider_min_bound }}"
|
||
max="{{ price_slider_max_bound }}"
|
||
step="0.01"
|
||
value="{{ price_slider_selected_min }}"
|
||
class="catalog-price-slider__range"
|
||
aria-label="Минимальная цена"
|
||
data-price-range-min
|
||
>
|
||
<input
|
||
type="range"
|
||
min="{{ price_slider_min_bound }}"
|
||
max="{{ price_slider_max_bound }}"
|
||
step="0.01"
|
||
value="{{ price_slider_selected_max }}"
|
||
class="catalog-price-slider__range"
|
||
aria-label="Максимальная цена"
|
||
data-price-range-max
|
||
>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="catalog-filter-submit">Применить</button>
|
||
</section>
|
||
|
||
<section class="a-section color-section">
|
||
<h2>Цвет</h2>
|
||
</section>
|
||
|
||
<section class="a-section material-section">
|
||
<h2>Материал</h2>
|
||
</section>
|
||
|
||
<section class="a-section promotions-section">
|
||
<h2>Акции</h2>
|
||
</section>
|
||
|
||
<section class="a-section new-section">
|
||
<h2>Новинки</h2>
|
||
</section>
|
||
</form>
|
||
</aside>
|