templates/jpo/list.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{{ block('h1') }}{% endblock %}
  4. {% block description %}Retrouvez sur le site enseignement-prive.info les journées portes ouvertes des établissements de l'enseignement privé.{% endblock %}
  6. {% block body %}
  7. <section class="container page-jpo">
  8.     <div id="breadcrumb">
  9.         {% include 'jpo/_includes/breadcrumb.html.twig' with {
  10.             'lieu' : lieu,
  11.         }
  12.             only %}
  13.     </div>
  14.     <div class="title">
  15.       <div class="jpo-h1-like">Journées Portes Ouvertes</div>
  16.       <div class="triangle-defaut"></div>
  17.     </div>
  18.     {% if etablissement is not null %}
  19.         <div class="recherche-contexte text-left" role="group">
  20.             <a href="#" onclick="history.back()" class="liste ">
  21.                 Retour à la fiche
  22.             </a>
  23.         </div>
  24.     {% endif %}
  25.     <div class="wrap">
  26.         <section>
  28.             <h1 class="jpo-h2-like">
  29.             {%- block h1 -%}
  30.             {% if seoTitre %}
  31.             {{seoTitre | raw}}
  32.             {% else %}
  33.             Journées Portes Ouvertes
  34.             {% endif %}
  35.             {%- endblock -%}
  36.             </h1>
  38.             {% if seoTexte %}<span id="jpo-intro">{{seoTexte | raw}}</span><br/>{% endif %}
  39.             {% if etablissement is null %}
  40.             {{ render(controller(
  41.                 'App\\Controller\\JPOController::blocJPOsALaUne',
  42.                 { type:'liste' }
  43.             )) }}
  44.             {% endif %}
  45.             <div class="w-100 d-md-block d-lg-none pb-4">
  46.                 {% include 'actualite-etablissement/_includes/search-options.html.twig' with { type: 'mobile'} %}
  47.             </div>
  48.             <div class="jpo-list-tri">
  49.                 <div class="jpo-month">
  50.                     <ul>
  51.                     {% for jpo in jpos %}
  52.                         {% if loop.first %}
  53.                             {% set previous_jpo = jpo %}
  54.                         {% else %}
  55.                             {% set previous_jpo = jpos[loop.index0 - 1] %}
  56.                         {% endif %}
  57.                         {% if loop.last %}
  58.                             {% set next_jpo = jpo %}
  59.                         {% else %}
  60.                             {% set next_jpo = jpos[loop.index0 + 1] %}
  61.                         {% endif %}
  63.                         {% if jpo.date | date('m') != previous_jpo.date | date('m') or previous_jpo == jpo %}
  64.                             {% for month in 1..12 %}
  65.                                 {% if jpo.date | date('n') == month %}
  66.                                     <li style="height: 38px;"><a href="#{{ jpo.date | date('n') }}" class="scroll-month">{{jpo.date | format_date(pattern='MMMM Y') }}</a></li>
  67.                                 {% endif %}
  68.                             {% endfor %}
  69.                         {% endif %}
  70.                     {% endfor %}
  71.                     </ul>
  72.                 </div>
  74.                 {% for jpo in jpos %}
  76.                 {% if loop.first %}
  77.                     {% set previous_jpo = jpo %}
  78.                 {% else %}
  79.                     {% set previous_jpo = jpos[loop.index0 - 1] %}
  80.                 {% endif %}
  81.                 {% if loop.last %}
  82.                     {% set next_jpo = jpo %}
  83.                 {% else %}
  84.                     {% set next_jpo = jpos[loop.index0 + 1] %}
  85.                 {% endif %}
  87.               {% if jpo.date | date('m') != previous_jpo.date | date('m') or previous_jpo == jpo %} <div id="{{jpo.date | date('n')}}"> <h2>{{jpo.date | format_date('full') }}</h2><div>{% endif %}
  88.                 <article class="{% if jpo.etablissement.jpoPlus == 1 %}bckgrnd-plus {% endif %}jpo-item"
  89.                     data-etab-id="{{ jpo.etablissement.id }}" 
  90.                     data-etab-nom="{{ jpo.etablissement.denomination | e('html_attr') }}" 
  91.                     data-etab-segment="{{ jpo.etablissement.isClient ? 'client' : 'prospect' }}"
  92.                     data-etab-type="{{ typeEtablissementSimple(jpo.etablissement.type) | e('html_attr') }}"
  93.                     data-etab-ville="{{ jpo.etablissement.ville ? jpo.etablissement.ville.slug | replace({'-': '_'}) : null }}"
  94.                     data-etab-location-id="{{ jpo.etablissement and jpo.etablissement.ville ? jpo.etablissement.ville.departement.id ~ '-' ~ jpo.etablissement.codePostal ~ '-' ~ jpo.etablissement.ville.libelle : null }}"
  95.                     data-jpo-id="{{ jpo.id }}" 
  96.                     data-jpo-date="{{ jpo.date | date('Y-m') }}"
  97.                     data-jpo-date-full="{{ jpo.date | date('Y-m-d') }}"
  98.                     data-jpo-index="{{ loop.index }}"
  99.                     data-trace-action="{{ constant('App\\Entity\\Trace::JPO') | e('html_attr') }}" 
  100.                     data-trace-etab="{{ jpo.etablissement.id | e('html_attr') }}"
  101.                 >
  102.                     {% if jpo.etablissement.jpoPlus == 1 %}
  103.                         <span class="badge-plus-jpo"></span>
  104.                     {% endif %}
  105.                     <div class="icon"></div>
  106.                     <figure class="resize">
  107.                         {% if jpo.etablissement.logo is not empty %}
  108.                             {% set imgSrc = vich_uploader_asset(jpo.etablissement.logo, 'logoFile') %}
  109.                             {% if imgSrc %}
  110.                                 <img class="resp" src='{{ vich_uploader_asset(jpo.etablissement.logo, 'logoFile') | imagine_filter('etab_hp_logo') }}' alt='{{jpo.lieu}}' width='140' height='140'/>
  111.                             {% endif %}
  112.                         {% endif %}
  113.                     </figure>
  114.                     <div class="content">
  115.                         <p class="date">{{jpo.date | format_date(pattern='d MMMM Y') }}</p>
  116.                         {#<p class="city">{{jpo.lieu | u.truncate(30, '…', true)}}</p>#}
  117.                         <p class="city">{{ jpo.etablissement.ville|lieuLibelle }}</p>
  118.                         <p class="estab">{{ jpo.etablissement.denomination | u.truncate(50, '…', true)}}</p>
  119.                     </div>
  120.                     <a class="see-more" href="{{ path('jpo-etab', {'id': jpo.id}) }}" data-trace-action="{{ constant('App\\Entity\\Trace::JPO') | e('html_attr') }}" data-trace-etab="{{ jpo.etablissement.id | e('html_attr') }}">Découvrir</a>
  121.                 </article>
  122.               {% if jpo.date | date('m') != next_jpo.date | date('m') or next_jpo == jpo %} </div></div> {% endif %}
  123.                 {% endfor %}
  124.             </div>
  125.         </section>
  126.         <aside>
  127.             {% include 'actualite-etablissement/_includes/search-options.html.twig' with { type: 'aside'} %}
  128.         </aside>
  129.     </div>
  130. </section>
  131. {% endblock %}
  133. {% block data_layer %}
  134. <script>
  135. window.dataLayer = window.dataLayer || [];
  137. // 1. Contexte global de la page liste
  138. dataLayer.push({
  139.   event: "page_context",
  140.   page_type: "liste_jpo",
  141.   liste_type: "portes_ouvertes",
  142.   site_section: "portes_ouvertes",
  144.   education_niveau: {{ (niveaux ? niveaux | join('_') : null) | json_encode(constant('JSON_UNESCAPED_UNICODE')) | raw }},
  146.   region: {{ (lieu ? lieu.slug | replace({'-': '_'}) : null) | json_encode(constant('JSON_UNESCAPED_UNICODE')) | raw }},
  147.   departement: null,
  148.   ville: null,
  149.   code_postal: null,
  151.   recherche_type: "jpo",
  152.   total_resultats: {{ jpos is defined and jpos ? jpos|length : 0 }},
  153.   numero_pagination: {{ app.request.query.get('page', 1) }}
  154. });
  156. // 2. Événement métier : affichage d'une liste de journées portes ouvertes
  157. dataLayer.push({ ecommerce: null });
  158. {% set items = [] %}
  159. {% if jpos is defined and jpos|length %}
  160.     {% for jpo in jpos %}
  161.         {% set item = {
  162.             'item_id': jpo.id,
  163.             'item_name': 'JPO - ' ~ jpo.etablissement.denomination ~ ' - ' ~ jpo.date | format_date(pattern='d MMMM Y'),
  164.             'item_category': 'journee_portes_ouvertes',
  165.             'item_category2': typeEtablissementSimple(jpo.etablissement.type),
  166.             'item_category3': jpo.date | date('Y-m'),
  167.             'item_category4': jpo.etablissement.ville ? jpo.etablissement.ville.slug | replace({'-': '_'}) : null,
  168.             'location_id': jpo.etablissement and jpo.etablissement.ville ? jpo.etablissement.ville.departement.id ~ "-" ~ jpo.etablissement.codePostal ~ "-" ~ jpo.etablissement.ville.libelle : null,
  169.             'index': loop.index,
  170.             'jpo_date': jpo.date | date('Y-m-d'),
  171.             'etablissement_id': jpo.etablissement.id,
  172.             'etablissement_nom': jpo.etablissement.denomination,
  173.             'etablissement_segment': jpo.etablissement.isClient ? 'client' : 'prospect'
  174.         } %}
  175.         {% set items = items|merge([item]) %}
  176.     {% endfor %}
  177. {% endif %}
  178. dataLayer.push({
  179.   event: "view_item_list",
  180.   ecommerce: {
  181.     item_list_id: "jpo_toutes",
  182.     item_list_name: "Journées portes ouvertes",
  183.     items: {{ items|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }}
  184.   }
  185. });
  187. document.addEventListener('click', function (event) {
  188.     const article = event.target.closest('article.jpo-item');
  190.     if (!article) {
  191.         return;
  192.     }
  194.     const item = {
  195.         item_id: article.dataset.jpoId,
  196.         item_name: 'JPO - ' + article.querySelector('.estab').textContent.trim() + ' - ' + article.querySelector('.date').textContent.trim(),
  197.         item_category: 'journee_portes_ouvertes',
  198.         etablissement_id: article.dataset.etabId,
  199.         etablissement_nom: article.dataset.etabNom,
  200.         etablissement_segment: article.dataset.etabSegment,
  201.         item_category2: article.dataset.etabType,
  202.         item_category3: article.dataset.jpoDate,
  203.         item_category4: article.dataset.etabVille,
  204.         location_id: article.dataset.etabLocationId,
  205.         index: article.dataset.jpoIndex,
  206.         jpo_date: article.dataset.jpoDateFull
  207.     };
  209.     dataLayer.push({ ecommerce: null });
  210.     dataLayer.push({
  211.         event: 'select_item',
  212.         ecommerce: {
  213.             item_list_id: 'jpo_toutes',
  214.             item_list_name: 'Journées portes ouvertes',
  215.             items: [item]
  216.         }
  217.     });
  218. });
  219. </script>
  220. {% endblock %}