product.html

{% extends 'layout/inner_page.html' %}

{% load pages_extras %}
{% load se_extras %}

{% block content %}
  <div itemscope itemtype="https://schema.org/Product" class="page-product custom-checkbox">
    <p class="hidden" itemprop="description">
      {% with description=product.page.display.description %}
        {% if description %}
          {{ description }}
        {% else %}
          {{ product.name }}
        {% endif %}
      {% endwith %}
    </p>
    <div class="hidden" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      <a href="{{ product.url }}" itemprop="url"></a>
      <span itemprop="price">{{ product.price|humanize_price }}</span>
      <span itemprop="priceCurrency">RUB</span>
      <link itemprop="availability"
            href="https://schema.org/{{ product.in_stock | yesno:'InStock,PreOrder' }}">
    </div>

    {% breadcrumbs_with_siblings page separator='' %}
    <h1 class="product-h1" itemprop="name">{{ product.page.display.h1 }}</h1>
    <span class="product-article">Арт. {{ product.vendor_code }}</span>

    <div class="product-top">
      <div class="product-images clearfix" id="product-images">
        {% include 'catalog/product_images.html' with product=product page=page only %}
      </div>

      <div class="product-price-wrapper" id="product-price">
        <p class="product-label-price-retail">Розничная цена:</p>
        <p class="product-price active">{{ product.price|humanize_price }} {{ product|show_price_in_units }}</p>

        {% include 'catalog/product_in_stock.html' %}

        <div class="product-price-btn-wrapper">
          <input class="input-switcher input-number js-touchspin" id="product-count"
                 type="number" min="1" value="1">
        </div>

        <button class="btn btn-blue btn-to-basket js-to-cart-on-product-page" id="btn-to-basket"
                data-id="{{ product.id }}" data-name="{{ product.name }}"
                data-category="{{ product.category.name }}"
                data-brand="{{ product.get_brand_name }}">В корзину</button>

        <p class="product-one-click">Купить в один клик</p>
        <input class="form-control product-one-click-phone js-masked-phone" id="input-one-click-phone"
               placeholder="+7 (999) 000 00 00" type="tel">
        <button class="btn btn-grey btn-order" id="btn-one-click-order" type="button" disabled>Заказать</button>

        <p class="product-additional">
          Менеджер позвонит, уточнит все детали, проверит
          наличие товара на складе и оформит заказ на ваше имя.
        </p>

        <div class="ya-share2" data-services="vkontakte,facebook,whatsapp,telegram,viber"></div>
      </div>

      <div class="pr-chars">
        <div class="pr-chars-order">
          {% include 'catalog/order_notice.html' %}
        </div>
      </div>
    </div>

    {% if product.page.content or group_tags_pairs %}
      <div class="product-bottom">
        {% if product.page.content %}
          <div class="product-desc">
            <h3 class="product-desc-title">Описание</h3>
            <p class="product-text">
              {% include 'layout/toggle_content.html' with content=product.page.content %}
            </p>
          </div>
        {% endif %}

        {% if group_tags_pairs %}
          <div class="product-tags">
            <h3 class="product-tags-title">Характеристики</h3>
            <table class="product-tags-table">
              {% for group, tags in group_tags_pairs %}
                <tr class="table-tr">
                  <td class="table-td">{{ group }}:</td>
                  <td class="table-td">
                    {% for tag in tags %}
                      <a href="{% url 'category' slug=product.category.page.slug tags=tag.slug %}">{{ tag }}</a>&#32;
                    {% endfor %}
                  </td>
                </tr>
              {% endfor %}
            </table>
          </div>
        {% endif %}
      </div>
    {% endif %}

    {% include 'catalog/product_delivery.html' %}
    {% comment %}
      @todo #505:30m Create slider for product's siblings.
       Use slick.js to create slider.
    {% endcomment %}
    {% include 'layout/tile_products.html' %}
    {% include 'catalog/product_feedback.html' %}
  </div>
{% endblock %}

{% block modals %}
  {{ block.super }}
  {% include 'catalog/product_feedback_modal.html' %}
{% endblock %}