templates/shop/masters.html.twig line 1

Open in your IDE?
  1. {% extends 'nav.html.twig' %}
  3. {% block title %}Мастера{% endblock %}
  5. {% block content %}
  6.     <section class="jumbotron text-center" style="margin-bottom: 0; padding-top: 125px">
  7.         <div class="container">
  8.             <h1 class="jumbotron-heading">Не нашли желаемые товары?</h1>
  9.             <p class="lead text-muted">
  10.                 Предлагаем сформировать индивидуальный заказ. Как только найдётся мастер, готовый выполнить ваш заказ - мы вам позвоним.
  11.             </p>
  12.             <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
  13.                 <a {% if app.user %} onclick="showAddIndividualProductForm()" {% else %}  href="/login" {% endif %} class="btn btn-primary btn-lg my-2" style="margin-right: 1.5rem">Формировать заказ</a>
  14.                 <a class="btn btn-secondary btn-lg my-2" style="color: #FFFFFF !important;" {% if app.user %} onclick="showAskQuestionModal()" {% else %} href="/login" {% endif %}>Узнать условия</a>
  15.             </div>
  16.         </div>
  17.     </section>
  18.     <div class="album py-5 bg-light">
  19.         <div class="container">
  20.             <div class="row">
  21.                 {% for master in masters %}
  22.                 <div class="col-md-4">
  23.                     <div class="card mb-4 box-shadow" style="width: 350px; height: 650px">
  24.                         <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 450px; width: 350px; display: block;object-fit: cover" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_18d690bb713%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_18d690bb713%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.68333435058594%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
  25.                         <div class="card-body">
  26.                             <p class="card-text">{{ master.name }} {{ master.lastname }}</p>
  27.                             <p class="card-text text-muted" style="height: 70px">{{ master.Aboutme }}</p>
  28.                             <div class="d-flex justify-content-between align-items-center">
  29.                                 <div class="btn-group flex-shrink-1">
  30.                                     <button type="button" class="btn btn-sm btn-outline-dark" style="font-size: 14px">Сделать заказ</button>
  31.                                     <button type="button" class="btn btn-sm btn-outline-dark" style="font-size: 14px">Работы мастера</button>
  32.                                 </div>
  33.                                 <small class="text-muted" style="font-size: 14px">
  34.                                    {% if (master.specialties != null) %}
  35.                                        {{ master.specialties.title }}
  36.                                    {% endif %}
  37.                                 </small>
  38.                             </div>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.                 {% endfor %}
  43.             </div>
  44.         </div>
  45.     </div>
  46.     <div class="modal fade bd-example-modal-lg" id="MastersModal" tabindex="-1" role="dialog">
  47.         <div class="modal-dialog modal-lg" style="max-width: 800px">
  48.             <div id="MastersModalContent" class="modal-content" style="top: 100px;">
  50.             </div>
  51.         </div>
  52.     </div>
  54. {% endblock %}
  55. {% block pagescripts %}
  56.     <script>
  57.         /**
  58.          * Показывает форму создания заказа на индивидуальный продукт
  59.          */
  60.         function showAddIndividualProductForm() {
  61.             $('#MastersModal').on('hidden.bs.modal', function () {
  62.                 closeModal();
  63.             });
  65.             let url = '/addIndividualProduct';
  66.             sendPostRequest(url)
  67.                 .then(function (response) {
  68.                     document.getElementById('MastersModalContent').innerHTML = response;
  69.                     $('#MastersModal').modal('show');
  70.                 });
  71.         }
  73.         /**
  74.          * Закрывает модальное окно создания заказа на индивидуальный продукт
  75.          */
  76.         function closeModal() {
  77.             $('#MastersModal').modal('hide');
  78.         }
  80.         /**
  81.          * Отправляет форму создания заказа
  82.          */
  83.         function submitAddIndividualProductForm() {
  84.             event.preventDefault();
  85.             let form = document.getElementById('addIndividualProductForm')
  86.             let formData = new FormData(form);
  87.             let url = '/addIndividualProduct';
  89.             sendPostRequest(url, formData)
  90.                 .then(function () {
  91.                     showSuccessAlert('Заказ успешно создан');
  92.                     setTimeout(function () {
  93.                         closeModal();
  94.                     }, 1000);
  95.                 })
  96.         }
  98.         /**
  99.          * Открывает модально окно 'Узнать подробности'
  100.          */
  101.         function showAskQuestionModal() {
  102.             let url = '/about/question';
  104.             $('#MastersModal').on('hidden.bs.modal', function () {
  105.                closeModal()
  106.             });
  108.             sendPostRequest(url)
  109.                 .then(function (response) {
  110.                     $('#MastersModal').modal('show');
  111.                     document.getElementById('MastersModalContent').innerHTML = response;
  112.                 });
  113.         }
  115.         /**
  116.          * Отправляет форму 'Задать вопрос' на сервер
  117.          */
  118.         function submitQuestionForm() {
  119.             let url = '/about/question';
  120.             let form = document.getElementById('questionForm');
  121.             let formData = new FormData(form);
  123.             sendPostRequest(url, formData)
  124.                 .then(function () {
  125.                     showSuccessAlert('Вопрос успешно создан!');
  126.                     setTimeout(function () {
  127.                         location.reload();
  128.                     }, 500);
  129.                 })
  130.         }
  132.     </script>
  133. {% endblock %}