Files
santeh-ray/templates/home/_fragments/popular-products.html
Azimkin 1188cef7be
All checks were successful
Build and Push Docker Image / build (push) Successful in 27s
Make product cards fully clickable
2026-06-16 00:06:21 +02:00

105 lines
7.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% load static %}
<section class="products-section container">
<h2 class="products-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
<div class="products-grid">
{% for item in home_products %}
{% url 'detail' item.category.slug item.slug as item_url %}
<article class="product product-{{ forloop.counter }}">
<a class="product-card-link" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}" tabindex="-1" aria-hidden="true"></a>
<a class="product-media" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}">
{% with primary_image=item.primary_image %}
{% if primary_image %}
<img src="{{ primary_image.image.url }}" alt="{{ primary_image.alt|default:item.name }}">
{% else %}
<span class="product-placeholder">Нет фото</span>
{% endif %}
{% endwith %}
</a>
<div class="product-actions" aria-label="Действия с товаром">
{% if request.user.is_authenticated %}
<form method="post" action="{% url 'favorites:toggle' %}">
{% csrf_token %}
<input type="hidden" name="item_id" value="{{ item.id }}">
<input type="hidden" name="next" value="{{ request.get_full_path }}">
<button
class="{% if item.id in favorite_item_ids %}is-active{% endif %}"
type="submit"
title="{% if item.id in favorite_item_ids %}Удалить из избранного{% else %}Добавить в избранное{% endif %}"
aria-label="{% if item.id in favorite_item_ids %}Удалить из избранного{% else %}Добавить в избранное{% endif %}"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01z"></path>
</svg>
</button>
</form>
{% else %}
<a
href="{% url 'users:login' %}?next={{ request.get_full_path|urlencode }}"
title="Войдите, чтобы добавить в избранное"
aria-label="Войдите, чтобы добавить в избранное"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01z"></path>
</svg>
</a>
{% endif %}
{% if request.user.is_authenticated %}
{% if item.id in cart_item_ids %}
<a href="{% url 'orders:cart' %}" title="Перейти в корзину" aria-label="Перейти в корзину">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
</svg>
</a>
{% else %}
<form method="post" action="{% url 'orders:add' %}">
{% csrf_token %}
<input type="hidden" name="item_id" value="{{ item.id }}">
<input type="hidden" name="next" value="{{ request.get_full_path }}">
<button type="submit" title="В корзину" aria-label="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
</svg>
</button>
</form>
{% endif %}
{% else %}
<a href="{% url 'users:login' %}?next={{ request.get_full_path|urlencode }}" title="Войдите, чтобы добавить в корзину" aria-label="Войдите, чтобы добавить в корзину">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
</svg>
</a>
{% endif %}
</div>
<div class="product-info">
<span class="product-category">
{{ item.category.name }}{% if item.subcategory %} / {{ item.subcategory.name }}{% endif %}
</span>
<a class="product-name" href="{{ item_url }}">{{ item.name }}</a>
<div class="product-meta">
<div class="product-price-block">
<span class="product-price{% if item.has_discount %} product-price--discount{% endif %}">
{{ item.display_price }} руб.
</span>
{% if item.has_discount %}
<span class="product-price-original">{{ item.price }} руб.</span>
{% endif %}
</div>
<span class="product-availability">В наличии</span>
</div>
</div>
</article>
{% empty %}
<p class="products-empty">Товары скоро появятся.</p>
{% endfor %}
</div>
<div class="products-footer">
<a href="/catalog/" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
</div>
</section>