templates/application/calc/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">{{ page.name(app.request.locale) }}</li>
  10.                 </ol>
  11.             </div>
  12.         </div>
  14.         <div class="page">
  15.             <div class="container">
  16.                     {% if glueCategories|length %}
  17.                         <div class="page__header">
  18.                             <h1 class="page__title">Калькулятор расхода клея</h1>                        
  19.                         </div>
  21.                         <div class="calculator" id="calcGlue">
  22.                             <div class="calculator__column">
  23.                                 <div class="box box--outline">
  24.                                     <h3>Выберите изделие</h3>
  25.                                     <form class="form calculator__form">
  26.                                         <div class="form__group">
  27.                                             <div class="form__label">Категория</div>
  28.                                             <select id="glueCategories" class="form__control w-md">
  29.                                                 <option></option>
  30.                                                 {% for category in glueCategories %}
  31.                                                     <option value="{{ category.id }}">{{ category.name(app.request.locale) }}</option>
  32.                                                 {% endfor %}
  33.                                             </select>
  34.                                         </div>
  35.                                         <div class="form__group">
  36.                                             <div class="form__label">Товар</div>
  37.                                             <select class="select-by-name form__control w-md">
  38.                                             </select>
  39.                                         </div>
  41.                                         <div class="form__btn">
  42.                                             <button class="btn a-calc">Добавить в расчет</button>
  43.                                         </div>
  44.                                     </form>
  45.                                 </div>
  46.                             </div>
  47.                             <div class="calculator__column">
  48.                                 <div class="box">
  49.                                     <h3>Уточните количество</h3>
  50.                                     <div class="calculator-tbl calculator__list">
  51.                                         {{ include('application/calc/products.html.twig') }}
  52.                                     </div>
  53.                                 </div>
  54.                             </div>
  55.                             <div class="calculator__column">
  56.                                 <div class="box box--outline">
  57.                                     <h3>Вам потребуется</h3>
  58.                                     <div class="glue-product">
  59.                                         {{ include('application/calc/glue-product.html.twig') }}
  60.                                     </div>
  61.                                 </div>
  62.                             </div>
  63.                         </div>
  64.                     {% endif %}
  65.             </div>
  66.         </div>
  68.     </main>
  69. {% endblock %}
  71. {% block scripts %}
  72.     <script>
  73.         let busy = false;
  74.         $('.a-calc').on('click', function() {
  75.             if (busy) {
  76.                 return  false;
  77.             }
  79.             let calcParent = $(this).closest('.calculator');
  80.             let id = calcParent.find('.select-by-name').val();
  82.             if (!id) {
  83.                 alertPopup('Выберите товар');
  84.                 return false;
  85.             }
  87.             busy = true;
  88.             $.ajax({
  89.                 type: "POST",
  90.                 url: '{{ path('calc-add-ajax') }}',
  91.                 data: {
  92.                     id:  id,
  93.                     decor: ''
  94.                 },
  95.                 success: function (data) {
  96.                     let block = $(data.html);
  97.                     calcParent.find('.calculator__list').html(block);
  98.                     prepareProductBlockCount(block);
  99.                     initCartItems();
  100.                     updateGlueInfo(data, calcParent);
  101.                 }
  102.             }).fail(function() {
  103.                 alertPopup('Ошибка');
  104.             }).always(function() {
  105.                 busy = false;
  106.             });
  108.             return false;
  109.         });
  111.         $('.calculator__list, .calculator__list--result')
  112.             .on('click', '.remove__link', function(e) {
  113.                 if (busy) {
  114.                     return  false;
  115.                 }
  117.                 let calcParent = $(this).closest('.calculator');
  118.                 let calcProduct = $(this).closest('.calculator-tbl__item'),
  119.                     id = calcProduct.attr('data-id');
  121.                 busy = true;
  122.                 $.ajax({
  123.                     type: "POST",
  124.                     url: '{{ path('calc-remove-ajax') }}',
  125.                     data: {
  126.                         id:  id,
  127.                         decor: ''
  128.                     },
  129.                     success: function (data) {
  130.                         let block = $(data.html);
  131.                         calcParent.find('.calculator__list').html(block);
  132.                         prepareProductBlockCount(block);
  133.                         initCartItems();
  134.                         updateGlueInfo(data, calcParent);
  135.                     }
  136.                 }).fail(function() {
  137.                     alertPopup('Ошибка');
  138.                 }).always(function() {
  139.                     busy = false;
  140.                 });
  142.                 return false;
  143.             });
  146.         function initCartItems() {
  147.             $('.cart-quantity').change(function () {
  148.                 let calcParent = $(this).closest('.calculator');
  149.                 let calcProduct = $(this).closest('.calculator-tbl__item'),
  150.                     id = calcProduct.attr('data-id');
  152.                 let count = $(this).val();
  153.                 $.ajax({
  154.                     type: "POST",
  155.                     url: '{{ path('calc-put-ajax') }}',
  156.                     data: {
  157.                         id: id,
  158.                         count: count,
  159.                         decor: ''
  160.                     },
  161.                     success: function (data) {
  162.                         updateGlueInfo(data, calcParent);
  163.                     }
  164.                 }).fail(function() {
  165.                     alertPopup('Ошибка');
  166.                 })
  167.             });
  168.         }
  170.         function updateGlueInfo(data, calcParent) {
  171.             calcParent.find('.glue-product').html(data.glueHtml);
  172.             initAddGlueButton();
  173.         }
  175.         function initAddGlueButton() {
  176.             $('#addGlueButton').click(function () {
  177.                 let button = $(this);
  179.                 if (button.hasClass('btn--success')) {
  180.                     location.href = '{{ path('cart') }}';
  181.                     return false;
  182.                 }
  184.                 button.attr('disabled', 'disabled');
  185.                 $.ajax({
  186.                     type: "POST",
  187.                     url: '{{ path('cart-add-ajax') }}',
  188.                     data: {
  189.                         id: button.attr('data-id'),
  190.                         count: $('#glueCount').val()
  191.                     },
  192.                     success: function (data) {
  193.                         $('#cartDiv').html(data.cartHtml);
  194.                         button.addClass('btn--success');
  195.                         button.html('В корзине');
  196.                     }
  197.                 }).fail(function() {
  198.                     alertPopup('Ошибка');
  199.                 }).always(function() {
  200.                     button.removeAttr('disabled');
  201.                 });
  203.                 return false;
  204.             });
  205.         }
  207.         initCartItems();
  208.         initAddGlueButton();
  210.         $('#glueCategories').change(function () {
  211.             let select = $(this);
  212.             $.ajax({
  213.                 type: "GET",
  214.                 url: '{{ path('calc-get-products') }}',
  215.                 data: {
  216.                     id: select.val(),
  217.                 },
  218.                 success: function (data) {
  219.                     let form = select.closest('form');
  220.                     form.find('.select-by-name').html(data.productsByNameHtml);
  221.                 }
  222.             }).fail(function() {
  223.                 alertPopup('Калькулятор для этой категории сейчас не доступен, выберите другую');
  224.             });
  225.         });
  226.     </script>
  227. {% endblock %}