templates/application/projects/item.html.twig line 1

Open in your IDE?
  1. {% extends 'application/layout.html.twig' %}
  3. {% block content %}
  4.     <main class="main">
  5.         <div class="breadcrumb">
  6.             <div class="container">
  7.                 <ol class="breadcrumb__list">
  8.                     <li class="breadcrumb__item"><a href="{{ path('home') }}" class="breadcrumb__link">Главная</a></li>
  9.                     <li class="breadcrumb__item"><a href="{{ path('gallery') }}" class="breadcrumb__link">Галерея проектов</a></li>
  10.                     <li class="breadcrumb__item active" aria-current="page">{{ item.name(app.request.locale) }}</li>
  11.                 </ol>
  12.             </div>
  13.         </div>
  15.         <div class="page page--project">
  16.             <div class="container">
  17.                 <div class="page__header">
  18.                     <h1 class="page__title">{{ item.name(app.request.locale) }}</h1>
  19.                 </div>
  21.                 <div class="project__row">
  22.                     <div class="project__main">
  23.                         <div class="project-promo swiper a-carousel-single nav-inside">
  24.                             <div class="swiper-wrapper">
  25.                                 {% for image in item.images %}
  26.                                     {% set imageNumber = loop.index %}
  27.                                     <div class="swiper-slide">
  28.                                         <div class="project-promo__photo">
  29.                                             {{ include('application/partial/picture.html.twig', {image: image, width: 929, height: 629}) }}
  30.                                         </div>
  31.                                         {% for projectProduct in item.products %}
  32.                                             {% if projectProduct.imageNumber == imageNumber %}
  33.                                                 <div class="project-promo__tooltip item-tooltip" style="left: {{ projectProduct.x / 9.3 }}%; top: {{ projectProduct.y / 6.3 }}%;">
  34.                                                     <div class="item-tooltip__toggle a-tooltip">
  35.                                                         <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>
  36.                                                     </div>
  37.                                                     <div class="item-tooltip__menu">
  38.                                                         <button class="item-tooltip__close a-tooltip"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.146 3.146a.5.5 0 0 1 .708 0l9 9a.5.5 0 0 1-.708.708l-9-9a.5.5 0 0 1 0-.708z"></path><path d="M12.854 3.146a.5.5 0 0 0-.708 0l-9 9a.5.5 0 0 0 .708.708l9-9a.5.5 0 0 0 0-.708z"></path></svg></button>
  39.                                                         <div class="item-tooltip__photo">
  40.                                                             {{ include('application/partial/picture.html.twig', {image: projectProduct.product.image, width: 50, height: 50}) }}
  41.                                                         </div>
  42.                                                         <div class="item-tooltip__detail">
  43.                                                             <div class="item-tooltip__title"><a href="{{ documentUrl(projectProduct.product) }}">{{ projectProduct.product.name(app.request.locale) }}</a></div>
  44.                                                             <div class="item-tooltip__price"><span class="item-tooltip__value">{{ projectProduct.product.price|number_format(2, '.', ' ') }}</span> ₽ за шт.</div>
  45.                                                             <div class="item-tooltip__descr">{{ projectProduct.shortText }}</div>
  46.                                                         </div>
  47.                                                     </div>
  48.                                                 </div>
  49.                                             {% endif %}
  50.                                         {% endfor %}
  51.                                     </div>
  52.                                 {% endfor %}
  53.                             </div>
  54.                             <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>
  55.                             <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>
  56.                         </div>
  57.                     </div>
  58.                     <div class="project__sidebar">
  59.                         <div class="box project__detail">
  60.                             <h3 class="project__title">Описание проекта</h3>
  61.                             <div class="project__descr">{{ item.shortText(app.request.locale)|raw }}</div>
  62.                             <div class="param-tbl">
  63.                                 {% for projectProduct in item.products %}
  64.                                     <div class="param-tbl__item">
  65.                                         <div class="param-tbl__param">{{ projectProduct.product.name(app.request.locale) }}</div>
  66.                                         <div class="param-tbl__value"><span class="price__value">{{ projectProduct.amount|number_format(2, '.', ' ') }}</span> <span class="price__unit">₽</span></div>
  67.                                     </div>
  68.                                 {% endfor %}
  69.                                 <div class="param-tbl__item project__price">
  70.                                     <div class="param-tbl__param">Итого</div>
  71.                                     <div class="param-tbl__value">
  72.                                         <span class="price__value">{{ item.amount|number_format(2, '.', ' ') }}</span>
  73.                                         <span class="price__unit">₽</span>
  74.                                     </div>
  75.                                 </div>
  76.                             </div>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         </div>
  83.         <div class="section">
  84.             <div class="container">
  85.                 <div class="section__item section__item--md">
  86.                     <h2 class="product-add__title">Товары из проекта</h2>
  87.                     <div class="product-carousel swiper a-carousel-product nav-right">
  89.                         <div class="swiper-wrapper">
  90.                             {% for projectProduct in item.products %}
  91.                                 {% if projectProduct.product.active %}
  92.                                     <div class="swiper-slide">
  93.                                         {{ include('application/catalog/product-block.html.twig', {product: projectProduct.product}) }}
  94.                                     </div>
  95.                                 {% endif %}
  96.                             {% endfor %}
  98.                         </div>
  99.                         <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>
  100.                         <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>
  101.                     </div>
  102.                 </div>
  103.                 {% if otherProject|length %}
  104.                     <div class="section__item section__item--md">
  105.                         <h2 class="product-add__title">Другие проекты</h2>
  106.                         <div class="project__carousel swiper a-carousel-projects-inside nav-right">
  107.                             <div class="swiper-wrapper">
  108.                                 {% for project in otherProject %}
  110.                                     <div class="swiper-slide {% if loop.index0 % 5 == 0 %}project__column--lg{% endif %}">
  111.                                         {{ include('application/projects/project-block.html.twig') }}
  112.                                     </div>
  114.                                 {% endfor %}
  115.                             </div>
  116.                             <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>
  117.                             <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>
  118.                         </div>
  119.                     </div>
  120.                 {% endif %}
  121.             </div>
  122.         </div>
  124.     </main>
  125. {% endblock %}
  128. {% block scripts %}
  131. <script>
  132.     $('.a-tooltip').on('click', function() {
  133.         $(this).closest('.item-tooltip').toggleClass('active');
  134.         return false;
  135.     });
  136. </script>
  138. {% endblock %}