Azimkin
56af404dc9
All checks were successful
Build and Push Docker Image / build (push) Successful in 38s
- Added `selected_color` field to `CartItem` model with migration - Updated color swatch behavior on product detail page with selection logic and disabled button handling - Improved cart templates to display selected color alongside item details - Modified `add_item_to_cart` service and `add` view to handle color selection - Enhanced styles for active swatches and cart item color display
228 lines
15 KiB
HTML
228 lines
15 KiB
HTML
{% extends "_layouts/base.html" %}
|
||
{% load static l10n %}
|
||
|
||
{% block title %}Корзина{% endblock %}
|
||
|
||
{% block add_css %}
|
||
<link rel="stylesheet" href="{% static "css/cart.css" %}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{% include "_fragments/header.html" %}
|
||
|
||
{% include '_fragments/breadcrumbs.html' with url_1='/' text_1='Главная' url_2='/orders/cart/' text_2='Корзина' %}
|
||
|
||
<main class="container cart-page">
|
||
{% if cart_items %}
|
||
<div class="checkout-layout">
|
||
<section class="cart-products" aria-label="Товары в корзине">
|
||
<h1 class="cart-section-title">ТОВАРЫ</h1>
|
||
|
||
<div class="cart-items">
|
||
{% for cart_item in cart_items %}
|
||
{% with item=cart_item.item %}
|
||
<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 %}">
|
||
{% 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="cart-item__placeholder">Нет фото</span>
|
||
{% endif %}
|
||
{% endwith %}
|
||
</a>
|
||
|
||
<div class="cart-item__info">
|
||
<a class="cart-item__title" href="{% url 'detail' item.category.slug item.slug %}">{{ item.name }}</a>
|
||
{% if cart_item.selected_color %}
|
||
<span class="cart-item__color">({{ cart_item.selected_color.name }})</span>
|
||
{% endif %}
|
||
<p class="cart-item__price">{{ item.price }} руб.</p>
|
||
|
||
<div class="cart-item__controls">
|
||
<div class="cart-quantity" aria-label="Количество товара">
|
||
<button
|
||
class="cart-quantity__button"
|
||
type="button"
|
||
data-cart-decrement
|
||
data-remove-form-id="cart-remove-{{ cart_item.id }}"
|
||
data-update-form-id="cart-decrement-{{ cart_item.id }}"
|
||
data-current-quantity="{{ cart_item.quantity }}"
|
||
aria-label="Уменьшить количество"
|
||
>
|
||
-
|
||
</button>
|
||
<span class="cart-quantity__value">{{ cart_item.quantity }}</span>
|
||
<form id="cart-increment-{{ cart_item.id }}" method="post" action="{% url 'orders:update_quantity' %}">
|
||
{% csrf_token %}
|
||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||
<input type="hidden" name="quantity" value="{{ cart_item.quantity|add:1 }}">
|
||
<input type="hidden" name="next" value="{% url 'orders:cart' %}">
|
||
<button class="cart-quantity__button" type="submit" aria-label="Увеличить количество">+</button>
|
||
</form>
|
||
<form id="cart-decrement-{{ cart_item.id }}" method="post" action="{% url 'orders:update_quantity' %}">
|
||
{% csrf_token %}
|
||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||
<input type="hidden" name="quantity" value="{{ cart_item.quantity|add:-1 }}">
|
||
<input type="hidden" name="next" value="{% url 'orders:cart' %}">
|
||
</form>
|
||
</div>
|
||
|
||
<form id="cart-remove-{{ cart_item.id }}" method="post" action="{% url 'orders:remove' %}">
|
||
{% csrf_token %}
|
||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||
<input type="hidden" name="next" value="{% url 'orders:cart' %}">
|
||
<button class="cart-item__remove" type="submit" aria-label="Удалить товар">Удалить</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
{% endwith %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="cart-products-summary">
|
||
<p><span>Товары, {{ total_quantity }} шт.</span><strong>{{ products_total }}</strong></p>
|
||
<p><span>Скидка</span><strong>{{ discount_total }}</strong></p>
|
||
<p><span>Итого к оплате</span><strong data-checkout-total-text>{{ total_amount }}</strong></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="checkout-panel" aria-label="Оформление заказа">
|
||
<h2 class="cart-section-title">Оформление заказа</h2>
|
||
|
||
<form
|
||
class="checkout-form"
|
||
method="post"
|
||
action="{% url 'orders:checkout' %}"
|
||
data-checkout-form
|
||
data-products-total="{{ products_total_value|unlocalize }}"
|
||
>
|
||
{% csrf_token %}
|
||
|
||
{% if checkout_form.non_field_errors %}
|
||
<div class="checkout-errors">
|
||
{% for error in checkout_form.non_field_errors %}
|
||
<p>{{ error }}</p>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<fieldset class="checkout-fieldset">
|
||
<legend>СПОСОБ ДОСТАВКИ</legend>
|
||
<div class="checkout-options checkout-options--two">
|
||
<label class="checkout-radio">
|
||
<input type="radio" name="delivery_method" value="courier" {% if checkout_form.delivery_method.value == "courier" or not checkout_form.is_bound %}checked{% endif %}>
|
||
<span>Курьерская доставка</span>
|
||
</label>
|
||
<label class="checkout-radio">
|
||
<input type="radio" name="delivery_method" value="pickup" {% if checkout_form.delivery_method.value == "pickup" %}checked{% endif %}>
|
||
<span>Самовывоз</span>
|
||
</label>
|
||
</div>
|
||
{% for error in checkout_form.delivery_method.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
</fieldset>
|
||
|
||
<fieldset class="checkout-fieldset">
|
||
<legend>АДРЕС ДОСТАВКИ</legend>
|
||
<div class="checkout-grid">
|
||
<label class="checkout-input checkout-input--short">
|
||
<span>Регион*</span>
|
||
<input type="text" name="region" value="{{ checkout_form.region.value|default:'' }}" placeholder="Регион*" autocomplete="address-level1">
|
||
</label>
|
||
<label class="checkout-input checkout-input--wide">
|
||
<span>Улица, дом, квартира*</span>
|
||
<input type="text" name="address" value="{{ checkout_form.address.value|default:'' }}" placeholder="Улица, дом, квартира*" autocomplete="street-address">
|
||
</label>
|
||
</div>
|
||
{% for error in checkout_form.region.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
{% for error in checkout_form.address.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
</fieldset>
|
||
|
||
<fieldset class="checkout-fieldset">
|
||
<legend>СПОСОБ ОПЛАТЫ</legend>
|
||
<div class="checkout-options checkout-options--three">
|
||
<label class="checkout-radio">
|
||
<input type="radio" name="payment_method" value="card" {% if checkout_form.payment_method.value == "card" or not checkout_form.is_bound %}checked{% endif %}>
|
||
<span>Банковская карта</span>
|
||
</label>
|
||
<label class="checkout-radio">
|
||
<input type="radio" name="payment_method" value="credit" {% if checkout_form.payment_method.value == "credit" %}checked{% endif %}>
|
||
<span>Кредит</span>
|
||
</label>
|
||
<label class="checkout-radio">
|
||
<input type="radio" name="payment_method" value="installment" {% if checkout_form.payment_method.value == "installment" %}checked{% endif %}>
|
||
<span>Рассрочка</span>
|
||
</label>
|
||
</div>
|
||
{% for error in checkout_form.payment_method.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
</fieldset>
|
||
|
||
<fieldset class="checkout-fieldset">
|
||
<legend>КОНТАКТЫ</legend>
|
||
<div class="checkout-grid checkout-grid--contacts">
|
||
<label class="checkout-input checkout-input--wide">
|
||
<span>ФИО*</span>
|
||
<input type="text" name="customer_name" value="{{ checkout_form.customer_name.value|default:'' }}" placeholder="ФИО*" autocomplete="name">
|
||
</label>
|
||
<label class="checkout-input">
|
||
<span>Телефон*</span>
|
||
<input type="tel" name="phone" value="{{ checkout_form.phone.value|default:'' }}" placeholder="Телефон*" autocomplete="tel">
|
||
</label>
|
||
<label class="checkout-input">
|
||
<span>E-mail*</span>
|
||
<input type="email" name="email" value="{{ checkout_form.email.value|default:'' }}" placeholder="E-mail*" autocomplete="email">
|
||
</label>
|
||
</div>
|
||
{% for error in checkout_form.customer_name.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
{% for error in checkout_form.phone.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
{% for error in checkout_form.email.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
|
||
<label class="checkout-checkbox">
|
||
<input type="checkbox" name="recipient_matches_customer" value="on" {% if checkout_form.recipient_matches_customer.value or not checkout_form.is_bound %}checked{% endif %}>
|
||
<span>ФИО получателя совпадает с ФИО покупателя</span>
|
||
</label>
|
||
</fieldset>
|
||
|
||
<div class="promo-row">
|
||
<label class="checkout-input">
|
||
<span>Промокод</span>
|
||
<input type="text" name="promo_code" value="{{ checkout_form.promo_code.value|default:'' }}" placeholder="Промокод">
|
||
</label>
|
||
<button type="button">ПРИМЕНИТЬ</button>
|
||
</div>
|
||
|
||
<div class="checkout-summary">
|
||
<p><strong>Товары, {{ total_quantity }} шт.</strong><span>{{ products_total }}</span></p>
|
||
<p><strong>Скидка</strong><span>{{ discount_total }}</span></p>
|
||
<p><strong>Итого к оплате</strong><span data-checkout-total-text>{{ total_amount }}</span></p>
|
||
</div>
|
||
|
||
<button class="checkout-submit" type="submit">ОФОРМИТЬ ЗАКАЗ</button>
|
||
|
||
<label class="checkout-checkbox checkout-checkbox--terms">
|
||
<input type="checkbox" name="terms_accepted" value="on" {% if checkout_form.terms_accepted.value %}checked{% endif %}>
|
||
<span>Согласен с условиями продажи, оплаты и возврата</span>
|
||
</label>
|
||
{% for error in checkout_form.terms_accepted.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
|
||
|
||
<div class="checkout-services">
|
||
<h3>Услуги</h3>
|
||
<p><span>Доставка</span><strong data-delivery-total-text>{{ delivery_total }}</strong></p>
|
||
<p><span>Подъём на этаж</span><strong data-floor-lift-total-text>{{ floor_lift_total }}</strong></p>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
{% else %}
|
||
<section class="cart-empty">
|
||
<h1>Корзина пуста</h1>
|
||
<p>Добавьте товары из каталога, чтобы оформить заказ.</p>
|
||
<a href="/catalog/">Перейти в каталог</a>
|
||
</section>
|
||
{% endif %}
|
||
</main>
|
||
|
||
{% include "_fragments/footer.html" %}
|
||
{% endblock %}
|