santeh-ray/templates/catalog/_fragments/side-bar.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 %}
        {% if filter_sale %}
            <input type="hidden" name="sale" value="1">
        {% endif %}
        {% if filter_new %}
            <input type="hidden" name="new" value="1">
        {% 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="1"
                        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="1"
                        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>

        {% if available_colors %}
        <section class="a-section color-section">
            <h2>Цвет</h2>
            <a href="{{ any_color_url }}" class="category {% if not selected_color_id %}active{% endif %}">Любой</a>
            {% for color in available_colors %}
                <a href="{{ color.catalog_url }}" class="category {% if selected_color_id == color.id|stringformat:"i" %}active{% endif %}">
                    {{ color.name }}
                </a>
            {% endfor %}
        </section>
        {% endif %}
    </form>

    <section class="a-section promotions-section">
        <h2>
            <a href="{{ sale_all_url }}" class="sidebar-section-link{% if filter_sale %} active{% endif %}">Акции</a>
        </h2>
        {% for sale_item in sidebar_sale_items %}
            <div class="sidebar-mini-card">
                {% url 'detail' sale_item.category.slug sale_item.slug as sale_item_url %}
                <a class="sidebar-mini-card__overlay" href="{{ sale_item_url }}" aria-label="Открыть товар {{ sale_item.name }}" tabindex="-1" aria-hidden="true"></a>
                {% with img=sale_item.primary_image %}
                    {% if img %}
                        <a href="{{ sale_item_url }}" class="sidebar-mini-card__img-link">
                            <img src="{{ img.image.url }}" alt="{{ img.alt|default:sale_item.name }}">
                        </a>
                    {% endif %}
                {% endwith %}
                <div class="sidebar-mini-card__body">
                    <a href="{{ sale_item_url }}" class="sidebar-mini-card__name">{{ sale_item.name }}</a>
                    <span class="sidebar-mini-card__price">{{ sale_item.display_price }} руб.</span>
                </div>
            </div>
        {% empty %}
            <p class="categories-empty">Акций пока нет.</p>
        {% endfor %}
        {% if sidebar_sale_items %}
            <a href="{{ sale_all_url }}" class="sidebar-more-link">Ещё</a>
        {% endif %}
    </section>

    <section class="a-section new-section">
        <h2>
            <a href="{{ new_all_url }}" class="sidebar-section-link{% if filter_new %} active{% endif %}">Новинки</a>
        </h2>
        {% for new_item in sidebar_new_items %}
            <div class="sidebar-mini-card">
                {% url 'detail' new_item.category.slug new_item.slug as new_item_url %}
                <a class="sidebar-mini-card__overlay" href="{{ new_item_url }}" aria-label="Открыть товар {{ new_item.name }}" tabindex="-1" aria-hidden="true"></a>
                {% with img=new_item.primary_image %}
                    {% if img %}
                        <a href="{{ new_item_url }}" class="sidebar-mini-card__img-link">
                            <img src="{{ img.image.url }}" alt="{{ img.alt|default:new_item.name }}">
                        </a>
                    {% endif %}
                {% endwith %}
                <div class="sidebar-mini-card__body">
                    <a href="{{ new_item_url }}" class="sidebar-mini-card__name">{{ new_item.name }}</a>
                    <span class="sidebar-mini-card__price">{{ new_item.display_price }} руб.</span>
                </div>
            </div>
        {% empty %}
            <p class="categories-empty">Новинок пока нет.</p>
        {% endfor %}
        {% if sidebar_new_items %}
            <a href="{{ new_all_url }}" class="sidebar-more-link">Ещё</a>
        {% endif %}
    </section>
</aside>