templates/Services/Main/home.html.twig line 1

Open in your IDE?
  1. {% extends 'Services/base.html.twig' %}
  2. {% block header_logo %}
  3.   <div>
  4.     <img src="{{ asset('img/logos/logo-nord-services.svg') }}"
  5.          alt="Nord Services">
  6.   </div>
  7. {% endblock %}
  8. {% block header_logo_mobile %}
  9.   <div class="__containerLogoMobile">
  10.     <div>
  11.       <h1>
  12.         <img src="{{ asset('img/logos/logo-nord-services.svg') }}"
  13.              alt="Nord Services">
  14.       </h1>
  15.     </div>
  16.     {{ include('Nordinfo/Main/parts/menu_button.html.twig') }}
  17.   </div>
  18. {% endblock %}
  19. {% block header_epingles %}
  20.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  21. {% endblock %}
  22. {% block body %}
  23.   <main tabindex="-1" id="mainContent" role="main">
  24.     <div class="container pTMd pBMd">
  25.       <p class="descHomeTop">{{ home.presentation }}</p>
  26.       <h1 class="headingSection mBMd--imp mTMd--imp">Services à la Une</h1>
  27.       <div class="containerGridServices">
  28.         <ul class="gridServices">
  29.           {% set array_already_added = [] %}
  30.           {% set compteur = 0 %}
  31.           {% for service in home.services %}
  32.             {% if service.statut.id == 5 %}
  33.               {% set array_already_added = array_already_added|merge([service.id]) %}
  34.               <li>
  35.                 {% include 'Services/Main/components/item-service.html.twig' with {
  36.                   'item_service_url':path('services_detail_service', {'slug': service.aliasUrl}),
  37.                   'item_service_title':service.titre,
  38.                   'item_service_sous_profils':service.sousprofils,
  39.                   'item_service_grand_profils':service.grandprofils,
  40.                   'item_service_count_sous_profils':count_sous_profils
  41.                 } %}
  42.               </li>
  43.               {% set compteur = compteur + 1 %}
  44.             {% endif %}
  45.           {% endfor %}
  46.           {% for service in services_forcomplete %}
  47.             {% if service.id not in array_already_added and compteur < 9 %}
  48.               <li>
  49.                 {% include 'Services/Main/components/item-service.html.twig' with {
  50.                   'item_service_url':path('services_detail_service', {'slug': service.aliasUrl}),
  51.                   'item_service_title':service.titre,
  52.                   'item_service_sous_profils':service.sousprofils,
  53.                   'item_service_grand_profils':service.grandprofils,
  54.                   'item_service_count_sous_profils':count_sous_profils
  55.                 } %}
  56.               </li>
  57.               {% set compteur = compteur + 1 %}
  58.             {% endif %}
  59.           {% endfor %}
  60.         </ul>
  61.       </div>
  62.     </div>
  63.     <div class="containerAllServices">
  64.       <div class="__containerBtnToggleCollapse">
  65.         <button class="__btnToggleCollapse collapsed" type="button" id="btnToggleCollapse"
  66.                 aria-expanded="false" aria-controls="collapseAllServices">
  67.           <span class="__inner">
  68.           <span title="Déplier tous les services" class="__text">Tous les services</span>
  69.           <span title="Replier tous les services" class="__text --close">Tous les services</span>
  70.           <span class="__icon">{{ source('svg/icons/icon-chevron.svg') }}</span>
  71.         </span>
  72.         </button>
  73.       </div>
  74.       <div class="collapse __collapseAllServices" id="collapseAllServices">
  75.         <div class="card card-body">
  76.           <div class="__containerMenuServices mBSm">
  77.             <ul class="__menuServices">
  78.               <li><a href="{{ path('services_services', {'slug': 'particulier'}) }}" id="particuliers"><span>Particulier</span></a></li>
  79.               <li><a href="{{ path('services_services', {'slug': 'professionnel'}) }}" id="professionnels"><span>Professionnel</span></a></li>
  80.               <li><a href="{{ path('services_services', {'slug': 'association'}) }}" id="associations"><span>Association</span></a></li>
  81.               <li><a href="{{ path('services_services', {'slug': 'collectivite'}) }}" id="collectivites"><span>Collectivité</span></a></li>
  82.             </ul>
  83.           </div>
  84.           <div class="__listAllServices pBSm">
  85.             <div class="__loader" id="containerLoaderAllServices">
  86.               <span class="loader">Chargement en cours</span>
  87.             </div>
  88.             <ul class="__inner" id="containerListAllServices" style="display:none;">
  89.               <li class="__col"><ul id="colAllServices1"></ul></li>
  90.               <li class="__col"><ul id="colAllServices2"></ul></li>
  91.               <li class="__col"><ul id="colAllServices3"></ul></li>
  92.             </ul>
  93.           </div>
  94.         </div>
  95.         <button class="__btnCloseCollapseAllServices collapsed" type="button" id="btnCloseCollapse"
  96.                 aria-expanded="false" aria-controls="collapseAllServices">
  97.         <span class="__inner">
  98.           <span class="__text">Replier tous les services</span>
  99.           <span class="__icon">{{ source('svg/icons/icon-chevron.svg') }}</span>
  100.         </span>
  101.         </button>
  102.       </div>
  103.       <div class="spacerMd __spacerMdCollapseAllServices" id="spacerMdCollapseAllServices"></div>
  104.     </div>
  105.     {% if nordinfo_rss|length > 0 %}
  106.       <div class="containerGridPosts --nordInfo">
  107.         <div class="container">
  108.           <h2 class="__titleImg --nordServicesHomepage"><img src="{{ asset('img/logos/logo-nord-info.svg') }}" alt="Nord Info"></h2>
  109.           <ul class="gridPosts">
  110.             {% for post in nordinfo_rss %}
  111.               <li class="__col">
  112.                 {{ include('Lenord/Main/parts/item-post.html.twig') }}
  113.               </li>
  114.             {% endfor %}
  115.             <li class="__col">
  116.               <a href="https://info.lenord.fr" class="__btnLoadMore" title="Toute l'info">
  117.                 <div class="__inner">
  118.                   <div>
  119.                     <div>{{ source('svg/icons/icon-plus.svg') }}</div>
  120.                     <div><p><span class="__text">Toute l'info</span>&nbsp;<span class="__icon-external">{{ source('svg/icons/icon-external.svg') }}</span></p></div>
  121.                   </div>
  122.                 </div>
  123.               </a>
  124.             </li>
  125.           </ul>
  126.         </div>
  127.       </div>
  128.     {% endif %}
  129.   </main>
  130. {% endblock %}
  131. {% block footer_top %}
  132.   {% include 'Nordinfo/Main/parts/our-websites.html.twig' %}
  133. {% endblock %}
  134. {% block include_js %}
  135.   <script type="text/javascript">
  136.     $(function () {
  137.       getServicesByGrandprofil('particuliers');
  139.       function getServicesByGrandprofil(alias_url) {
  140.         $('#colAllServices1').empty();
  141.         $('#colAllServices2').empty();
  142.         $('#colAllServices3').empty();
  143.         $.ajax({
  144.           url: "{{ path('services_ajax_getServices') }}",
  145.           data: {
  146.             'alias': alias_url
  147.           },
  148.           type: "POST",
  149.           success: function (response) {
  150.             let itemsCol1 = '';
  151.             let itemsCol2 = '';
  152.             let itemsCol3 = '';
  153.             let countCol = 1;
  154.             let current_theme = ''
  155.             let iconSvg = '<svg id="bc51b02a-6727-4f96-8768-b70af9591bf7" aria-hidden="true" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path id="f20331ee-d644-4f00-944e-94a17bbe28a2" data-name="Chevron" d="M2,67.25,46.61,22.16a4.74,4.74,0,0,1,6.72-.07l.07.07L98,67.25a7.12,7.12,0,0,1,0,10,6.91,6.91,0,0,1-9.77.07l-.07-.07L50,38.63,11.88,77.21a6.92,6.92,0,0,1-9.78.07L2,77.21a7.12,7.12,0,0,1,0-10"/></svg>';
  156.             $.each(response.datas, function (index, value) {
  157.               if (index === 0) {
  158.                 current_theme = value.id;
  159.                 itemsCol1 += "<li class='__itemService'><div class='__title'>";
  160.                 itemsCol1 += "<h3><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'><span>" + value.theme.toUpperCase() + "</span></h3>";
  161.                 itemsCol1 += "<button data-toggle='collapse' data-target='#collapse"+ value.id +"' type='button' aria-expanded='false' aria-controls='collapse"+ value.id +"'><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'>";
  162.                 itemsCol1 += "<h3><span>" + value.theme.toUpperCase() + "</span>" + iconSvg + "</h3></button></div><div class='collapse multi-collapse __collapseItemService' id='collapse"+ value.id +"'><ul>";
  163.               } else if (current_theme !== value.id) {
  164.                 current_theme = value.id;
  165.                 if (countCol === 1) {
  166.                   countCol = 2;
  167.                   itemsCol1 += "</ul></div></div>";
  168.                   itemsCol2 += "<li class='__itemService'><div class='__title'>";
  169.                   itemsCol2 += "<h3><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'><span>" + value.theme.toUpperCase() + "</span></h3>";
  170.                   itemsCol2 += "<button data-toggle='collapse' data-target='#collapse"+ value.id +"' type='button' aria-expanded='false' aria-controls='collapse"+ value.id +"'><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'>";
  171.                   itemsCol2 += "<h3 data-bs-toggle='collapse' data-target='#collapse"+ value.id +"' aria-expanded='false' aria-controls='collapse"+ value.id +"'><span>" + value.theme.toUpperCase() + "</span>" + iconSvg + "</h3></button></div><div class='collapse multi-collapse __collapseItemService' id='collapse"+ value.id +"'><ul>";
  172.                 } else if (countCol === 2) {
  173.                   countCol = 3;
  174.                   itemsCol2 += "</ul></div></div>";
  175.                   itemsCol3 += "<li class='__itemService'><div class='__title'>";
  176.                   itemsCol3 += "<h3><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'><span>" + value.theme.toUpperCase() + "</span></h3>";
  177.                   itemsCol3 += "<button data-toggle='collapse' data-target='#collapse"+ value.id +"' type='button' aria-expanded='false' aria-controls='collapse"+ value.id +"'><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'>";
  178.                   itemsCol3 += "<h3 data-bs-toggle='collapse' data-target='#collapse"+ value.id +"' aria-expanded='false' aria-controls='collapse"+ value.id +"'><span>" + value.theme.toUpperCase() + "</span>" + iconSvg + "</h3></button></div><div class='collapse multi-collapse __collapseItemService' id='collapse"+ value.id +"'><ul>";
  179.                 } else if (countCol === 3) {
  180.                   countCol = 1;
  181.                   itemsCol3 += "</ul></div></div>";
  182.                   itemsCol1 += "<li class='__itemService'><div class='__title'>";
  183.                   itemsCol1 += "<h3><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'><span>" + value.theme.toUpperCase() + "</span></h3>";
  184.                   itemsCol1 += "<button data-toggle='collapse' data-target='#collapse"+ value.id +"' type='button' aria-expanded='false' aria-controls='collapse"+ value.id +"'><img src='" + value.pictogramme_vert + "' alt='' aria-hidden='true'>";
  185.                   itemsCol1 += "<h3 data-bs-toggle='collapse' data-target='#collapse"+ value.id +"' aria-expanded='false' aria-controls='collapse"+ value.id +"'><span>" + value.theme.toUpperCase() + "</span>" + iconSvg + "</h3></button></div><div class='collapse multi-collapse __collapseItemService' id='collapse"+ value.id +"'><ul>";
  186.                 }
  187.               }
  188.               if (countCol === 1) {
  189.                 itemsCol1 += "<li><a href='/" + value.alias_url + "'>" + value.titre + "</a></li>";
  190.               } else if (countCol === 2) {
  191.                 itemsCol2 += "<li><a href='/" + value.alias_url + "'>" + value.titre + "</a></li>";
  192.               } else if (countCol === 3) {
  193.                 itemsCol3 += "<li><a href='/" + value.alias_url + "'>" + value.titre + "</a></li>";
  194.               }
  195.             });
  196.             itemsCol1 += "</ul></li>";
  197.             $('#colAllServices1').append(itemsCol1);
  198.             $('#colAllServices2').append(itemsCol2);
  199.             $('#colAllServices3').append(itemsCol3);
  200.             $('#containerLoaderAllServices').hide();
  201.             $('#containerListAllServices').show();
  202.           }
  203.         });
  204.       }
  206.       $('.loadServices').on('click', function (event) {
  207.         event.preventDefault();
  208.         var alias_url = $(this).attr('id');
  209.         getServicesByGrandprofil(alias_url);
  210.       });
  211.     });
  212.   </script>
  213. {% endblock %}