templates/application/calc/decor.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">{% if page is defined %}{{ page.name(app.request.locale) }}{% else %}Калькулятор лепного декора / плинтусов{% endif %}</li>
  10.                 </ol>
  11.             </div>
  12.         </div>
  14.         <div class="page calc-info-page">
  15.             <div class="container">
  16.                 {% if decorCategories|length %}
  17.                     <div class="page__header">
  18.                         <h1 class="page__title">Калькулятор плинтусов</h1>
  19.                     </div>
  20.                     <div class="calculator-info">
  21.                         <div class="calculator-info__text">
  22.                             <h3 class="calculator-info__title">
  23.                                 Как рассчитать количество плинтуса 
  24.                             </h3>
  25.                             <ul class="calculator-info__list">
  26.                                 <li>1. Замерьте общую длину всех стен комнаты (периметр) (L)</li>
  27.                                 <li>2. Измерьте ширину всех дверных проемов и суммируйте их (B)</li>
  28.                                 <li>3. Введите результаты измерений в форму ниже и получите расчёт!</li>
  29.                                 <li>Внимание! Все данные вводятся в метрах!</li>
  30.                             </ul>
  31.                         </div>
  32.                         <div class="calculator-info__image">
  33.                             <img src="/img/calc-pic.png" alt="Калькулятор плинтусов">
  34.                         </div>
  35.                     </div>
  36.                     <div class="calculator calculator--addition" id="calcDecor">
  37.                         <div class="calculator__column">
  38.                             <div class="box box--outline">
  39.                                 <h3>Выберите изделие</h3>
  40.                                 <form class="form calculator__form">
  41.                                     <div class="form__group">
  42.                                         <div class="form__label">Категория</div>
  43.                                         <select id="decorCategories" class="form__control w-md">
  44.                                             <option></option>
  45.                                             {% for category in decorCategories %}
  46.                                                 <option value="{{ category.id }}">{{ category.name(app.request.locale) }}</option>
  47.                                             {% endfor %}
  48.                                         </select>
  49.                                     </div>
  51.                                     <div class="form__group">
  52.                                         <div class="form__label">Товар</div>
  53.                                         <select class="select-by-name form__control w-md">
  54.                                         </select>
  55.                                     </div>
  57.                                     <div class="form__btn">
  58.                                         <button class="btn a-calc">Добавить в расчет</button>
  59.                                     </div>
  60.                                 </form>
  61.                             </div>
  62.                         </div>
  63.                         <div class="calculator__column calculator__column--params">
  64.                             <div class="box">
  65.                                 <h3>Уточните параметры</h3>
  66.                                 <div class="calculator-tbl calculator__list">
  67.                                     {{ include('application/calc/decor-products.html.twig') }}
  68.                                 </div>
  69.                             </div>
  70.                         </div>
  71.                         <div class="calculator__column">
  72.                             <div class="box box--outline">
  73.                                 <h3>Вам потребуется</h3>
  74.                                 <div class="glue-product">
  75.                                     {{ include('application/calc/decor-glue-product.html.twig') }}
  76.                                 </div>
  77.                             </div>
  78.                         </div>
  79.                     </div>
  80.                 {% endif %}
  81.             </div>
  82.         </div>
  83.     </main>
  84. {% endblock %}
  86. {% block scripts %}
  87.     <script>
  88.         let busy = false;
  89.         $('.a-calc').on('click', function() {
  90.             if (busy) {
  91.                 return false;
  92.             }
  94.             let calcParent = $(this).closest('.calculator');
  95.             let id = calcParent.find('.select-by-name').val();
  97.             if (!id) {
  98.                 alertPopup('Выберите товар');
  99.                 return false;
  100.             }
  102.             busy = true;
  103.             $.ajax({
  104.                 type: "POST",
  105.                 url: '{{ path('calc-add-ajax') }}',
  106.                 data: {
  107.                     id: id,
  108.                     decor: 1
  109.                 },
  110.                 success: function (data) {
  111.                     let block = $(data.html);
  112.                     calcParent.find('.calculator__list').html(block);
  113.                     prepareProductBlockCount(block);
  114.                     initCartItems();
  115.                     updateGlueInfo(data, calcParent);
  116.                 }
  117.             }).fail(function() {
  118.                 alertPopup('Ошибка');
  119.             }).always(function() {
  120.                 busy = false;
  121.             });
  123.             return false;
  124.         });
  126.         $('.calculator__list, .calculator__list--result')
  127.             .on('click', '.remove__link', function(e) {
  128.                 if (busy) {
  129.                     return false;
  130.                 }
  132.                 let calcParent = $(this).closest('.calculator');
  133.                 let calcProduct = $(this).closest('.calculator-tbl__item'),
  134.                     id = calcProduct.attr('data-id');
  136.                 busy = true;
  137.                 $.ajax({
  138.                     type: "POST",
  139.                     url: '{{ path('calc-remove-ajax') }}',
  140.                     data: {
  141.                         id: id,
  142.                         decor: 1
  143.                     },
  144.                     success: function (data) {
  145.                         let block = $(data.html);
  146.                         calcParent.find('.calculator__list').html(block);
  147.                         prepareProductBlockCount(block);
  148.                         initCartItems();
  149.                         updateGlueInfo(data, calcParent);
  150.                     }
  151.                 }).fail(function() {
  152.                     alertPopup('Ошибка');
  153.                 }).always(function() {
  154.                     busy = false;
  155.                 });
  157.                 return false;
  158.             });
  160.         function initCartItems() {
  161.             $('.cart-quantity').change(function () {
  162.                 let calcParent = $(this).closest('.calculator');
  163.                 let calcProduct = $(this).closest('.calculator-tbl__item'),
  164.                     id = calcProduct.attr('data-id');
  166.                 let count = $(this).val();
  167.                 $.ajax({
  168.                     type: "POST",
  169.                     url: '{{ path('calc-put-ajax') }}',
  170.                     data: {
  171.                         id: id,
  172.                         count: count,
  173.                         decor: 1
  174.                     },
  175.                     success: function (data) {
  176.                         updateGlueInfo(data, calcParent);
  177.                     }
  178.                 }).fail(function() {
  179.                     alertPopup('Ошибка');
  180.                 })
  181.             });
  183.             $('#openingWidth,#perimeter').change(function () {
  184.                 $.ajax({
  185.                     type: "POST",
  186.                     url: '{{ path('calc-set-ajax') }}',
  187.                     data: {
  188.                         type: $(this).attr('id'),
  189.                         value: $(this).val()
  190.                     },
  191.                     success: function (data) {
  192.                         updateGlueInfo(data, $('#calcDecor'));
  193.                     }
  194.                 }).fail(function() {
  195.                     alertPopup('Ошибка');
  196.                 })
  197.             });
  198.         }
  200.         function updateGlueInfo(data, calcParent) {
  201.             calcParent.find('.glue-product').html(data.glueHtml);
  202.             initAddDecorButton();
  203.         }
  205.         function initAddDecorButton() {
  206.             $('#addDecorButton').click(function () {
  207.                 let button = $(this);
  209.                 if (button.hasClass('btn--success')) {
  210.                     location.href = '{{ path('cart') }}';
  211.                     return false;
  212.                 }
  214.                 button.attr('disabled', 'disabled');
  215.                 $.ajax({
  216.                     type: "POST",
  217.                     url: '{{ path('calc-add-to-cart-ajax') }}',
  218.                     data: {
  219.                         id: button.attr('data-id'),
  220.                     },
  221.                     success: function (data) {
  222.                         $('#cartDiv').html(data.cartHtml);
  223.                         button.addClass('btn--success');
  224.                         button.html('В корзине');
  225.                     }
  226.                 }).fail(function() {
  227.                     alertPopup('Ошибка');
  228.                 }).always(function() {
  229.                     button.removeAttr('disabled');
  230.                 });
  232.                 return false;
  233.             });
  234.         }
  236.         initCartItems();
  237.         initAddDecorButton();
  239.         $('#decorCategories').change(function () {
  240.             let select = $(this);
  241.             $.ajax({
  242.                 type: "GET",
  243.                 url: '{{ path('calc-get-products') }}',
  244.                 data: {
  245.                     id: select.val(),
  246.                 },
  247.                 success: function (data) {
  248.                     let form = select.closest('form');
  249.                     form.find('.select-by-name').html(data.productsByNameHtml);
  250.                 }
  251.             }).fail(function() {
  252.                 alertPopup('Калькулятор для этой категории сейчас не доступен, выберите другую');
  253.             });
  254.         });
  255.     </script>
  256. {% endblock %}