templates/shop/cart.html.twig line 1

Open in your IDE?
  1. {% extends 'nav.html.twig' %}
  3. {% block title %}Корзина{% endblock %}
  5. {% block content %}
  6.     <div class="container d-flex pt-5" style="max-width: 1500px">
  7.         <div class="d-flex align-items-center p-3 text-white-50 bg-purple rounded box-shadow">
  9.         </div>
  11.         <div class="my-5 p-3 bg-white rounded box-shadow" style="width: 70%">
  12.             <h6 class="pb-2 mb-0 h4">Корзина</h6>
  13.             {% if cartPositions != null %}
  14.                 <div class="form-check border-bottom border-gray">
  15.                     <input class="form-check-input" type="checkbox" value="" id="selectAllCheck" onchange="selectAllCheckBox()" checked>
  16.                     <label class="form-check-label" for="flexCheckDefault">
  17.                         Выбрать все
  18.                     </label>
  19.                 </div>
  20.                 {% for cartPosition in cartPositions %}
  21.                     <div class="media pt-3 border-bottom border-gray" id="cartPositionItem">
  22.                         {% if cartPosition.size.count == 0 %}
  23.                             <div class="form-check">
  24.                                 <input class="form-check-input" style="margin-top: 50%" type="checkbox" value="" id="" disabled>
  25.                             </div>
  26.                         {% else %}
  27.                             <div class="form-check">
  28.                                 <input class="form-check-input" style="margin-top: 50%" type="checkbox" onchange="calculatePurchaseInfo()" value="" id="cartPositionCkeck" checked>
  29.                                  <span style="display: none" id="cartPositionId">{{ cartPosition.id }}</span>
  30.                                  <span style="display: none" id="cartPositionProductSizeId">{{ cartPosition.size.id }}</span>
  31.                                  <span style="display: none" id="cartPositionProductId">{{ cartPosition.product.id }}</span>
  32.                             </div>
  33.                         {% endif %}
  34.                         <img data-src="holder.js/32x32?theme=thumb&amp;bg=007bff&amp;fg=007bff&amp;size=1" alt="45x45"
  35.                              style="width: 45px; height: 45px;"
  36.                              src="assets/images/{{ cartPosition.product.images[0].path }}"
  37.                              data-holder-rendered="true" class="mr-2 rounded">
  38.                         <div class="media-body pb-3 mb-0lh-125">
  39.                             <div class="d-flex justify-content-between align-items-center w-100 h-100">
  40.                                 {% if cartPosition.size.count == 0 %}
  41.                                     <div>
  42.                                         <div>
  43.                                             <span class="text-gray-dark text-muted">{{ cartPosition.product.title }}</span>
  44.                                             <span class="text-gray-dark text-muted"> {{ cartPosition.size.size.title }}</span>
  45.                                         </div>
  46.                                         <div>
  47.                                             <span class="text-gray-dark">Товар закончился на складе</span>
  48.                                         </div>
  49.                                     </div>
  50.                                 {% else %}
  51.                                     <div>
  52.                                         <span class="text-gray-dark" id="cartItemTitle">{{ cartPosition.product.title }}</span>
  53.                                         <span class="text-gray-dark" id="cartItemSize"> {{ cartPosition.size.size.title }}</span>
  54.                                     </div>
  55.                                 {% endif %}
  56.                                 <form>
  57.                                     <div class="d-flex justify-content-between align-items-center w-100 h-100">
  58.                                         {% if cartPosition.size.count < cartPosition.count %}
  59.                                             <input id="cartPositionCountInput" class="form-control mr-4" style="max-width: 150px" type="number" value="{{ cartPosition.size.count}}" min="1" max="{{ cartPosition.size.count }}" onchange="calculatePurchaseInfo()" onkeypress="return false">
  60.                                         {% else %}
  61.                                             <input id="cartPositionCountInput" class="form-control mr-4" style="max-width: 150px" type="number" value="{{ cartPosition.count }}" min="1" max="{{ cartPosition.size.count }}" onchange="calculatePurchaseInfo()" onkeypress="return false">
  62.                                         {% endif %}
  63.                                         <div class="mr-3 h5">
  64.                                             <span class="text-gray-dark" id="cartItemPrice" style="width: 100px">{{ cartPosition.product.price }}</span>
  65.                                             ₽ /шт
  66.                                         </div>
  67.                                         {% if cartPosition.id is not null %}
  68.                                                 <button onclick="deleteItemFromCart({{ cartPosition.id }})" type="button" class="btn btn-danger">Удалить</button>
  69.                                         {% else %}
  70.                                             <button onclick="deleteItemFromLocalCart({{ loop.index }})" type="button" class="btn btn-danger">Удалить</button>
  71.                                         {% endif %}
  72.                                     </div>
  73.                                 </form>
  74.                             </div>
  75.                         </div>
  76.                     </div>
  77.                 {% endfor %}
  78.             {% endif %}
  79.             <small class="d-block text-right mt-3">
  80.                 <a href="#">All suggestions</a>
  81.             </small>
  82.         </div>
  83.         {% if cartPositions != null %}
  84.             <div class="ml-auto my-5 p-3 bg-white rounded box-shadow" style="max-height: 170px">
  85.                 <div class="d-flex" style="flex-direction: column;">
  86.                     <div class="border-bottom border-gray">
  87.                         {% if app.user %}
  88.                                 <button type="button" id="submitPurchaseBtn" class="btn btn-success btn-lg btn-block mt-1 w-100 mb-2" onclick="buyProductForUser()">Перейти к оформлению заказа</button>
  89.                         {% else %}
  90.                                 <button type="button" id="submitPurchaseBtn" class="btn btn-success btn-lg btn-block mt-1 w-100 mb-2" onclick="buyProductForGuest()" >Перейти к оформлению заказа</button>
  91.                         {% endif %}
  92.                     </div>
  93.                     <div class="d-flex flex-column">
  94.                         <h4>Ваша корзина</h4>
  95.                         <div class="d-flex justify-content-between">
  96.                             <span class="font-weight-bold" id="purchaseInfoCount"></span>
  97.                             <span class="font-weight-bold" id="purchaseInfoPrice" style="color: #1b9448"></span>
  98.                         </div>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         {% endif %}
  103.     </div>
  104. {% endblock %}
  105. {% block pagescripts %}
  106.     <script>
  108.         /**
  109.          * Выводит продукты пользователя из localStorage на страницу
  110.          */
  111.         document.addEventListener('DOMContentLoaded', function () {
  112.             loadCartItems();
  113.         });
  115.         /**
  116.          *  Отправляет запрос на получение позиций из корзины, для отображения их на странице
  117.          */
  118.         function loadCartItems() {
  119.             let cart = localStorage.getItem('cart');
  120.             let data = JSON.stringify({'cartArray': cart});
  121.             let url = '/cart';
  123.             sendPostRequest(url, data)
  124.                 .then(function (response) {
  125.                     document.body.innerHTML = response;
  126.                     calculatePurchaseInfo();
  127.                 });
  129.         }
  131.         /**
  132.          * Удаляет товар из localStorage
  133.          *
  134.          * @param index
  135.          */
  136.         function deleteItemFromLocalCart (index) {
  137.             let cart = localStorage.getItem('cart');
  138.             let itemsInCart = JSON.parse(cart);
  139.             itemsInCart.forEach(function (item, i) {
  140.                 if (i === index-1)
  141.                     itemsInCart.splice(i, 1);
  142.             });
  143.             localStorage.setItem('cart', JSON.stringify(itemsInCart));
  144.             loadCartItems();
  145.         }
  147.         /**
  148.          * Отправляет запрос на удаление товара из корзины в бд
  149.          *
  150.          * @param cartPositionId
  151.          */
  152.         function deleteItemFromCart (cartPositionId) {
  153.             let url = '/deleteProductFromCart/' + cartPositionId;
  154.             sendGetRequest(url)
  155.                 .then(function () {
  156.                     loadCartItems()
  157.                 })
  158.         }
  160.         /**
  161.          * Выбирает или снимает выделение со всех чекбоксов в корзине
  162.          */
  163.         function selectAllCheckBox() {
  164.             let check = document.getElementById('selectAllCheck');
  165.             let cartPositionsChecks = document.querySelectorAll('input[id="cartPositionCkeck"]');
  166.             cartPositionsChecks.forEach(function (item) {
  167.                 item.checked = check.checked;
  168.             });
  169.             calculatePurchaseInfo()
  170.         }
  172.         /**
  173.          * Рассчитывает общую стоимость и количество товаров в корзине
  174.          */
  175.         function calculatePurchaseInfo() {
  176.             let items = document.querySelectorAll('div[id="cartPositionItem"]')
  177.             let data = { count: 0, price: 0 };
  179.             items.forEach(function (item) {
  180.                 let check = item.querySelector('input[id="cartPositionCkeck"]');
  181.                 if (check && check.checked) {
  182.                     let { value: itemCount } = item.querySelector('input[type="number"]');
  183.                     let { textContent: itemPrice } = item.querySelector('span[id="cartItemPrice"]');
  184.                     data.count += parseInt(itemCount);
  185.                     data.price += parseInt(itemCount) * parseInt(itemPrice);
  186.                 }
  187.             })
  188.             updatePurchaseInfo(data);
  189.             checkSelectedAll();
  190.         }
  192.         /**
  193.          * Обновляет отображение общей стоимости и количества товаров в корзине
  194.          *
  195.          * @param data
  196.          */
  197.         function updatePurchaseInfo(data) {
  198.             let count = document.querySelector('span[id="purchaseInfoCount"]')
  199.             let price = document.querySelector('span[id="purchaseInfoPrice"]')
  201.             count.innerHTML = 'Товары(' + data.count + ')';
  202.             price.innerHTML = data.price + 'Р';
  203.         }
  205.         /**
  206.          * Проверяет, выбраны ли все чекбоксы в корзине, и обновляет состояние кнопки "Перейти к оформлению заказа"
  207.          */
  208.         function checkSelectedAll() {
  209.             let cartPositionsChecks = document.querySelectorAll('input[id="cartPositionCkeck"]');
  210.             let selectAllCheck = document.querySelector('input[id="selectAllCheck"]');
  211.             let submitPurchaseBtn = document.getElementById('submitPurchaseBtn');
  213.             let allChecked = Array.from(cartPositionsChecks).every(function(item) {
  214.                 return item.checked;
  215.             });
  216.             let anyChecked = Array.from(cartPositionsChecks).some(function(item) {
  217.                 return item.checked;
  218.             });
  220.             selectAllCheck.checked = allChecked;
  221.             submitPurchaseBtn.disabled = !anyChecked;
  222.         }
  224.         /**
  225.         * Собирает в массив данные со страницы для отправки их в запросе
  226.         *
  227.         * @param user
  228.         * @returns {*[]}
  229.         */
  230.         function collectDataFromPageForCheckout(user) {
  231.             let items = document.querySelectorAll('div[id="cartPositionItem"]');
  233.             if (user) {
  234.                 let cartItemIds = [];
  236.                 items.forEach(function (item) {
  237.                     let check = item.querySelector('input[id="cartPositionCkeck"]');
  238.                     if (check && check.checked) {
  239.                         cartItemIds.push(parseInt(item.querySelector('span[id="cartPositionId"]').textContent));
  240.                     }
  241.                 });
  242.                 return cartItemIds;
  243.             } else {
  244.                 let data = [];
  246.                 items.forEach(function (item) {
  247.                     let check = item.querySelector('input[id="cartPositionCkeck"]');
  248.                     if (check && check.checked) {
  249.                         let obj = {};
  250.                         obj['count'] = parseInt(item.querySelector('input[id="cartPositionCountInput"]').value);
  251.                         obj['sizeId'] = parseInt(item.querySelector('span[id="cartPositionProductSizeId"]').textContent);
  252.                         obj['productId'] = parseInt(item.querySelector('span[id="cartPositionProductId"]').textContent);
  253.                         data.push(obj);
  254.                     }
  255.                 });
  256.                 return data;
  258.             }
  260.         }
  262.         /**
  263.         * Загружает страницу покупки товара для неавторизованного пользователя
  264.         */
  265.         function buyProductForGuest() {
  266.             let data = JSON.stringify(collectDataFromPageForCheckout(false));
  267.             let url = '/cart/buyProduct';
  269.             sendPostRequest(url, data)
  270.                 .then(function (response) {
  271.                     document.body.innerHTML = response;
  272.                 })
  273.         }
  275.         /**
  276.         * Загружает страницу покупки для авторизованного пользователя
  277.         */
  278.         function buyProductForUser() {
  279.             let cartItemIds = JSON.stringify(collectDataFromPageForCheckout(true));
  280.             let url = '/cart/buyProduct';
  282.             sendPostRequest(url, cartItemIds)
  283.                 .then(function (response) {
  284.                     document.body.innerHTML = response;
  285.                 });
  286.         }
  288.         /**
  289.         * Проверяет авторизован ли пользователь
  290.         *
  291.         * @param User
  292.         */
  293.         function checkCheckoutForm(User) {
  294.             if (User) submitFormForAuthorizedUser()
  295.             else checkRegisteredUser();
  296.         }
  298.         /**
  299.         * Забирает данные из формы и отправляет их в следующую функцию
  300.         */
  301.         function submitFormForAuthorizedUser() {
  302.             let form = document.getElementById('mainPurchaseForm');
  303.             let formData = new FormData(form);
  304.             confirmPurchase(formData);
  305.         }
  307.         /**
  308.         * Отправляет запрос на проверку наличия пользователя в бд
  309.         * Если такой пользователь есть, то заносит заказ в бд
  310.         * Если пользователя нет, то отправляет данные в функцию регистрации
  311.         */
  312.         function checkRegisteredUser() {
  313.             let url = '/checkRegisteredUser';
  314.             let form = document.getElementById('mainPurchaseForm');
  315.             let formData = new FormData(form);
  316.             let email = {
  317.                 'email': formData.get('purchaseForm[email]')
  318.             };
  320.             sendPostRequest(url, JSON.stringify(email))
  321.                 .then(function (response) {
  322.                     let responseData = JSON.parse(response)
  323.                     if (responseData.resultCode === 0) registerUser(formData)
  324.                         else confirmPurchase(formData)
  325.                 });
  326.         }
  328.         /**
  329.         * Отправляет запрос на регистрацию пользователя
  330.         *
  331.         * @param data
  332.         */
  333.         function registerUser (data) {
  334.             let registerData = new FormData();
  335.             let cart = localStorage.getItem('cart');
  336.             registerData.append('registration_form_buyer[name]', data.get('purchaseForm[firstName]'));
  337.             registerData.append('registration_form_buyer[email]', data.get('purchaseForm[email]'));
  338.             registerData.append('registration_form_buyer[agreeTerms]', '1');
  339.             registerData.append('registration_form_buyer[_token]', data.get('token'));
  340.             registerData.append('withOrder', true);
  341.             registerData.append('localStorageDataBuyer', cart);
  342.             let url = '/register';
  344.             sendPostRequest(url, registerData)
  345.                 .then(function () {
  346.                     confirmPurchase(data);
  347.                 });
  348.         }
  350.         /**
  351.         * Отправляет запрос на добавление заказа в бд
  352.         *
  353.         * @param data
  354.         */
  355.         function confirmPurchase(data) {
  356.             let url = '/cart/confirmPurchase';
  358.             sendPostRequest(url, data)
  359.                 .then(function (response) {
  360.                     setTimeout(function (){
  361.                         showSuccessAlert('Заказ успешно сформирован')
  362.                         loadCartItems()
  363.                     }, 1000)
  364.             });
  365.             }
  366.     </script>
  367. {% endblock %}