templates/fiche/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block head %}
  3.     <script type="application/ld+json">
  4.         {
  5.             "@context": "https://schema.org",
  6.             "@type": "School",
  7.             "name": "{{ etablissement.denomination }}",
  8.             "address": {
  9.                 "@type": "PostalAddress",
  10.                 "streetAddress":"{{ etablissement.adresse2 }}",
  11.                 "addressLocality": "{{etablissement.ville.departement.libelle}}",
  12.                 "addressRegion": "{{ etablissement.region.id }}",
  13.                 "postalCode": "{{ etablissement.codePostal }}",
  14.                 "addressCountry": "{{ etablissement.region.pays.id }}"
  15.             },
  16.             "geo": {
  17.                 "@type": "GeoCoordinates",
  18.                 "latitude": "{{ etablissement.latitude }}",
  19.                 "longitude": "{{ etablissement.longitude }}"
  20.             },
  21.             "url": "{{ etablissement.url }}",
  22.             "telephone": "{{ etablissement.telephonePrincipal }}",
  23.             "email" : "{{ etablissement.emailPrincipal }}"
  24.         }
  25.     </script>
  27. {% endblock %}
  30. {% block stylesheets %}
  31.     {% if etablissement.autoriseTelephonePayant %}
  32.         <link rel="preload" href="https://wshiconnect.mediakiosque.com/hiconnectjs/css/style-1.0.2.css" as="style" onload="this.rel='stylesheet'">
  33.         <noscript><link rel="stylesheet" href="https://wshiconnect.mediakiosque.com/hiconnectjs/css/style-1.0.2.css"></noscript>
  35.         <style>
  36.         .showNumberBtn .btn.green {
  37.             background: #fff !important;
  38.             all: unset;
  39.         }
  40.         </style>
  41.     {% endif %}
  42.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
  44.     {# Btn Sticky sur mobile #}
  45.     <style>
  46.     
  47.     </style>
  48. {% endblock %}
  50. {# ----- javascripts -------------------------------------------------------- #}
  52. {% block javascripts %}
  53.     {% if etablissement.autoriseTelephonePayant %}
  54.         <script type="text/javascript" src="https://wshiconnect.mediakiosque.com/hiconnectjs/js/hmd_hiconnect-2.0.0-{{ hiConnectJskey }}.js?jquery=no" defer></script>
  55.         <script>
  56.             var hiConnectInterval = setInterval(function() {
  57.             if (typeof(jQuery) !== 'undefined' && typeof($.fn.hmdHiconnect) !== 'undefined') {
  58.                 clearInterval(hiConnectInterval);
  60.                 $(document).ready(function($) {
  61.                     $('.hmd_hiconnect').hmdHiconnect();
  62.                 });
  63.             }
  64.         }, 100);
  65.         </script>
  66.     {% endif %}
  68.     <script>
  69.         // Character counter
  70.         var textarea = document.querySelector("textarea");
  71.         var maxlength = textarea.getAttribute("maxlength");
  72.         document.getElementById('textarea_feedback').innerHTML = maxlength + " caractères restants";
  74.         textarea.addEventListener("input", function(){
  75.             var maxlength = this.getAttribute("maxlength");
  76.             var currentLength = this.value.length;
  78.             if( currentLength > maxlength ){
  79.                 message = "Pas plus de " + maxlength + " caractères SVP.";
  80.                 return;
  81.             }else{
  82.                 message = maxlength - currentLength + "  caractères restants";
  83.             }
  84.             document.getElementById('textarea_feedback').innerHTML = message;
  86.         });
  87.     </script>
  89.     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
  90.     <script>
  91.         // Map affichée directement dans la fiche
  92.         {% if not etablissement.isClient %}
  93.         const mapzero = L.map('mapzero', {
  94.             zoomControl: false,
  95.             dragging: false,
  96.             scrollWheelZoom: false,
  97.             doubleClickZoom: false,
  98.             boxZoom: false,
  99.             keyboard: false,
  100.             tap: false,
  101.             touchZoom: false,
  102.         }).setView([{{etablissement.latitude}}, {{etablissement.longitude}}], 15);
  103.         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  104.             attribution: '',
  105.             interactive: false
  106.         }).addTo(mapzero);
  107.         L.marker([{{etablissement.latitude}}, {{etablissement.longitude}}], {interactive: false}).addTo(mapzero);
  108.         {% else %}
  109.         const mapzero = L.map('mapzero').setView([{{etablissement.latitude}}, {{etablissement.longitude}}], 15);
  110.         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  111.             attribution: ''
  112.         }).addTo(mapzero);
  113.         L.marker([{{etablissement.latitude}}, {{etablissement.longitude}}]).addTo(mapzero);
  114.         {% endif %}
  115.     </script>
  117.     
  118.     <script>
  119.     {# Afficher le bouton "Contacter l'étab" au scroll sur la fiche établissement après 20% de scroll #}
  120.     (function () {
  121.     const btn = document.querySelector('.container.page-fiche .contact-btn-like');
  122.     if (!btn) return;
  124.     window.addEventListener('scroll', () => {
  125.         const scrolled = window.scrollY;
  126.         const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  127.         const percent = (scrolled / docHeight) * 100;
  129.         btn.classList.toggle('is-visible', percent >= 10); // Pourcentage de scroll avant d'afficher le bouton
  130.     }, { passive: true });
  131.     })();
  133.     {# Cacher le btn quand le form est visible #}
  134.     (function() {
  135.         const el = document.getElementById('di-inline-mobile'); // ton élément
  136.         if (!el) {
  137.             console.log('Élément introuvable !');
  138.             return;
  139.         }
  141.         const observer = new IntersectionObserver(
  142.             ([entry]) => {
  143.                 const btn = document.querySelector('.container.page-fiche .contact-btn-like');
  144.                 if (entry.isIntersecting) {
  145.                     // console.log('Élément VISIBLE à l’écran');
  146.                     btn.classList.add('d-none');
  147.                 } else {
  148.                     // console.log('Élément NON visible à l’écran');
  149.                     btn.classList.remove('d-none');
  150.                 }
  151.             },
  152.             {
  153.             threshold: 0.2 // déclenche dès que 20% de l’élément est visible
  154.             }
  155.         );
  157.         observer.observe(el);
  158.     })();
  160.     {# déplacer la carte après le formulaire, en version mobile #}
  161.     {#
  162.     document.addEventListener('DOMContentLoaded', function() {
  163.         const staticMap = document.getElementById('static-map');
  164.         const diInline = document.getElementById('di-inline-mobile');
  166.         function moveMap() {
  167.             if (window.innerWidth <= 767 && staticMap && diInline) {
  168.                 // Vérifie si la map n'est pas déjà déplacée
  169.                 if (!diInline.nextElementSibling || diInline.nextElementSibling.id !== 'static-map') {
  170.                     diInline.insertAdjacentElement('afterend', staticMap);
  171.                 }
  172.             }
  173.         }
  175.         moveMap();
  176.         window.addEventListener('resize', moveMap);
  177.     });
  178.     #}
  179.     </script>
  181. {% endblock %}
  184. {# ----- title, description et autres metadatas ----------------------------- #}
  185. {% set type = "" %}
  186. {% if etablissement.typeClient == 'internat' %}
  187.     {% set type = "internat" %}
  188. {% elseif etablissement.typeClient == 'organisme' %}
  189.     {% set type = "organisme" %}
  190. {% elseif etablissement.typeClient == 'fournisseur' %}
  191.     {% set type = "fournisseur" %}
  192. {% endif %}
  194. {%- block etabLieu -%}
  195.     {%- autoescape false -%}
  196.         {{ etablissement.denomination }} - {{ etablissement.codePostal }}
  197.         {%- if etablissement.ville %}
  198.             {%- if etablissement.ville.libelle %} {{  etablissement.ville.libelle -}}{%- endif -%}
  199.             {%- if etablissement.ville.departement and etablissement.ville.departement.libelle -%}
  200.                 - {{ etablissement.ville.departement.id }} {{ etablissement.ville.departement.libelle -}}
  201.             {%- endif -%}
  202.         {%- endif -%}
  203.     {%- endautoescape -%}
  204. {%- endblock -%}
  206. {% block title -%}
  207.     {%- autoescape false -%}
  208.         {{- block('etabLieu') -}}
  209.         {{- etablissement.categoriePrimaire ? ' - ' ~ etablissement.categoriePrimaire.libelle -}}
  210.     {%- endautoescape -%}
  211. {%- endblock %}
  213. {% block description -%}
  214. {%- autoescape false -%}
  215. {{- block('etabLieu') }} {{ etablissement.motsCles -}}
  216. {# {{- (etablissement.compileTexteReferencement | default(etablissement.motsCles)) | striptags | u.truncate(160, '...', false) -}} #}
  217. {%- endautoescape -%}
  218. {%- endblock %}
  220. {% set siteLdJson = siteLdJson | merge(['etablissement']) %}
  223. {# ----- contenu ------------------------------------------------------------ #}
  225. {% block body %}
  227. {% set imgAlt = [
  228.     etablissement.codePostal,
  229.     (etablissement.ville ? etablissement.ville.libelle : ''),
  230.     etablissement.denomination,
  231. ]|join(' - ')|trim(' -') %}
  233. <section class="container page-fiche {{ type ? type : typeOnglet(etablissement.type) }}  ">
  234.     {# ----- Breadcrumb ----------------------------------------------------- #}
  236.     <div id="breadcrumb">
  237.         {% include '_includes/breadcrumb-etablissement.html.twig' with {
  238.             'etablissement': etablissement,
  239.         } only %}
  240.     </div>
  241.     <div>
  242.         <header>
  243.             {# <div class="col-12 col-lg-6 d-left"> #}
  244.             <div class="col">
  245.                 {# Logo + Dénomination #}
  246.                 <div class="container description-new mt-3 mb-3">
  247.                     <div class="row align-items-center">
  248.                         <div class="col-lg-2 col-md-2" style="">
  249.                             <div class="row g-0">
  250.                                 <div class="col">
  251.                                     <figure class="fiche-logo">
  252.                                         {% if etablissement.isClient and etablissement.logo %}
  253.                                             <img src="{{ vich_uploader_asset(etablissement.logo, 'logoFile') | imagine_filter('etab_fiche_logo') }}" alt="{{ imgAlt }}" title="{{ imgAlt }}">
  254.                                             {% set figure = vich_uploader_asset(etablissement.logo, 'logoFile') | imagine_filter('etab_fiche_logo') %}
  255.                                         {% else %}
  256.                                             <span class="no-logo"></span>
  257.                                         {% endif %}
  258.                                     </figure>
  259.                                 </div>
  260.                                 <div class="col-auto d-md-none text-end">
  261.                                     {# Bouton de contact #}
  262.                                     <div class="text-center contact-btn-like-top" onclick="document.getElementById('di-inline').scrollIntoView({ behavior: 'smooth' });">
  263.                                         <div id="top-level1">Besoin d'informations ?</div>
  264.                                         <div id="top-level2">Contactez l'établissement</div>
  265.                                     </div>
  266.                                 </div>
  267.                             </div>
  268.                         </div>
  269.                         <div class="col-lg-10 col-md-10 col-sm-12">
  270.                             <h1 class="denomination">{{ etablissement.denomination }}</h1>
  271.                             {% if type != 'fournisseur' and type != 'organisme' %}
  272.                             <div class="denomination-footer">
  273.                                 {% if etablissement.catholique %}Enseignement catholique{% endif %}
  274.                                 {% if etablissement.sousContrat %}<span class="badge-sous-contrat">Sous contrat</span>{% endif %}
  275.                             </div>
  276.                             {% endif %}
  277.                         </div>
  278.                     </div>
  279.                 </div>
  281.                 {# image étab + coords + btn "contact" + map #}
  282.                 <div class="container contact">
  283.                     <div class="row contact-bloc ">
  284.                         <div class="col-lg-4">
  285.                             {# ----- Diaporama/photo ---------------------------------------------- #}
  286.                             {% include 'fiche/_includes/diaporama.html.twig' with {
  287.                                 'etablissement': etablissement,
  288.                             } only %}
  289.                         </div>
  291.                         <div class="col-lg-4 mt-4 mt-lg-0">
  292.                             {# ----- Quelques chiffres  ------------------------------------------ #}
  293.                             {% if etablissement.chiffres is not empty and etablissement.chiffres != "0" %}
  294.                             <div class="titre-haut-1">Quelques chiffres</div>
  295.                             <ul class="list-unstyled liste-chiffres">
  296.                                 {{ en_quelques_chiffres(etablissement.chiffres) | raw }}
  297.                             </ul>
  298.                             {% elseif etablissement.getData is not empty and etablissement.chiffres != "0" %}
  299.                             <div class="titre-haut-1">Quelques chiffres</div>
  300.                             <ul class="list-unstyled liste-chiffres">
  301.                                 {% for item in etablissement.getData %}
  302.                                 <li>{{item.label}}: <b>{{item.value}}{{item.suffix}}</b> </li>
  303.                                 {% endfor %}
  304.                             </ul>
  305.                             {% endif %}
  306.                             
  307.                             {# ----- Adresse/Coordonnées (bloc "Localisation" )---------------------- #}
  308.                             <div class="coords">
  309.                                 {% include 'fiche/_includes/address.html.twig' with {
  310.                                     'etablissement': etablissement,
  311.                                 } only %}
  312.                             </div>
  314.                             {% if etablissement.isClient %}
  315.                             {# ----- JPO, actualité, offre d'emploi -- #}
  316.                             {% include 'fiche/_includes/infos.html.twig' %}
  317.                             {% endif %}
  319.                             {% if etablissement.isClient or etablissement.typeClient in ['organisme', 'fournisseur'] %}
  320.                             {# Bouton de contact #}
  321.                             <div class="contact-btn-like text-center" onclick="document.getElementById('di-inline').scrollIntoView({ behavior: 'smooth' });">
  322.                                 <div id="level1">Besoin d'informations ?</div>
  323.                                 <div id="level2">Contactez l'établissement</div>
  324.                             </div>
  325.                             {% endif %}
  327.                             {% include 'fiche/_includes/telephone-payant.html.twig' with {'etablissement': etablissement} only %}
  328.                         </div>
  330.                         <div class="col-lg-4 carte mt-4 mt-lg-0">
  331.                             {# ----- Carte ---------------------------------------------- #}
  332.                             {% if etablissement.latitude is not empty and etablissement.longitude is not empty %}
  333.                             <div id="static-map" style="min-height: 260px; height: 100%;" class="d-none d-lg-block">
  334.                                 
  335.                                
  336.                                     <div id="mapzero" style="width: 100%; height: 100%;">La carte de l'établissement...</div>
  337.                                     <div class="itineraire-map">
  338.                                         <a href="{{"https://www.google.com/maps/dir/?api=1&destination="~ etablissement.latitude ~"%2C"~ etablissement.longitude ~"&dir_action=navigate"}}" class="itineraire" target="_blank" rel="noopener">
  339.                                         Itinéraire
  340.                                         </a>
  341.                                     </div>
  342.                                     
  343.                                 <span class="map_marker"></span>
  344.                             </div>
  345.                             {% endif %}
  346.                         </div>
  347.                     </div>
  348.                 </div> 
  349.             </div>
  350.             <div class="d-block d-lg-none d-xl-none mb-4">
  351.                 {% if etablissement.isClient %}
  352.                     {# ----- Diplômes -- #}
  353.                     {% include 'fiche/_includes/diplomes.html.twig' %}
  354.                 {% endif %}
  355.             </div>
  356.            
  357.             <div class="d-none d-lg-block d-xl-block w-100">
  358.                 {% if etablissement.isClient %}
  359.                     {# ----- Diplômes -- #}
  360.                     {% include 'fiche/_includes/diplomes.html.twig' %}
  361.                 {% endif %}
  362.             </div>
  364.         </header>
  365.     </div>
  367.     <div class="wrap mt-4">
  368.         <section class="content">
  369.             <article>
  370.             {% if etablissement.isClient or etablissement.typeClient in ['organisme', 'fournisseur'] %}
  372.                 {# ----- Insertion -------------------------------------- #}
  373.                 {% include 'fiche/_includes/insertion.html.twig'  %}
  374.                 <span id="di-inline-mobile"></span>
  376.                 {# ----- Contacter établissement (bas de la fiche) ---------------- #}
  377.                 <div class="fiche-coords d-none d-lg-flex">
  378.                   {% if type == 'fournisseur' %}
  379.                   <div class="form">
  380.                       {% include '_includes/lien-masque.html.twig' with {
  381.                           'target': path('form-di', {id : etablissement.id}),
  382.                           'content': 'Contacter le fournisseur',
  383.                       } only %}
  384.                     </div>
  385.                   {% elseif type == 'organisme' %}
  386.                   <div class="form">
  387.                       {% include '_includes/lien-masque.html.twig' with {
  388.                           'target': path('form-di', {id : etablissement.id}),
  389.                           'content': 'Contacter l\'organisme',
  390.                       } only %}
  391.                       </div>
  392.                   {% else %} {# établissement ou internat #}
  393.                       {% include 'fiche/_includes/static-slider.html.twig' %}                      
  394.                   {% endif %}
  395.                 </div>
  396.             {% else %}
  398.                 {# ----- Options pour non-participant ------------------- #}
  399.                 {% include 'fiche/_includes/options-non-participant.html.twig' %}
  400.             {% endif %}
  401.             </article>
  403.             {# ----- Recommandations ---------------------------------------- #}
  404.             {% if not etablissement.isClient and etablissement.typeClient in ['établissement', 'internat'] %}
  405.                 {% include 'fiche/_includes/etablissements-proches-prospect.html.twig' with {
  406.                     'etablissement': etablissement,
  407.                     'etablissementsProches': etablissementsProches,
  408.                 } only %}
  409.             {% endif %}
  411.             {% if etablissement.typeClient in ['établissement', 'internat'] %}
  412.                 {% include 'fiche/_includes/etablissements-du-meme-groupe.html.twig' %}
  413.             {% endif %}
  415.             {# ----- Informations de contact ---------------------------------------- #}
  416.             <div class="fiche-module informations-contact">
  417.                 <h2 id="informations-contact">Autres contacts établissement</h2>
  418.                 <ul class="list-unstyled card-two-columns-old">
  419.                     <li>
  420.                         {% include 'fiche/_includes/telephone.html.twig' with {
  421.                             'etablissement': etablissement,
  422.                         } only %}
  423.                     </li>
  424.                     {% if etablissement.isClient %}
  425.                     <li class="website">
  426.                         {% include 'fiche/_includes/siteweb.html.twig' with {
  427.                             'etablissement': etablissement,
  428.                         } only %}
  429.                     </li>
  430.                     <li class="facebook">
  431.                         {% include 'fiche/_includes/facebook.html.twig' with {
  432.                             'etablissement': etablissement,
  433.                         } only %}
  434.                     {% endif %}
  435.                     </li>
  436.                 </ul>
  437.             </div>
  439.             {# ----- Contexte recherche --------------------------------------------- #}
  440.             {% block contexte %}
  441.                 {% include 'fiche/_includes/contexte-recherche.html.twig' with contexte only %}
  442.             {% endblock %}
  444.         </section>
  445.         <aside>
  446.             {% if etablissement.isClient %}
  447.                 {% include 'fiche/_includes/form-contacter-etablissement.html.twig' %}
  448.             {% endif %}
  450.             <div class="last-flex">
  451.                 {% include 'annuaire/_includes/lien-guide.html.twig' %}
  453.                 {% if etablissement.participant == false %}
  454.                 {% include '_includes/banners-list.html.twig' with {
  455.                     'emplacement': [],
  456.                 } only %}
  457.                 {% endif %}
  459.                 {% include '_includes/newsletter.html.twig' %}
  460.                 {% include '_includes/last-search.html.twig' %}
  461.                 {% include '_includes/last-establishment.html.twig' %}
  462.             </div>
  463.         </aside>
  464.     </div>
  465. </section>
  467. {# ----- Recommandations ---------------------------------------- #}
  468. {% if etablissement.isClient and etablissement.typeClient in ['établissement', 'internat'] %}
  469.     {% include 'fiche/_includes/etablissements-proches-client.html.twig' with {
  470.         'quoi': contexte.quoi,
  471.         'lieu': contexte.lieu,
  472.         'etablissement': etablissement,
  473.         'etablissementsProches': etablissementsProches,
  474.     } only %}
  475. {% endif %}
  477. {% endblock %}
  479. {% block data_layer %}
  480. <script>
  481. // 1. Contexte global de la page
  482. dataLayer.push({{ {
  483.     event: "page_context",
  484.     page_type: "fiche_etablissement",
  485.     fiche_type: etablissement.typeClient,
  486.     site_section: "annuaire",
  488.     education_niveau: typeOnglet(etablissement.type),
  489.     education_sous_niveau: null,
  491.     region: etablissement.ville.departement.region.libelle,
  492.     departement: etablissement.ville.departement.id,
  493.     ville: etablissement.ville.libelle,
  494.     code_postal: etablissement.codePostal,
  496.     etablissement_id: etablissement.id,
  497.     etablissement_nom: etablissement.denomination,
  498.     etablissement_segment: etablissement.isClient ? "client" : "prospect",
  499.     contrat_type: etablissement.sousContrat ? "sous_contrat" : "hors_contrat"
  500. }|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }});
  502. // 2. Événement métier : vue d’un établissement
  503. dataLayer.push({ ecommerce: null });
  504. dataLayer.push({{ {
  505.     event: "view_item",
  506.     ecommerce: {
  507.         items: [
  508.             {
  509.                 item_id: etablissement.id,
  510.                 item_name: etablissement.denomination,
  511.                 item_category: etablissement.typeClient,
  512.                 item_category2: typeOnglet(etablissement.type),
  513.                 item_category3: null,
  514.                 item_category4: etablissement.sousContrat ? "sous_contrat" : "hors_contrat",
  515.                 location_id: etablissement.ville.departement.id ~ "-" ~ etablissement.codePostal ~ "-" ~ etablissement.ville.libelle
  516.             }
  517.         ]
  518.     }
  519. }|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }});
  520. </script>
  522. {% if diEnvoyee %}
  523. <script>
  524.     dataLayer.push({{ {
  525.         event: "lead_demande_information",
  526.         etablissement_id: etablissement.id,
  527.         etablissement_nom: etablissement.denomination,
  528.         etablissement_segment: "client"
  529.     }|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }});
  530. </script>
  531. {% endif %}
  532. {% endblock %}