templates/prestations/prestations.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Consultations Tarots Téléphone, Visio, Email, Domicile | Les Ailes Dorées{% endblock %}
  5. {% block metas %}
  6. <meta name="title" content="Consultations Tarots Téléphone, Visio, Email, Domicile | Les Ailes Dorées">
  7. <meta name="description" content="Je vous propose trois types de consultations de tarots selon vos besoins et votre budget : consulation rapide de 1 heure, consultation 1 question de 30 minutes, et une consultation complète de 3 heures. A mon domicile ou au votre dans l'Allier, ou par téléphone, e-mail, fichier audio, visio conférence.">
  8. {% endblock %}
  10. {% block stylesheets %}
  11. {{ parent() }}
  12. {{ encore_entry_link_tags('prestation_page') }}
  13. {% endblock %}
  15. {% block body %}
  16. {% include '/partials/header.html.twig' with {'current_page':'prestations'} %}
  17. <!-- Main Content -->
  18. <main class="main-content app_prestation">
  19. <div class="tm-section contact-area tm-padding-section">
  20. <div class="container position-relative">
  21. <div class="row">
  22. <div class="col-lg-12">
  23. <h2 class="text-yellow text-uppercase">Prestations</h2>
  24. <form action="{{path('app_appointment')}}" method="GET">
  25. <div class="accordion" id="prestationAccordion">
  26. {% for cat in categories %}
  27. {% if cat.valid %}
  28. <div class="accordion-item">
  29. <h2 class="accordion-header" id="heading{{cat.id}}">
  30. <button class="accordion-button my-categorie" type="button" data-bs-toggle="collapse" data-bs-target="#{{cat.slug}}" aria-expanded="false" aria-controls="{{cat.slug}}">
  31. {{cat.nom}}
  32. </button>
  33. </h2>
  34. <div id="{{cat.slug}}" class="accordion-collapse collapse" aria-labelledby="heading{{cat.id}}" data-bs-parent="#prestationAccordion">
  36. <div class="accordion-body">
  37. <a href="{{ path('app_prestations_category_details', {'id': cat.id}) }}"
  38. class="tm-button tm-button-yellow text-yellow">En savoir plus</a>
  39. <!-- PRESTATION ITEM DETAILS -->
  40. <div class="accordion" id="prestationDetails{{cat.id}}Accordion">
  41. {% for prest in cat.prestations|sort((a, b) => a.ordre <=> b.ordre) %} {% if prest.valid %}
  42. <div class="accordion-item accordion-item--sub">
  43. <h2 class="accordion-header" id="prestationDetailsHeading{{prest.id}}">
  44. <button class="accordion-button my-prestation py-2" type="button" data-bs-toggle="collapse" data-bs-target="#prestationDetailsCollapse{{prest.id}}" aria-expanded="{% if loop.index0 == 0 %}true{% else %}false{% endif %}" aria-controls="prestationDetailsCollapse{{prest.id}}" data-prestation-id={{prest.id}}>
  45. <div class="d-block">
  46. <span>{{prest.nom}} </span>
  47. <div>({{prest.prix | number_format(2, ',', ' ') }} €)</div>
  49. </div>
  50. </button>
  51. </h2>
  52. <div id="prestationDetailsCollapse{{prest.id}}" class="accordion-collapse collapse {% if loop.index0 == 0 %}show{% endif %}" aria-labelledby="prestationDetailsHeading{{prest.id}}" data-bs-parent="#prestationDetails{{cat.id}}Accordion">
  53. <div class="accordion-body">
  54. <div class="row">
  55. <div class="col-lg-5">
  56. {# <p>Une question, un domaine de vie, un bilan : un jeu complet et précis C'est la consultation la plus c...</p> #}
  57. {% for type in prest.types %}
  58. {% if type.statut == 1 %}
  59. <div class="form-check">
  60. <input class="form-check-input" type="radio" name="typeConsultation{{prest.id}}" id="typeConsultation{{type.id}}" {% if loop.index0 == 0 %}checked {% endif %} value="{{type.typeConsultation.id}}">
  61. <label class="form-check-label" for="typeConsultation{{type.id}}">
  62. {{type.typeConsultation.nom}} {% if type.typeConsultation.description %} ({{type.typeConsultation.description}}) {% endif %}
  63. </label>
  64. </div>
  65. {% endif %}
  66. {% endfor %}
  67. </div>
  68. <div class="col-lg-7">
  69. <ul class="list-group">
  70. {% for opt in prest.options %} {% if opt.valid %}
  71. <li class="list-group-item">
  72. <div>
  73. <span>{{opt.nom}}</span>
  74. <div>{% if (opt.prix and opt.prix > 0) %}{{opt.prix | number_format(2, ',', ' ') }} € {% endif %}</div>
  75. </div>
  76. <div>
  77. <div class="form-check">
  78. <input class="form-check-input my-option prestationDetailsCollapse{{prest.id}}" name="prestationDetailsCollapseFlexCheckDefault{{prest.id}}" type="checkbox" id="prestationDetailsCollapseFlexCheckDefault{{opt.id}}" value="{{opt.id}}" {% if opt.defaut %}checked{% endif %} {% if prest.nbMax and prest.nbMax > 0 %} onchange="checkMax({{prest.nbMax}}, 'prestationDetailsCollapse{{prest.id}}')" {% endif %}>
  79. <label class="form-check-label" for="prestationDetailsCollapseFlexCheckDefault{{opt.id}}">
  80. </label>
  81. </div>
  82. </div>
  83. {% if opt.avecChoix %}
  84. <div class="d-flex align-items-center flex-wrap atelier-wrapper" id="atelier-wrapper-{{opt.id}}">
  85. {% for i in opt.debutChoix..(opt.debutChoix + opt.nbrChoix - 1) %}
  86. <button type="button" data-numero="{{i}}" class="option-atelier tm-button tm-button-yellow mt-30 {% if i == opt.debutChoix %}active{% endif %}" style="margin-right: 8px;">Atelier {{i}}</button>
  87. {% endfor %}
  88. </div>
  89. {% endif %}
  90. </li>
  91. {% endif %} {% endfor %}
  93. </ul>
  95. </div>
  96. </div>
  98. </div>
  99. </div>
  100. </div>
  101. {% endif %} {% endfor %}
  102. </div>
  103. <!-- PRESTATION ITEM DETAILS -->
  104. </div>
  105. </div>
  106. </div>
  107. {% endif %}
  108. {% endfor %}
  109. </div>
  110. <div class="d-flex align-items-center justify-content-center py-4">
  111. <button type="submit" id="take-appointment-btn" class="tm-button tm-button-yellow active button--loading d-flex align-items-center">
  112. <span>Prendre un rendez-vous</span>
  113. <div class="spinner-border ms-2 my-spinner d-none" role="status">
  114. <span class="sr-only">Chargement...</span>
  115. </div>
  116. </button>
  117. </div>
  118. </form>
  119. </div>
  120. </div>
  121. </div>
  123. </main>
  124. <!--// Main Content -->
  126. {% endblock %}
  128. {% block javascripts %}
  129. {{ parent() }}
  130. <script>
  132. function expandPrestation(){
  133. if (location.hash !== null && location.hash !== "") {
  134. let sectionToExpand = location.hash;
  135. const section = document.querySelector(sectionToExpand);
  136. console.log(section);
  137. if (section) {
  139. const collapse = new bootstrap.Collapse(section, { parent: '#prestationAccordion' });
  140. collapse.show();
  141. section.scrollIntoView({ behavior: "smooth", block: 'center' });
  143. }
  144. }
  145. }
  146. expandPrestation();
  147. window.addEventListener('hashchange', () => {
  148. expandPrestation();
  149. }, false);
  151. var classLoad = '.my-spinner';
  152. function load(btn, is = true){
  153. if(is){
  154. $(btn).find(classLoad).removeClass('d-none');
  155. } else{
  156. $(btn).find(classLoad).addClass('d-none');
  157. }
  158. $(btn).attr('disabled', is);
  159. }
  162. $(document).ready(function () {
  163. const error = () => {
  164. alert('Choisissez une prestation');
  165. }
  166. $('#take-appointment-btn').click(function (e){
  167. e.preventDefault();
  168. let ariaControlsCat = $('.my-categorie[aria-expanded="true"]').attr('aria-controls');
  169. if(!ariaControlsCat){
  170. return error();
  171. }
  172. let prestationId = $(`#${ariaControlsCat} .my-prestation[aria-expanded="true"]`).data('prestationId');
  173. if(!prestationId){
  174. return error();
  175. }
  177. let typeConsultationId = $(`input[name="typeConsultation${prestationId}"]:checked`).val();
  178. if(!typeConsultationId){
  179. alert('Choisissez la type de consultation');
  180. }
  182. let options = [];
  183. $(`#prestationDetailsCollapse${prestationId} input.my-option:checked`).each(function (){
  184. const opt = {id: $(this).val()};
  185. const numero = $('#atelier-wrapper-'+opt.id+' .option-atelier.active').data('numero');
  186. opt.numero = numero ?? null;
  187. options.push(opt);
  188. });
  190. console.log('prestationId', prestationId);
  191. console.log('typeConsultationId', typeConsultationId);
  192. console.log('options', options);
  194. let params = {prestationId, typeConsultationId, options};
  195. let request = $.ajax({
  196. url: "{{path('app_take_appointment')}}",
  197. type: 'POST',
  198. data : JSON.stringify(params),
  199. contentType: 'application/json; charset=utf-8',
  200. dataType: "json"
  201. });
  203. let btn = $(this);
  204. request.done(function(data) {
  205. load(btn, false);
  206. console.log(data);
  207. let pathname = "{{path('app_take_appointment_step_1', {id: 'reservationId'})}}";
  208. window.location.pathname = pathname.replace('reservationId', data.reservationId);
  209. });
  211. request.fail(function(jqXHR, textStatus) {
  212. load(btn, false);
  213. let data = jqXHR.responseJSON;
  214. alert('Erreur: '+data.message);
  215. });
  216. load(btn);
  217. });
  219. const optionsDOM = $('.my-option');
  220. const blockAvecChoixDOM = $('#block-avec-choix');
  221. function openChoix(target = null){
  222. target = target ?? optionsDOM;
  223. $(target).each(function (){
  224. const block = $('#atelier-wrapper-'+$(this).val());
  225. /*if($(this).is(':checked')){
  226. $(block).removeClass('d-none');
  227. } else{
  228. $(block).addClass('d-none');
  229. }*/
  230. })
  232. }
  234. $(optionsDOM).change(function (e){
  235. openChoix(e.target);
  236. });
  238. $('.option-atelier').click(function (){
  239. $(this).siblings().removeClass('active');
  240. $(this).addClass('active');
  241. });
  243. openChoix();
  245. });
  247. function checkMax(max, className){
  248. if(max && max > 0){
  249. let casesCochees = document.querySelectorAll('.'+className);
  250. let nombreCasesCochees = 0;
  252. // Parcourez les cases à cocher et comptez celles qui sont cochées
  253. for (let i = 0; i < casesCochees.length; i++) {
  254. if (casesCochees[i].checked) {
  255. nombreCasesCochees++;
  256. if(nombreCasesCochees > max) {
  257. casesCochees [i].checked = false;
  258. alert("Vous ne pouvez pas choisir plus de " + max + " option(s).");
  259. break;
  260. }
  261. }
  262. }
  263. }
  264. }
  265. </script>
  266. {% endblock %}