templates/application/catalog/product.html.twig line 1

Open in your IDE?
  1. {% extends 'application/layout.html.twig' %}
  2. {% block content %}
  3.     <main class="main">
  4.         <div class="breadcrumb">
  5.             <div class="container">
  6.                 <ol class="breadcrumb__list">
  7.                     <li class="breadcrumb__item"><a href="{{ path('home') }}" class="breadcrumb__link">Главная</a></li>
  8.                     <li class="breadcrumb__item"><a href="{{ path('catalog') }}" class="breadcrumb__link">{{ catalogPage.name(app.request.locale) }}</a></li>
  9.                     {% if category and category.parent and category.parent.active %}
  10.                         <li class="breadcrumb__item"><a href="{{ documentUrl(category.parent) }}" class="breadcrumb__link">{{ category.parent.name(app.request.locale) }}</a></li>
  11.                     {% endif %}
  12.                     {% if category and category.active %}
  13.                         <li class="breadcrumb__item"><a href="{{ documentUrl(category) }}" class="breadcrumb__link">{{ category.name(app.request.locale) }}</a></li>
  14.                     {% endif %}
  15.                     <li class="breadcrumb__item active" aria-current="page">{{ product.name(app.request.locale) }}</li>
  16.                 </ol>
  17.             </div>
  18.         </div>
  20.         <div class="page product">
  21.             <div class="container">
  22.                 <h1 class="product__title product__title--mobile">{{ product.name(app.request.locale) }}</h1>
  23.                 {% if product.advantages|length %}
  24.                     <div class="product__tags">
  25.                         {% for advantage in product.advantages %}
  26.                             <div class="product__tag">
  27.                                 {% if advantage.iconShort %}
  28.                                 <img src="/{{ advantage.iconShort }}" alt="{{ advantage.name }}">
  29.                                 {% endif %}
  30.                                 <span class="product__tag-text">
  31.                                     {{ advantage.name }}
  32.                                 </span>
  33.                             </div>
  34.                         {% endfor %}
  35.                     </div>
  36.                 {% endif %}
  37.                 <div class="product__row">
  38.                     <div class="product__main">
  39.                         <div class="product__photo">
  40.                             <div class="product__main-photo">
  41.                                 {% if product.oldPrice %}
  42.                                     <span class="discount-percent">{{ discountPercent(product.oldPrice, product.price) }}%</span>
  43.                                 {% endif %}
  44.                                 <div class="swiper a-photo-main">
  45.                                     <div class="swiper-wrapper">
  46.                                         <div class="swiper-slide">
  47.                                             <a href="{{ resizeImage(product.image) }}" data-fancybox="productPhoto" class="product__img" aria-label="Увеличить изображение">
  48.                                                 {{ include('application/partial/picture.html.twig', {image: product.image, width: 761, height: 515}) }}
  49.                                             </a>
  50.                                         </div>
  52.                                         {% for image in product.images %}
  53.                                             <div class="swiper-slide">
  54.                                                 <a href="{{ resizeImage(image) }}" data-fancybox="productPhoto" class="product__img" aria-label="Увеличить изображение">
  55.                                                     {{ include('application/partial/picture.html.twig', {image: image, width: 761, height: 515}) }}
  56.                                                 </a>
  57.                                             </div>
  58.                                         {% endfor %}
  59.                                         {% for video in videos %}
  60.                                             <div class="swiper-slide">
  61.                                                 <div class="video">
  62.                                                     <div class="video__mask"></div>
  63.                                                     {{ video|raw }}
  64. {#                                                    <lite-youtube videoid="{{ video|raw }}"></lite-youtube>#}
  65.                                                 </div>
  66.                                             </div>
  67.                                         {% endfor %}
  68.                                     </div>
  69.                                     {% if product.images|length %}
  70.                                         <div class="btn-prev"><svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 12.867a.536.536 0 0 1-.708 0l-5-4.546a.426.426 0 0 1 0-.642l5-4.546a.536.536 0 0 1 .708 0 .426.426 0 0 1 0 .643L6.207 8l4.647 4.224a.426.426 0 0 1 0 .643z"/></svg></div>
  71.                                         <div class="btn-next"><svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.146 3.133a.536.536 0 0 1 .708 0l5 4.546a.426.426 0 0 1 0 .642l-5 4.546a.536.536 0 0 1-.708 0 .426.426 0 0 1 0-.643L9.793 8 5.146 3.776a.426.426 0 0 1 0-.643z"/></svg></div>
  72.                                     {% endif %}
  73.                                 </div>
  74.                             </div>
  75.                             <div class="product__thumbs-photo">
  76.                                 <div class="swiper a-photo-thumbs">
  77.                                     <div class="swiper-wrapper">
  78.                                         <div class="swiper-slide">
  79.                                             {{ include('application/partial/picture.html.twig', {image: product.image, width: 93, height: 93}) }}
  80.                                         </div>
  82.                                         {% for image in product.images %}
  83.                                             <div class="swiper-slide">
  84.                                                 {{ include('application/partial/picture.html.twig', {image: image, width: 93, height: 93}) }}
  85.                                             </div>
  86.                                         {% endfor %}
  87.                                         {% for video in videos %}
  88.                                             <div class="swiper-slide">
  89.                                                 <span class="play-parent">
  90.                                                     {% if product.images|length %}
  91.                                                         {{ include('application/partial/picture.html.twig', {image: product.images|last, width: 93, height: 93}) }}
  92.                                                     {% endif %}
  93.                                                     <span class="product__play play"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5zM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16z" fill="#fff"/><path d="M13.528 11.118a1 1 0 0 1 1.027.05l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 13 20v-8a1 1 0 0 1 .528-.882zM15 13.868v4.263L18.197 16 15 13.868z" fill="#fff"/></svg></span>
  94.                                                 </span>
  95.                                             </div>
  96.                                         {% endfor %}
  97.                                     </div>
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  101.                         <div class="product__param">
  102.                             <!--
  103.                             <div class="product__param-item">
  104.                                 <a href="#" class="item-param">
  105.                                     <span class="item-param__icon"><svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.492 14c-.142 0-.275-.008-.417-.033a2.737 2.737 0 0 1-1.792-1.117 2.874 2.874 0 0 1-.483-2.125l1.517-8.567a.984.984 0 0 1 .4-.641.978.978 0 0 1 .741-.175h.017l3.442.608c.541.1.9.617.816 1.158l-1.525 8.625C6.975 13.058 5.8 14 4.492 14zm-1.709-3.1c-.083.475.034.975.309 1.367.275.383.675.641 1.133.708a1.764 1.764 0 0 0 2-1.425l1.517-8.608h-.009L4.3 2.333 2.783 10.9z"/><path d="M5.267 13.867a.482.482 0 0 1-.467-.334.504.504 0 0 1 .3-.641L13.325 9.9l-1.2-3.283-4.558 1.65a.504.504 0 0 1-.642-.3.504.504 0 0 1 .3-.642l4.558-1.658a.96.96 0 0 1 .759.033.974.974 0 0 1 .516.558v.009l1.2 3.283a1 1 0 0 1-.6 1.275l-8.216 3.008a.648.648 0 0 1-.175.034z"/><path d="M13.25 14H4.5a.501.501 0 0 1-.5-.5c0-.275.225-.5.5-.5h8.75v-2.842c0-.275.225-.5.5-.5s.5.225.5.5V13c0 .55-.45 1-1 1zM4.5 12a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/></svg></span>
  106.                                     <span class="item-param__text">Заказать образец</span>
  107.                                 </a>
  108.                             </div>
  109.                             <div class="product__param-item">
  110.                                 <a href="#" class="item-param">
  111.                                     <span class="item-param__icon"><svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 3.167A.833.833 0 0 0 3.167 4v4a.5.5 0 0 1-1 0V4A1.833 1.833 0 0 1 4 2.167h8A1.833 1.833 0 0 1 13.833 4v8A1.833 1.833 0 0 1 12 13.833H8a.5.5 0 1 1 0-1h4a.833.833 0 0 0 .833-.833V4A.833.833 0 0 0 12 3.167H4z"/><path d="M2.667 10.5a.167.167 0 0 0-.167.167v2.666a.167.167 0 0 0 .167.167h2.666a.167.167 0 0 0 .167-.167v-2.666a.167.167 0 0 0-.167-.167H2.667zm-.825-.658c.219-.22.515-.342.825-.342h2.666A1.167 1.167 0 0 1 6.5 10.667v2.666A1.167 1.167 0 0 1 5.333 14.5H2.667A1.167 1.167 0 0 1 1.5 13.333v-2.666c0-.31.123-.607.342-.825zM2.167 6.667a.5.5 0 0 1 .5-.5h10.666a.5.5 0 0 1 0 1H2.667a.5.5 0 0 1-.5-.5z"/><path d="M6.667 2.167a.5.5 0 0 1 .5.5V8a.5.5 0 0 1-1 0V2.667a.5.5 0 0 1 .5-.5z"/></svg></span>
  112.                                     <span class="item-param__text">Оборудование для товара</span>
  113.                                 </a>
  114.                             </div>
  115.                             <div class="product__param-item">
  116.                                 <a href="#" class="item-param">
  117.                                     <span class="item-param__icon"><svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 3.5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1V11a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V3.5zm12 0h-11V11h11V3.5z"/><path d="M9.688 11.11a.5.5 0 0 1 .702.078l2 2.5a.5.5 0 0 1-.78.624l-2-2.5a.5.5 0 0 1 .078-.702zM6.312 11.11a.5.5 0 0 1 .078.702l-2 2.5a.5.5 0 0 1-.78-.624l2-2.5a.5.5 0 0 1 .702-.078zM8 1a.5.5 0 0 1 .5.5V3a.5.5 0 0 1-1 0V1.5A.5.5 0 0 1 8 1z"/></svg></span>
  118.                                     <span class="item-param__text">Презентация</span>
  119.                                 </a>
  120.                             </div>
  121.                             -->
  123.                         </div>
  124.                     </div>
  125.                     <div class="product__sidebar">
  126.                         {% if product.sku %}
  127.                             <div class="product__art">Артикул: <span>{{ product.sku }}</span></div>
  128.                         {% endif %}
  129.                         {% if product.color %}
  130.                             <div class="product__color">
  131.                                 <span class="color color--lg">Цвет: <span>{% if product.color.image %}<span class="color__photo"><img src="{{ resizeImage(product.color.image, 40, 40) }}" width="40" height="40" alt="{{ product.color.name(app.request.locale) }}" loading="lazy"></span> {% endif %} {{ product.color.name(app.request.locale) }}</span></span>
  132. {#                                <select id="color" class="form__control select-color" style="width: 100%;">#}
  133. {#                                    <option value="{% if product.color.image %}{{ resizeImage(product.color.image, 40, 40) }}{% endif %}">#}
  134. {#                                        {{ product.color.name(app.request.locale) }}#}
  135. {#                                    </option>#}
  136. {#                                </select>#}
  137.                             </div>
  138.                         {% endif %}
  139.                         {{ include('application/catalog/product-properties.html.twig') }}
  140.                         <div class="show-more">
  141.                             <a href="#characteristics">Смотреть все характеристики</a>
  142.                         </div>
  143.                         <div class="interactive">
  144.                             {% if product.calculator %}
  145.                                 <div class="product__param-item">
  146.                                     <a href="{{ path('calc', { id: product.id }) }}{% if product.decorCalculator %}#decor{% endif %}" class="item-param">
  147.                                         <span class="item-param__icon">
  148.                                             <svg class="stroke-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  149.                                                 <path d="M5.5 3V8M8 5.5H3M8 16L6 18M6 18L4 20M6 18L8 20M6 18L4 16M20 6H16M20 18.5H16M20 15.5H16M22 12H2M12 22V2" stroke="#222F59" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  150.                                             </svg>
  151.                                         </span>
  152.                                         <span class="item-param__text">Калькулятор</span>
  153.                                     </a>
  154.                                 </div>
  155.                             {% endif %}
  156.                             {% if product.manual %}
  157.                             <div class="product__param-item">
  158.                                 <a target="_blank" href="{{ fileUrl(product.manual) }}" class="item-param">
  159.                                     <span class="item-param__icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 14a1 1 0 0 1 1-1h22a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z"/><path d="M9 5a3 3 0 0 0-3 3v9a1 1 0 0 0 1 1h5.85v1l.003-1a2 2 0 0 1 1.975 2.275v.004L14 26.064a2 2 0 0 0 3.998 0l-.826-5.785-.001-.004A2 2 0 0 1 19.147 18H25a1 1 0 0 0 1-1V5H9zm3.847 15H7a3 3 0 0 1-3-3V8a5 5 0 0 1 5-5h18a1 1 0 0 1 1 1v13a3 3 0 0 1-3 3h-5.847l.837 5.859c.007.046.01.094.01.141a4 4 0 1 1-8 0c0-.047.003-.095.01-.141L12.847 20z"/><path d="M23 3a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1z"/></svg></span>
  160.                                     <span class="item-param__text">Инструкция по монтажу</span>
  161.                                 </a>
  162.                             </div>
  163.                             {% endif %}
  165.                             {% if product.model %}
  166.                             <div class="product__param-item">
  167.                                 <a target="_blank" href="{{ fileUrl(product.model) }}" class="item-param">
  168.                                     <span class="item-param__icon">
  169.                                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  170.                                             <path d="M4.5795 3.41475C4.64174 3.29019 4.73743 3.18542 4.85586 3.11216C4.97428 3.03891 5.11075 3.00007 5.25 3H18.75C18.8892 3.00007 19.0257 3.03891 19.1441 3.11216C19.2626 3.18542 19.3583 3.29019 19.4205 3.41475L20.9205 6.41475C20.9727 6.51882 20.9999 6.63359 21 6.75V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H4.5C4.10218 21 3.72064 20.842 3.43934 20.5607C3.15804 20.2794 3 19.8978 3 19.5V6.75C3.00012 6.63359 3.02734 6.51882 3.0795 6.41475L4.5795 3.41475ZM5.7135 4.5L4.5 6.927V19.5H19.5V6.927L18.2865 4.5H5.7135Z" fill="#222F59"/>
  171.                                             <path d="M8.29223 13.5411C8.43288 13.4005 8.62361 13.3215 8.82248 13.3215C9.02135 13.3215 9.21209 13.4005 9.35273 13.5411L12.0002 16.1886L14.6477 13.5411C14.7174 13.4714 14.8001 13.4161 14.8912 13.3784C14.9822 13.3407 15.0798 13.3213 15.1784 13.3213C15.2769 13.3213 15.3745 13.3407 15.4655 13.3784C15.5566 13.4161 15.6393 13.4714 15.709 13.5411C15.7787 13.6108 15.8339 13.6935 15.8717 13.7845C15.9094 13.8756 15.9288 13.9732 15.9288 14.0717C15.9288 14.1703 15.9094 14.2678 15.8717 14.3589C15.8339 14.4499 15.7787 14.5326 15.709 14.6023L12.5305 17.7801C12.3898 17.9207 12.1991 17.9997 12.0002 17.9997C11.8014 17.9997 11.6106 17.9207 11.47 17.7801L8.29223 14.6023C8.2225 14.5327 8.16718 14.45 8.12944 14.3589C8.09169 14.2679 8.07227 14.1703 8.07227 14.0717C8.07227 13.9731 8.09169 13.8756 8.12944 13.7845C8.16718 13.6935 8.2225 13.6107 8.29223 13.5411Z" fill="#222F59"/>
  172.                                             <path d="M12 9C12.1989 9 12.3897 9.07902 12.5303 9.21967C12.671 9.36032 12.75 9.55109 12.75 9.75V17.25C12.75 17.4489 12.671 17.6397 12.5303 17.7803C12.3897 17.921 12.1989 18 12 18C11.8011 18 11.6103 17.921 11.4697 17.7803C11.329 17.6397 11.25 17.4489 11.25 17.25V9.75C11.25 9.55109 11.329 9.36032 11.4697 9.21967C11.6103 9.07902 11.8011 9 12 9ZM3 6.75C3 6.55109 3.07902 6.36032 3.21967 6.21967C3.36032 6.07902 3.55109 6 3.75 6H20.25C20.4489 6 20.6397 6.07902 20.7803 6.21967C20.921 6.36032 21 6.55109 21 6.75C21 6.94891 20.921 7.13968 20.7803 7.28033C20.6397 7.42098 20.4489 7.5 20.25 7.5H3.75C3.55109 7.5 3.36032 7.42098 3.21967 7.28033C3.07902 7.13968 3 6.94891 3 6.75Z" fill="#222F59"/>
  173.                                         </svg>
  174.                                     </span>
  175.                                     <span class="item-param__text">Скачать 3D модель</span>
  176.                                 </a>
  177.                             </div>
  178.                             {% endif %}
  179.                         </div>
  180.                     </div>
  181.                     <div class="product__sidebar">
  185.                         <div class="box product__detail">
  186.                             {#
  187.                             <div class="product__price-type dropdown">
  188.                                 <a href="#" class="dropdown__toggle">
  189.                                     За погонный метр
  190.                                     <span class="caret"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.867 5.146a.536.536 0 0 1 0 .708l-4.546 5a.426.426 0 0 1-.642 0l-4.546-5a.536.536 0 0 1 0-.708.426.426 0 0 1 .643 0L8 9.793l4.224-4.647a.426.426 0 0 1 .643 0z"/></svg></span>
  191.                                 </a>
  192.                                 <div class="dropdown__menu">
  193.                                     <ul class="dropdown__list">
  194.                                         <li class="dropdown__item active">
  195.                                             <a href="#" class="dropdown__link">За погонный метр</a>
  196.                                         </li>
  197.                                         <li class="dropdown__item">
  198.                                             <a href="#" class="dropdown__link">За 1 шт.</a>
  199.                                         </li>
  200.                                     </ul>
  201.                                 </div>
  202.                             </div>
  203.                             #}
  205.                             <div class="product__price">
  207.                                 {% set validPrice = cart.validPrice(product) %}
  208.                                 {% if validPrice != product.price %}
  209.                                     {% if validPrice %}
  210.                                         <div class="price">
  211.                                             <span class="price__title">опт.</span>
  212.                                             <span class="price__value">{{ validPrice|number_format(2, '.', ' ') }}</span>
  213.                                             {% if product.oldPrice %}
  214.                                                 <span class="price__value-old">{{ product.oldPrice|number_format(2, '.', ' ') }}</span>
  215.                                             {% endif %}
  216.                                             <span class="price__unit">₽ / шт</span>
  217.                                         </div>
  218.                                         {% if product.soldByMeter and product.rollLength %}
  219.                                             <div class="price">
  220.                                                 <span class="price__value">{{ (validPrice/product.rollLength)|number_format(2, '.', ' ') }}</span>
  221.                                                 <span class="price__unit">₽ за пог. м.</span>
  222.                                             </div>
  223.                                         {% endif %}
  224.                                     {% else %}
  225.                                         <div class="price">
  226.                                             <span class="price__title">Для приема заказа недостаточно информации. Просим Вас обратиться к Вашему менеджеру</span>
  227.                                         </div>
  228.                                     {% endif %}
  229.                                 {% endif %}
  230.                                 <div class="price">
  231.                                     {% if product.oldPrice %}
  232.                                         {% if validPrice != product.price %}
  233.                                             <span class="price__title">ррц.</span>
  234.                                         {% endif %}
  235.                                         <span class="discount-price">
  236.                                             <span class="price__value">{{ product.price|number_format(2, '.', ' ') }}</span>
  237.                                             <span class="price__unit">₽ / шт</span>
  238.                                         </span>
  239.                                         <span class="price__value-old">{{ product.oldPrice|number_format(2, '.', ' ') }}</span>
  240.                                     {% else %}
  241.                                         {% if validPrice != product.price %}
  242.                                             <span class="price__title">ррц.</span>
  243.                                         {% endif %}
  244.                                         <span class="price__value">{{ product.price|number_format(2, '.', ' ') }}</span>
  245.                                         <span class="price__unit">₽ / шт</span>
  246.                                     {% endif %}
  247.                                 </div>
  249.                                 {% if product.soldByMeter and product.rollLength %}
  250.                                     <div class="price">
  251.                                         <span class="price__value">{{ (product.price/product.rollLength)|number_format(2, '.', ' ') }}</span>
  252.                                         {% if product.oldPrice %}
  253.                                             <span class="price__value-old">{{ (product.oldPrice/product.rollLength)|number_format(2, '.', ' ') }}</span>
  254.                                         {% endif %}
  255.                                         <span class="price__unit">₽ / пог. м.</span>
  256.                                     </div>
  257.                                 {% endif %}
  259.                             </div>
  260.                             {% if product.quantity %}
  261.                                 {% if cart.counterpartyId %}
  262.                                     <div class="product__stock">
  263.                                         <div class="stock">В наличии: {{ product.quantity }} шт.</div>
  264.                                     </div>
  265.                                 {% endif %}
  266.                             {% else %}
  267.                                 <div class="product__stock">
  268.                                     <div class="stock disabled">Нет в наличии</div>
  269.                                 </div>
  270.                             {% endif %}
  271.                             {% if product.soldByMeter and product.rollLength  %}
  272.                             <div class="product__note">
  273.                                 Полотно продается в стандартном рулоне {{ product.rollLength }} пог. м.
  274.                             </div>
  275.                             {% endif %}
  276.                             {% if product.quantityInBox %}
  277.                                 <div class="product__pack pack">
  278.                                     <span class="pack__icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.51.953a.987.987 0 0 1 .98 0l5.499 3.093h.002a1.006 1.006 0 0 1 .509.87v6.165H14l.5.003a1.006 1.006 0 0 1-.51.87h-.001L8.49 15.048a.987.987 0 0 1-.982 0l-5.498-3.092-.002-.001a1.007 1.007 0 0 1-.509-.87V4.916a1.006 1.006 0 0 1 .51-.87h.001L7.51.953zm5.99 10.126V4.918a.006.006 0 0 0-.003-.002L8 1.824 2.503 4.916a.006.006 0 0 0-.003.005V11.082l.003.002L8 14.176l5.497-3.092.002-.002.001-.003z"/><path d="M4.562 2.696a.5.5 0 0 1 .68-.196l6.062 3.344a.5.5 0 0 1 .258.437v3.25a.5.5 0 0 1-1 0V6.577L4.758 3.375a.5.5 0 0 1-.196-.679z"/><path d="M1.632 4.419a.5.5 0 0 1 .68-.193l5.742 3.2 5.63-3.198a.5.5 0 0 1 .494.87L8.303 8.434a.5.5 0 0 1-.49.002L1.825 5.099a.5.5 0 0 1-.193-.68z"/><path d="M8.06 7.5a.5.5 0 0 1 .496.504L8.5 14.68a.5.5 0 0 1-1-.008l.056-6.675A.5.5 0 0 1 8.06 7.5z"/></svg></span>
  279.                                     <span class="pach__text">В упаковке {{ product.quantityInBox }} шт.</span>
  280.                                 </div>
  281.                             {% endif %}
  282.                             {# Дополнительный блок с ценой по м² или м.п. в зависимости от настроек категории #}
  283.                             {% if formattedPrice and formattedPrice.calculated_price %}
  284.                                 <div class="price" style="margin-top: 20px; border-top: 1px #eee solid; padding-top: 20px;">
  285.                                     <span class="price__value">{{ formattedPrice.calculated_price|number_format(2, '.', ' ') }}</span>
  286.                                     {% if product.oldPrice %}
  287.                                         {% set oldCalculatedPrice = product.oldPrice * formattedPrice.calculated_price / product.price %}
  288.                                         <span class="price__value-old">{{ oldCalculatedPrice|number_format(2, '.', ' ') }}</span>
  289.                                     {% endif %}
  290.                                     <span class="price__unit">{{ formattedPrice.calculated_unit }}</span>
  291.                                 </div>
  292.                             {% endif %}
  293.                             {% if product.quantity == 0 %}
  294.                                 <div class="price-divider"></div>
  295.                                 <div class="price">
  296.                                     <span class="price__title price_warning">Данный товар закончился, если вы хотите заказать точно такой же, оставьте заявку и менеджер перезвонит вам в ближайшее время и оповестит вас о сроках поступления</span>
  297.                                 </div>
  298.                             {% endif %}
  299.                         </div>
  301.                         <div class="product__control add-to-cart-block">
  302.                             {% if product.quantity %}
  303.                                 <div class="count count--lg product-block-count">
  304.                                     <button data-value="-1" class="count__minus" aria-label="Уменьшить количество"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 8a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1z"/></svg></button>
  305.                                     <input type="text" class="count__control" value="1" aria-label="Указать количество">
  306.                                     <button data-value="1" class="count__plus" aria-label="Увеличить количество"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 8a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1z"/><path d="M8 1a1 1 0 0 1 1 1v12a1 1 0 1 1-2 0V2a1 1 0 0 1 1-1z"/></svg></button>
  307.                                 </div>
  309.                                 {% if cart.has(product.id) %}
  310.                                     <button class="btn btn--lg btn--buy add-to-cart-button btn--success">В корзине {{ cart.quantity(product.id) }}&nbsp;шт</button>
  311.                                 {% else %}
  312.                                     <button data-id="{{ product.id }}" class="btn btn--lg btn--buy add-to-cart-button">В корзину</button>
  313.                                 {% endif %}
  315.                             {% else %}
  316.                                 <button class="btn btn--lg btn--buy" data-fancybox="feedback2" data-src="#requestCall">Оставить заявку</button>
  317.                             {% endif %}
  319.                             <button id="compare" class="btn {% if not cart.inCompareList(product.id) %}btn--second{% else %}in-compare-list{% endif %} btn--lg btn--square" aria-label="Сравнение товара">
  320.                                 <span class="btn__icon"><svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 4a1 1 0 0 1 1 1v22a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1z"/><path d="M12 27a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1zM25.976 6.783a1 1 0 0 1-.759 1.193l-18 4a1 1 0 0 1-.434-1.952l18-4a1 1 0 0 1 1.193.759z"/><path d="M7 10a1 1 0 0 1 .928.629l4 10c.048.118.072.244.072.371 0 1.561-.91 2.597-1.934 3.194C9.072 24.773 7.891 25 7 25c-.89 0-2.072-.227-3.066-.806C2.91 23.597 2 22.56 2 21a1 1 0 0 1 .072-.371l4-10A1 1 0 0 1 7 10zM4.008 21.172c.055.562.386.975.933 1.294.631.367 1.45.534 2.059.534.61 0 1.428-.166 2.059-.534.547-.32.878-.732.933-1.294L7 13.692l-2.992 7.48zM25 6a1 1 0 0 1 .928.629l4 10c.048.118.072.244.072.371 0 1.561-.91 2.597-1.934 3.194-.994.579-2.175.806-3.066.806-.89 0-2.072-.227-3.066-.806C20.91 19.597 20 18.56 20 17c0-.127.024-.253.072-.371l4-10A1 1 0 0 1 25 6zm-2.992 11.172c.056.562.386.975.933 1.294.631.367 1.45.534 2.059.534.61 0 1.428-.166 2.059-.534.547-.32.877-.732.933-1.294L25 9.692l-2.992 7.48z"/></svg></span>
  321.                             </button>
  322.                         </div>
  323.                         <div class="product__delivery">
  324.                             <div class="product__delivery-item">
  325.                                     <div class="icon">
  326.                                         <img src="/img/svg/delivery-truck.svg" alt="">
  327.                                     </div>
  328.                                     <div class="text">
  329.                                         <span>Доставка по СПБ и Мск: 1 день </span>
  330.                                         <span>Бесплатно по Мск и МО от 20 000 ₽ по Санкт-Петербургу от 10 000 ₽ </span>
  331.                                     </div>
  332.                             </div>
  333.                             <div class="product__delivery-item">
  334.                                     <div class="icon">
  335.                                         <img src="/img/svg/delivery-truck.svg" alt="">
  336.                                     </div>
  337.                                     <div class="text">
  338.                                         <p>Доставка по России от 7 дней, от 250 ₽ </p>
  339.                                     </div>
  340.                             </div>
  341.                         </div>
  342.                     </div>
  343.                 </div>
  344.                 {% if product.advantages|length %}
  345.                 <div class="product-advantages">
  346.                     <div class="product-advantages__header">
  347.                         <h2>Преимущества</h2>
  348.                     </div>
  349.                     {% for advantage in product.advantages %}
  350.                         <div class="product-advantages__item">
  351.                             {% if advantage.iconFull %}
  352.                             <div class="product-advantages__icon">
  353.                                 <img src="/{{ advantage.iconFull }}" alt="{{ advantage.name }}">
  354.                             </div>
  355.                             {% endif %}
  356.                             <div class="product-advantages__text">
  357.                                 <h3>{{ advantage.name }}</h3>
  358.                                 {% if advantage.description %}
  359.                                 <p>{{ advantage.description }}</p>
  360.                                 {% endif %}
  361.                             </div>
  362.                         </div>
  363.                     {% endfor %}
  364.                 </div>
  365.                 {% endif %}
  366.                 <div class="product__info">
  367.                     <div class="product__column">
  368.                         <h3>О товаре</h3>
  369.                         <div class="product__descr">
  370.                             {{ product.text(app.request.locale)|raw }}
  371.                         </div>
  372.                     </div>
  374.                     {% if product.properties1C|length
  375.                         or product.brandName or product.manufacturerName or product.countryName
  376.                     %}
  377.                     <div class="product__column" id="characteristics">
  378.                         <h3>Характеристики</h3>
  379.                         <div class="param-tbl">
  380.                             {# Сначала выводим свойства с orderNumber через include #}
  381.                             {{ include('application/catalog/product-properties.html.twig') }}
  382.                             
  383.                             {# Затем статические поля #}
  384.                             {% if product.brandName %}
  385.                                 <div class="param-tbl__item">
  386.                                     <div class="param-tbl__param">Бренд:</div>
  387.                                     <div class="param-tbl__value">{{ product.brandName }}</div>
  388.                                 </div>
  389.                             {% endif %}
  390.                             {% if product.manufacturerName %}
  391.                                 <div class="param-tbl__item">
  392.                                     <div class="param-tbl__param">Производитель:</div>
  393.                                     <div class="param-tbl__value">{{ product.manufacturerName }}</div>
  394.                                 </div>
  395.                             {% endif %}
  396.                             {% if product.countryName %}
  397.                                 <div class="param-tbl__item">
  398.                                     <div class="param-tbl__param">Страна происхождения:</div>
  399.                                     <div class="param-tbl__value">{{ product.countryName }}</div>
  400.                                 </div>
  401.                             {% endif %}
  403.                         </div>
  404.                     </div>
  405.                     {% endif %}
  406.                 </div>
  408.                 <div class="product-calculator">
  409.                     <div class="product-calculator__text">
  410.                         <span>Калькулятор</span>
  411.                         <p>Не знаете сколько потребуется плинуса или клея? <br> Воспользуйтесь нашим калькулятором</p>
  412.                     </div>
  413.                     <div class="product-calculator__item">
  414.                         <a class="product-calculator__item-btn" href="/calc-decor?id={{ product.id }}"><img src="/img/svg/calc.svg" alt="">Калькулятор плинуса</a>
  415.                     </div>
  416.                     <div class="product-calculator__item glue">
  417.                         <a class="product-calculator__item-btn" href="/calc?id={{ product.id }}"><img src="/img/svg/calc.svg" alt="">Калькулятор расхода клея</a>
  418.                     </div>
  419.                 </div>
  421.                 {% if product.articles|length %}
  422.                     <div class="product-calculator product-calculator--article">
  423.                         {% for article in product.articles %}
  424.                             <div class="product-calculator__text">
  425.                                 <span>Статья</span>
  426.                                 <p>{{ article.name(app.request.locale) }}</p>
  427.                                 <a href="{{ documentUrl(article) }}" class="article-btn">Читать</a>
  428.                             </div>
  429.                             <div class="product-calculator__item article" style="background-image: url('/{{ article.image }}');">
  430.                             </div>
  431.                         {% endfor %}
  432.                     </div>
  433.                 {% endif %}
  434.                 <div class="product-video">
  435.                     <div class="product-video__wrapper">
  436.                         <div class="current-video-title">Монтаж плинтуса</div>
  437.                         <iframe width="560" height="315" src="https://www.youtube.com/embed/CR7B6emI_54?si=TVNdOTvtuzDLnS3W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  438.                         <div class="more-video">
  439.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  440.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  441.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  442.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  443.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  444.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  445.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  446.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  447.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  448.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  449.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  450.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  451.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  452.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  453.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  454.                             <a href="#"><img src="/img/more-video.png" alt=""><span>Монтаж плинтуса</span></a>
  455.                         </div>
  456.                     </div>
  458.                 </div>
  460.             </div>
  461.         </div>
  464.         <div class="section">
  465.             <div class="container">
  466.                 {{ include('application/catalog/watched-products.html.twig') }}
  468.                 {% if product.activeProducts|length %}
  469.                     <div class="section__item section__item--md">
  470.                         <h2 class="product-add__title">С этим товаром часто покупают</h2>
  471.                         <div class="product-carousel swiper a-carousel-product nav-right">
  472.                             <div class="swiper-wrapper">
  473.                                 {% for p in product.products %}
  474.                                     <div class="swiper-slide">
  475.                                         {{ include('application/catalog/product-block.html.twig', {product: p}) }}
  476.                                     </div>
  477.                                 {% endfor %}
  478.                             </div>
  480.                             {% if product.products|length > 1 %}
  481.                                 <div class="btn-prev"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 12.867a.536.536 0 0 1-.708 0l-5-4.546a.426.426 0 0 1 0-.642l5-4.546a.536.536 0 0 1 .708 0 .426.426 0 0 1 0 .643L6.207 8l4.647 4.224a.426.426 0 0 1 0 .643z"/></svg></div>
  482.                                 <div class="btn-next"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.146 3.133a.536.536 0 0 1 .708 0l5 4.546a.426.426 0 0 1 0 .642l-5 4.546a.536.536 0 0 1-.708 0 .426.426 0 0 1 0-.643L9.793 8 5.146 3.776a.426.426 0 0 1 0-.643z"/></svg></div>
  483.                             {% endif %}
  484.                         </div>
  485.                     </div>
  486.                 {% endif %}
  488.                 <div class="product-video">
  489.                     <div class="product-video__wrapper">
  490.                         <div class="current-video-title">Красим напольный плинтус правильно</div>
  491.                         <iframe width="560" height="315" src="https://www.youtube.com/embed/CR7B6emI_54?si=TVNdOTvtuzDLnS3W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  492.                         <div class="current-video-title bottom">Рекомендуем использовать краску не содержащую растворителей</div>
  493.                     </div>
  494.                 </div>
  495.                 <div class="product-more_questions">
  496.                     <img src="/img/product-article.png" alt="">
  497.                     <div class="product-more_questions-text">
  498.                         <h3>Остались вопросы?</h3>
  499.                         <p>Свяжитесь с нами и мы вам обязательно поможем. Оперативно ответим в течении 24 часов</p>
  500.                         <button class="btn" data-fancybox="feedback2" data-src="#requestCall">задать вопрос</button>
  501.                     </div>
  502.                 </div>
  503.             </div>
  504.         </div>
  506.     </main>
  508. {% endblock %}
  510. {% block scripts %}
  511.     <script>
  512.         (function () {
  513.             var busy = false;
  515.             // Обработчик для сравнения товаров
  516.             $('#compare').click(function () {
  517.                 if (busy) {
  518.                     return false;
  519.                 }
  521.                 if ($(this).hasClass('in-compare-list')) {
  522.                     location.href = '{{ path('compare') }}';
  523.                     return false;
  524.                 }
  527.                 busy = true;
  528.                 $.ajax({
  529.                     type: "POST",
  530.                     url: '{{ path('compare-ajax') }}',
  531.                     data: {
  532.                         id: '{{ product.id }}',
  533.                     },
  534.                     success: function (data) {
  535.                         $('#compare').addClass('in-compare-list').removeClass('btn--second');
  536.                         $('#compareDiv').html(data.html);
  537.                     }
  538.                 }).fail(function() {
  539.                     alertPopup('Ошибка');
  540.                 }).always(function() {
  541.                     busy = false;
  542.                 });
  544.                 return false;
  545.             });
  547.             // Плавный скролл к характеристикам
  548.             $('.show-more a').click(function (e) {
  549.                 e.preventDefault();
  550.                 
  551.                 var target = $(this.getAttribute('href'));
  552.                 if (target.length) {
  553.                     $('html, body').animate({
  554.                         scrollTop: target.offset().top - 20
  555.                     }, 600);
  556.                     
  557.                     // Обновляем URL без перезагрузки страницы
  558.                     if (history.pushState) {
  559.                         history.pushState(null, null, this.getAttribute('href'));
  560.                     }
  561.                 }
  562.                 
  563.                 return false;
  564.             });
  566.             // CSS для плавного скролла
  567.             $('html').css('scroll-behavior', 'smooth');
  568.         })();
  570.     </script>
  571. {% endblock %}