templates/application/compare/index.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 active" aria-current="page">Сравнение товаров</li>
  10.                 </ol>
  11.             </div>
  12.         </div>
  14.         <div class="page">
  15.             <div class="container">
  16.                 {% if products|length %}
  17.                     <div class="page__header">
  18.                         <h1 class="page__title">Сравнение товаров</h1>
  19.                     </div>
  21.                     <div class="tabs">
  22.                         <div class="tabs__header tabs__header--short">
  23.                             <ul class="tabs__nav" id="chooseShop" role="tablist">
  24.                                 <li class="tabs__item active" role="presentation">
  25.                                     <button class="tabs__link" data-tab="tab">Все</button>
  26.                                 </li>
  27.                                 {% for categoryId, list in productsByCategory %}
  28.                                     {% if categoryId %}
  29.                                         <li class="tabs__item" role="presentation">
  30.                                             <button class="tabs__link" data-tab="tab{{ categoryId }}">{{ categories[categoryId].name(app.request.locale) }}: {{ list|length }}</button>
  31.                                         </li>
  32.                                     {% endif %}
  33.                                 {% endfor %}
  34.                             </ul>
  35.                         </div>
  36.                         <div class="tabs__content">
  37.                             {% for categoryId, list in productsByCategory %}
  38.                                 <div class="tabs__pane {% if loop.index == 1 %}show{% endif %}" id="tab{{ categoryId }}">
  39.                                     {{ include('application/compare/product-list.html.twig', {products: list, categoryId: categoryId, differentColor: differentColor[categoryId]}) }}
  40.                                 </div>
  41.                             {% endfor %}
  42.                         </div>
  43.                     </div>
  44.                 {% else %}
  45.                     Товары не выбраны
  46.                 {% endif %}
  47.             </div>
  48.         </div>
  50.     </main>
  52. {% endblock %}
  54. {% block scripts %}
  55. <script>
  56.     $('.show-difference').change(function () {
  57.         let parent = $(this).closest('.comparison');
  58.         if ($(this).is(':checked')) {
  59.             parent.find('.comparison__group').hide();
  60.             parent.find('.different').show();
  61.         } else {
  62.             parent.find('.comparison__group').show();
  63.         }
  64.     });
  66.     /*-------------------------------------------------------------------------------
  67.       Comparison
  68.     -------------------------------------------------------------------------------*/
  70.     const compareItems = document.querySelectorAll('.comparison');
  71.     const swiperParams = {
  72.         slidesPerView: 'auto',
  73.         watchSlidesProgress: true,
  74.         freeMode: true,
  75.         speed: 1000,
  76.         breakpoints: {
  77.             768: {
  78.                 slidesPerView: '2',
  79.                 freeMode: true,
  80.             },
  81.             992: {
  82.                 slidesPerView: '3',
  83.                 freeMode: false,
  84.             },
  85.             1200: {
  86.                 slidesPerView: '4',
  87.                 freeMode: false,
  88.                 watchSlidesProgress: true,
  89.             }
  90.         },
  91.     };
  92.     compareItems.forEach(compareItem => {
  93.         const compareItemMain = compareItem.querySelector('.a-carousel-comparison');
  94.         const compareItemData = compareItem.querySelectorAll('.a-carousel-comparison-data');
  95.         const comparePrev = compareItem.querySelector('.btn-prev');
  96.         const compareNext = compareItem.querySelector('.btn-next');
  97.         const swiperComparisonData = [];
  98.         compareItemData.forEach(item => {
  99.             swiperComparisonData.push(new Swiper(item, swiperParams));
  100.         })
  101.         const swiperComparison = new Swiper(compareItemMain, {
  102.             slidesPerView: 'auto',
  103.             watchSlidesProgress: true,
  104.             freeMode: true,
  105.             speed: 1000,
  106.             navigation: {
  107.                 prevEl: comparePrev,
  108.                 nextEl: compareNext,
  109.             },
  110.             breakpoints: {
  111.                 768: {
  112.                     slidesPerView: '2',
  113.                     freeMode: true,
  114.                 },
  115.                 992: {
  116.                     slidesPerView: '3',
  117.                     freeMode: false,
  118.                 },
  119.                 1200: {
  120.                     slidesPerView: '4',
  121.                     freeMode: false,
  122.                     watchSlidesProgress: true,
  123.                 }
  124.             },
  125.         });
  126.         swiperComparison.controller.control = swiperComparisonData;
  127.     });
  128. </script>
  129. {% endblock %}