templates/shop/index.html.twig line 1

Open in your IDE?
  1. {% extends 'nav.html.twig' %}
  3. {% block title %}Магазин{% endblock %}
  5. {% block content %}
  6.     <aside id="filterProducts" class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
  7.         <form style="padding-left: 30px; margin-bottom: 30px !important; width: 300px" id="formFilter">
  8.             <h5 style="padding-left: 10px" class="pt-4 pb-3 mb-4 border-bottom">Фильтры</h5>
  9.             <nav style="width: 300px" class="small">
  10.                     <h5 class="type-filter">Тип изделия</h5>
  11.                     {% for groupProducts in groupsProducts %}
  12.                         <label class="filter-label cursor-pointer">
  13.                             {{ groupProducts.title }}
  14.                             <input class="checkboxFilter cursor-pointer" onchange="filter()" id="{{ groupProducts.name }}" name="{{ groupProducts.name }}" type="checkbox">
  15.                         </label><br>
  16.                     {% endfor %}
  17.                     <br>
  18.                     <h5 class="type-filter">Материал</h5>
  19.                     {% for materialProducts in materialsProducts %}
  20.                         <label class="filter-label cursor-pointer">
  21.                             {{ materialProducts.title }}
  22.                             <input class="checkboxFilter cursor-pointer" onchange="filter()" id="{{ materialProducts.name }}" name="{{ materialProducts.name }}" type="checkbox">
  23.                         </label><br>
  24.                     {% endfor %}
  25.                     <div style="padding-top: 30px; padding-left: 30px">
  26.                         <label for="priceRange" class="form-label">Цена: до </label>
  27.                         <span id="priceValue">{{ maxPrice }}</span><span>₽</span><br>
  28.                         <span style="margin-right: 10px">0₽</span><input onchange="filter()" oninput="updatePriceValue(this.value)" name = "price" type="range" min="0" max="{{ maxPrice }}" class="form-range" id="priceRange" style="cursor: pointer"><span style="margin-left: 10px">{{ maxPrice }}₽</span>
  29.                     </div>
  30.             </nav>
  31.             <h5 style="padding-left: 10px; margin-top: 530px;" class="pt-4 pb-3 mb-4 border-bottom">Сортировка</h5>
  32.             <select id = "selectSort" onchange="filter()" style="background: none; border: none; cursor: pointer; width: 260px" class="form-select" aria-label="Default select example">
  33.                 <option class="cursor-pointer" value="0" selected>По умолчанию</option>
  34.                 <option class="cursor-pointer" value="1">Убыванию цены</option>
  35.                 <option class="cursor-pointer" value="2">Возрастанию цены</option>
  36.                 <option class="cursor-pointer" value="3">Количеству просмотров</option>
  37.                 <option class="cursor-pointer" value="4">Количеству продаж</option>
  38.             </select>
  39.         </form>
  40.     </aside>
  41.     <div class="card-table">
  42.         {% for product in products %}
  43.             <div class="card" style="width: 18rem;">
  44.                 <a onclick="openProductCard('{{ product.id }}');" style="cursor: pointer">
  45.                     {% if product.images is not null and product.images|length > 0 %}
  46.                     <img class="card-img-top" height="350" src="../assets/images/{{ product.images[0].path }}">
  47.                     {% endif %}
  48.                 </a>
  49.                 <div class="card-body">
  50.                     <a onclick="openProductCard('{{ product.id }}');" style="cursor: pointer">
  51.                     <h6 class="card-title">{{ product.title }}</h6>
  52.                     <p style="height: 70px; font-size: 12px" class="card-text">
  53.                         {% if product.description | length > 30 %}
  54.                             {{ product.description | slice (0, 30) ~ '...' }}
  55.                         {% else %}
  56.                             {{ product.description }}
  57.                         {% endif %}
  58.                     </p>
  59.                     </a>
  60.                         <button type="button" class="btn btn-primary buttonsCard" onclick="addProductToCart('grid', {{ product.id }})">
  61.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
  62.                                 <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
  63.                             </svg>
  64.                         </button>
  65.                     <button type="button" class="btn btn-primary buttonsCard">
  66.                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 13">
  67.                             <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"></path>
  68.                         </svg>
  69.                     </button>
  70.                     <span style="right: 20px; position: absolute; font-size: 20px">{{ product.price }}₽</span>
  71.                     <br><span class="master-name">{{ product.seller.lastname }} {{ product.seller.name }}</span>
  72.                     <div style="text-align: right">
  73.                         <small>{{ product.views }}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 10">
  74.                                 <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
  75.                                 <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
  76.                             </svg>
  77.                         </small>
  78.                         <small>{{ product.bought }}<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 15">
  79.                                 <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
  80.                             </svg>
  81.                         </small>
  82.                     </div>
  83.                 </div>
  84.             </div>
  85.         {% endfor %}
  86.     </div>
  87.     <!-- Modal -->
  88.     <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
  90.     <div class="modal fade bd-example-modal-lg" id="productCardModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  91.         <div class="modal-dialog modal-lg" style="max-width: 1000px">
  92.             <div class="modal-content" id="productCardModalContainer">
  93.                 ...
  94.             </div>
  95.         </div>
  96.     </div>
  97. {% endblock %}
  99. {% block pagescripts %}
  100.     <script>
  101.         var descriptionProductCardVisible = false;
  103.         document.addEventListener('DOMContentLoaded', function () {
  104.             var urlParams = new URLSearchParams(window.location.search);
  105.             var productIdParam = urlParams.get('product_id');
  106.             var priceRange = document.getElementById('priceRange');
  107.             var priceValue = document.getElementById('priceValue');
  108.             var priceParam = urlParams.get('price');
  110.             priceRange.value = priceParam ? priceParam : priceRange.max;
  111.             priceValue.textContent = priceRange.value
  112.             if (productIdParam) {
  113.                 openProductCard(productIdParam);
  114.             }
  115.         });
  117.         function filter() {
  118.             event.preventDefault();
  119.             let spinner = document.getElementById('loadingSpinner');
  120.             let form = document.getElementById('formFilter');
  121.             let inputs = form.getElementsByTagName('input');
  122.             let sort = form.getElementsByTagName('select');
  123.             let formSearch = document.getElementById('searchFilter');
  124.             let search = formSearch.querySelector('input[name="search"]').value;
  125.             sort = sort[0].value;
  126.             let price = inputs['price'].value;
  127.             let numberOfInputs = inputs.length;
  128.             let url = "?";
  129.             if (search !== "")
  130.                 url = url + "search=" + search + "&";
  131.             url = url + "price=" + price + "&";
  132.             for (let i = 0; i < numberOfInputs; i++) {
  133.                 if (!inputs[i].checked) continue;
  134.                 url = url + inputs[i].name + "=" + inputs[i].checked + "&";
  135.             }
  136.             url = url + "sort=" + sort;
  137.             window.history.pushState('page2', 'Title', url);
  138.             spinner.style.display = 'block';
  140.             sendGetRequest(url)
  141.                 .then(function (response) {
  142.                     document.body.innerHTML = response;
  143.                     for (let i = 0; i < numberOfInputs; i++) {
  144.                         if (inputs[i].checked) {
  145.                             document.getElementById(inputs[i].id).checked = true;
  146.                         }
  147.                     }
  148.                     document.getElementById('priceRange').value = price;
  149.                     document.getElementById('selectSort').value = sort;
  150.                     document.getElementById('searchBar').value = search;
  151.                     document.getElementById('priceValue').textContent = price;
  152.                     let clearSearchIcon = document.getElementById('clearSearch');
  153.                     clearSearchIcon.style.visibility = document.getElementById('searchBar').value ? 'inherit' : 'hidden';
  154.                     spinner.style.display = 'none';
  155.                 })
  156.                 .catch(function () {
  157.                     spinner.style.display = 'none';
  158.                 })
  159.         }
  161.         /**
  162.          * Функция для отображения текущего значения слайдера фильтра цены во время его изменения
  163.          *
  164.          * @param value
  165.          */
  166.         function updatePriceValue(value) {
  167.             document.getElementById('priceValue').textContent = value;
  168.         }
  170.         /**
  171.          * Функция, которая меняет стиль отображения крестика в поле поиска при вводе текста
  172.          */
  173.         function showCross() {
  174.             let clearSearchIcon = document.getElementById('clearSearch');
  175.             clearSearchIcon.style.visibility = document.getElementById('searchBar').value ? 'inherit' : 'hidden';
  176.         }
  178.         /**
  179.          * Функция, которая очищает поле поиска по нажатию на крестик и сбрасывает имеющийся поиск товаров
  180.          */
  181.         function clearSearch() {
  182.             document.getElementById('searchBar').value = '';
  183.             filter();
  184.         }
  186.         /**
  187.          * Отображает модальное окно карты товара и отслеживает его состояние
  188.          *
  189.          * @param productId
  190.          */
  191.         function openProductCard(productId) {
  192.             let productModal = document.getElementById('productCardModalContainer');
  193.             let responseUrl = '/get-product/' + productId;
  194.             let url = '?product_id=' + productId;
  195.             let originalUrl = window.location.href;
  197.             $('#productCardModal').on('hidden.bs.modal', function () {
  198.                 window.history.replaceState('page2', 'Title', originalUrl);
  199.             });
  200.             descriptionProductCardVisible = false;
  201.             window.history.pushState('page2', 'Title', url);
  203.             sendGetRequest(responseUrl)
  204.                 .then(function (response) {
  205.                     productModal.innerHTML = response;
  206.                     $('#productCardModal').modal('show');
  207.                     document.getElementById('addProductToCartBtn').disabled = false
  208.                 })
  209.         }
  211.         /**
  212.          * Отвечает за логику работы кнопки "Посмотреть полностью" в модальном окне карты товара
  213.          */
  214.         function toggleProductCardDescription() {
  215.             let container = document.getElementById('descriptionProductCard');
  216.             descriptionProductCardVisible = !descriptionProductCardVisible;
  217.             container.classList.toggle('collapsed');
  218.             container.classList.toggle('expanded')
  219.         }
  221.         /**
  222.          * Отправляет запрос на добавление товара в корзину и
  223.          * выводит сообщение, если он успешно добавлен.
  224.          *
  225.          * @param from
  226.          * @param product
  227.          */
  228.         function addProductToCart(from, product) {
  229.             let Data;
  230.             if (from === 'Form'){
  231.                 Data = new FormData(document.getElementById('modalProductCardForm'));
  232.             } else {
  233.                 Data = new FormData();
  234.                 Data.append('product', product);
  235.                 Data.append('count', '1');
  236.                 Data.append('sizeOption', 'anyone');
  237.             }
  238.             let url = 'addProductToCart';
  240.             sendPostRequest(url, Data)
  241.                 .then(function (response) {
  242.                     let responseData = JSON.parse(response);
  243.                     if (responseData.guest) {
  244.                         addToLocalCart(responseData.item);
  245.                         showSuccessAlert('Товар успешно добавлен в корзину');
  246.                     } else {
  247.                         showSuccessAlert('Товар успешно добавлен в корзину');
  248.                     }
  249.                 })
  250.         }
  252.         /**
  253.          * Добавляет товар в localStorage
  254.          *
  255.          * @param cartItem
  256.          */
  257.         function addToLocalCart(cartItem) {
  258.             let found = false;
  259.             let cart = JSON.parse(localStorage.getItem('cart')) || [];
  260.             cart.forEach(function(item) {
  261.                 if (item['product_id'] === cartItem['product_id'] && item['size'] === cartItem['size']) {
  262.                     item['count'] += cartItem['count'];
  263.                     found = true
  264.                 }
  265.             })
  266.             if (!found) cart.push(cartItem);
  267.             localStorage.setItem('cart', JSON.stringify(cart));
  268.         }
  269.     </script>
  270. {% endblock %}