santeh-ray/templates/catalog/detail.html

{% extends "_layouts/base.html" %}
{% load static %}

{% block title %}{{ item.name }}{% endblock %}

{% block add_css %}
    <link rel="stylesheet" href="{% static "css/catalog.css" %}">
{% endblock %}

{% block content %}
    {% include "_fragments/header.html" with active="catalog" %}

    {% url 'detail' item.category.slug item.slug as product_url %}
    {% include '_fragments/breadcrumbs.html' with url_1='/' text_1='Главная' url_2='/catalog/' text_2='Каталог' url_3='/catalog/'|add:item.category.slug|add:'/' text_3=item.category.name url_4=product_url text_4=item.name %}

    <main class="container product-detail">
        <section class="product-gallery" aria-label="Изображения товара">
            <div class="product-gallery__main">
                {% if primary_image %}
                    <a href="{{ primary_image.image.url }}" data-fancybox="product-gallery">
                        <img src="{{ primary_image.image.url }}" alt="{{ primary_image.alt|default:item.name }}">
                    </a>
                {% else %}
                    <div class="product-gallery__placeholder">Нет фото</div>
                {% endif %}
            </div>

            {% if images %}
                <div class="product-gallery__thumbs">
                    {% for image in images %}
                        <a class="product-gallery__thumb{% if forloop.first %} active{% endif %}" href="{{ image.image.url }}" data-fancybox="product-gallery">
                            <img src="{{ image.image.url }}" alt="{{ image.alt|default:item.name }}">
                        </a>
                    {% endfor %}
                </div>
            {% endif %}
        </section>

        <section class="product-summary" aria-label="Информация о товаре">
            <p class="product-summary__category">
                {{ item.category.name }}{% if item.subcategory %} / {{ item.subcategory.name }}{% endif %}
            </p>
            <h1 class="product-summary__title">{{ item.name }}</h1>

            <div class="product-summary__meta">
                <div class="product-summary__price-block">
                    <span class="product-summary__price{% if item.has_discount %} product-summary__price--discount{% endif %}">
                        {{ item.display_price }} руб.
                    </span>
                    {% if item.has_discount %}
                        <span class="product-summary__price-original">{{ item.price }} руб.</span>
                    {% endif %}
                </div>
                <span class="product-summary__availability {% if item.is_available %}available{% else %}unavailable{% endif %}">
                    {% if item.is_available %}В наличии{% else %}Нет в наличии{% endif %}
                </span>
            </div>

            {% with colors=item.colors.all %}
            {% if colors %}
                <div class="product-summary__swatches" aria-label="Цвета товара">
                    {% for color in colors %}
                        <span
                            class="product-summary__swatch"
                            style="background: {{ color.hex_code }};"
                            title="{{ color.name }}"
                            data-color-id="{{ color.id }}"
                        ></span>
                    {% endfor %}
                </div>
            {% endif %}
            {% endwith %}

            {% if item.description %}
                <div class="product-summary__description">{{ item.description|linebreaksbr }}</div>
            {% endif %}

            <div class="product-summary__actions">
                {% if item.id in cart_item_ids %}
                    <a class="product-summary__button product-summary__button--primary product-summary__button--link" href="{% url 'orders:cart' %}">
                        Перейти в корзину
                    </a>
                {% elif request.user.is_authenticated %}
                    <form method="post" action="{% url 'orders:add' %}" class="product-summary__cart-form">
                        {% csrf_token %}
                        <input type="hidden" name="item_id" value="{{ item.id }}">
                        <input type="hidden" name="next" value="{{ request.get_full_path }}">
                        <input type="hidden" name="color_id" id="selected-color-id" value="">
                        <button class="product-summary__button product-summary__button--primary" type="submit" {% if not item.is_available %}disabled{% endif %}>
                            В корзину
                        </button>
                    </form>
                {% else %}
                    <a
                        class="product-summary__button product-summary__button--primary product-summary__button--link"
                        href="{% url 'users:login' %}?next={{ request.get_full_path|urlencode }}"
                        {% if not item.is_available %}aria-disabled="true"{% endif %}
                    >
                        В корзину
                    </a>
                {% endif %}
                <button class="product-summary__button product-summary__button--secondary" type="button">Купить</button>
            </div>
        </section>
    </main>

    {% include "_fragments/footer.html" %}
{% endblock %}

{% block add_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        Fancybox.bind('[data-fancybox="product-gallery"]');

        (function () {
            var swatches = document.querySelectorAll('.product-summary__swatch[data-color-id]');
            var colorInput = document.getElementById('selected-color-id');
            var cartBtn = document.querySelector('.product-summary__button--primary[type="submit"]');

            if (!swatches.length || !colorInput) { return; }

            if (cartBtn) { cartBtn.disabled = true; }

            swatches.forEach(function (swatch) {
                swatch.addEventListener('click', function () {
                    swatches.forEach(function (s) { s.classList.remove('product-summary__swatch--active'); });
                    this.classList.add('product-summary__swatch--active');
                    colorInput.value = this.dataset.colorId || '';
                    if (cartBtn) { cartBtn.disabled = false; }
                });
            });
        }());
    });
</script>
{% endblock %}