Make product cards fully clickable
All checks were successful
Build and Push Docker Image / build (push) Successful in 27s

This commit is contained in:
2026-06-16 00:06:21 +02:00
parent a84b9af926
commit 1188cef7be
11 changed files with 133 additions and 9 deletions

View File

@@ -1,5 +1,7 @@
{% url 'detail' item.category.slug item.slug as item_url %}
<article class="item-card{% if item.id in favorite_item_ids %} is-favorite{% endif %}" data-item-card="{{ item.id }}">
<a class="item-card-media-link" href="{% url 'detail' item.category.slug item.slug %}" aria-label="Открыть товар {{ item.name }}">
<a class="item-card-overlay" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}" tabindex="-1" aria-hidden="true"></a>
<a class="item-card-media-link" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}">
{% with primary_image=item.primary_image %}
<div class="item-card-image">
{% if primary_image %}
@@ -44,7 +46,7 @@
{% endif %}
</div>
<a class="item-card-title-link" href="{% url 'detail' item.category.slug item.slug %}" aria-label="Открыть товар {{ item.name }}">
<a class="item-card-title-link" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}">
<h2 class="item-card-title">{{ item.name }}</h2>
</a>
<div class="item-card-footer">

View File

@@ -104,15 +104,17 @@
</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="{% url 'detail' sale_item.category.slug sale_item.slug %}" class="sidebar-mini-card__img-link">
<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="{% url 'detail' sale_item.category.slug sale_item.slug %}" class="sidebar-mini-card__name">{{ sale_item.name }}</a>
<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>
@@ -130,15 +132,17 @@
</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="{% url 'detail' new_item.category.slug new_item.slug %}" class="sidebar-mini-card__img-link">
<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="{% url 'detail' new_item.category.slug new_item.slug %}" class="sidebar-mini-card__name">{{ new_item.name }}</a>
<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>

View File

@@ -7,6 +7,7 @@
{% 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 %}

View File

@@ -25,8 +25,10 @@
<div class="cart-items">
{% for cart_item in cart_items %}
{% with item=cart_item.item %}
{% url 'detail' item.category.slug item.slug as item_url %}
<article class="cart-item" data-auth-cart-item data-current-quantity="{{ cart_item.quantity }}">
<a class="cart-item__media" href="{% url 'detail' item.category.slug item.slug %}">
<a class="cart-item__overlay" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}" tabindex="-1" aria-hidden="true"></a>
<a class="cart-item__media" href="{{ item_url }}">
{% with primary_image=item.primary_image %}
{% if primary_image %}
<img src="{{ primary_image.image.url }}" alt="{{ primary_image.alt|default:item.name }}">
@@ -37,7 +39,7 @@
</a>
<div class="cart-item__info">
<a class="cart-item__title" href="{% url 'detail' item.category.slug item.slug %}">{{ item.name }}</a>
<a class="cart-item__title" href="{{ item_url }}">{{ item.name }}</a>
{% if cart_item.selected_color %}
<span class="cart-item__color">({{ cart_item.selected_color.name }})</span>
{% endif %}