templates/front/subpage/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'front/base_front.html.twig' %}
  3. {% block title %}
  4.     {{ 'Pages.Contact.Label' | trans({} , 'messages_front') }}
  5. {% endblock %}
  7. {% block stylesheets %}
  8.     {{ parent() }}
  9.     <link rel="preconnect" href="https://fonts.googleapis.com">
  10.     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  11.     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
  12. {% endblock %}
  14. {% block javascripts %}
  15.     {{ parent() }}
  16.     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  17. {% endblock %}
  19. {% block container %}
  21.     <section id="contact_main_arae">
  22.         <div class="container">
  24.             <div class="page_heading">
  25.                 <h2>{{ 'Pages.Contact.Messages.ContactUs' | trans({} , 'messages_front') }}</h2>
  26.                 <p>{{ 'Pages.Contact.Messages.ContactSubtitle' | trans({} , 'messages_front') }}</p>
  27.             </div>
  29.             <div class="contact_wrapper">
  31.                 {# ---------------- Agencies + individual maps ---------------- #}
  32.                 <div class="agencies_col">
  33.                     {% for agency in agencies %}
  34.                         <div class="agency_item">
  35.                             <div class="agency_map_box">
  36.                                 <div id="leaflet_{{ agency.id }}" class="agency_map" data-name="{{ agency.name }}"></div>
  37.                             </div>
  39.                             <div class="agency_details">
  40.                                 <h3>{{ agency.name }}</h3>
  41.                                 <ul>
  42.                                     <li>
  43.                                         <span class="icon_badge"><i class="fas fa-map-marker-alt"></i></span>
  44.                                         <span>
  45.                                             <strong>{{ 'Pages.Footer.Messages.Address' | trans({} , 'messages_front') }} :</strong>
  46.                                             {{ agency.address }}, {{ agency.city }}
  47.                                         </span>
  48.                                     </li>
  49.                                     {% if agency.email is defined and agency.email %}
  50.                                         <li>
  51.                                             <span class="icon_badge"><i class="fas fa-envelope"></i></span>
  52.                                             <span>
  53.                                                 <strong>{{ 'Pages.Common.Fields.Email' | trans({} , 'messages_front') }} :</strong> {{ agency.email }}
  54.                                             </span>
  55.                                         </li>
  56.                                     {% endif %}
  57.                                     <li>
  58.                                         <span class="icon_badge"><i class="fas fa-phone"></i></span>
  59.                                         <span>
  60.                                             <strong>{{ 'Pages.Common.Fields.Phone' | trans({} , 'messages_front') }} :</strong>
  61.                                             {{ agency.phone }}
  62.                                         </span>
  63.                                     </li>
  64.                                     {% if agency.whatsapp is defined and agency.whatsapp %}
  65.                                         <li>
  66.                                             <span class="icon_badge"><i class="fab fa-whatsapp"></i></span>
  67.                                             <span>
  68.                                                 <strong>whatsapp :</strong> {{ agency.whatsapp }}
  69.                                             </span>
  70.                                         </li>
  71.                                     {% endif %}
  72.                                 </ul>
  73.                             </div>
  74.                         </div>
  75.                     {% endfor %}
  76.                 </div>
  78.                 {# ---------------- Contact form ---------------- #}
  79.                 <div class="form_col">
  80.                     <h2>{{ 'Pages.Contact.Messages.ContactUs' | trans({} , 'messages_front') }}</h2>
  81.                     <p class="subtitle">{{ 'Pages.Contact.Messages.LeaveMessage' | trans({} , 'messages_front') }}</p>
  83.                     {% for flash_error in app.flashes('error') %}
  84.                         <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
  85.                     {% endfor %}
  87.                     {{ form_start(form) }}
  89.                     {# Last name / First name #}
  90.                     <div class="row_gap">
  91.                         {% if form.civility is defined %}
  92.                             <div style="flex: 0 0 90px;">{{ form_row(form.civility, {label: false}) }}</div>
  93.                         {% endif %}
  94.                         <div>{{ form_row(form.lastName, {label: false, attr: {placeholder: 'Nom'}}) }}</div>
  95.                         <div>{{ form_row(form.firstName, {label: false, attr: {placeholder: 'Prénom'}}) }}</div>
  96.                     </div>
  98.                     {{ form_row(form.email, {label: false, attr: {placeholder: 'Email'}}) }}
  100.                     {# Champ téléphone sans dépendance externe #}
  101.                     {{ form_widget(form.phone, {attr: {placeholder: 'Téléphone'}}) }}
  103.                     {% if form.subject is defined %}
  104.                         {{ form_row(form.subject, {label: false, attr: {placeholder: 'Objet'}}) }}
  105.                     {% endif %}
  107.                     {% if form.service is defined %}
  108.                         {{ form_row(form.service, {label: false}) }}
  109.                     {% endif %}
  111.                     {{ form_row(form.message, {label: false, attr: {placeholder: 'Votre message'}}) }}
  113.                     <button type="submit" class="btn btn_theme btn_md">
  114.                         {{ 'Pages.Contact.Messages.SendMessage' | trans({} , 'messages_front') }}
  115.                     </button>
  117.                     {{ form_end(form) }}
  118.                 </div>
  120.             </div>
  121.         </div>
  122.     </section>
  124.     <script>
  125.         $(document).ready(() => {
  126.             {% for agency in agencies %}
  127.             {% if agency.latitude and agency.longitude %}
  128.             (function () {
  129.                 let mapEl = document.getElementById('leaflet_{{ agency.id }}');
  130.                 let map = L.map(mapEl, {
  131.                     zoomControl: true,
  132.                     scrollWheelZoom: false
  133.                 }).setView([{{ agency.latitude }}, {{ agency.longitude }}], 14);
  135.                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  136.                     attribution: '&copy; OpenStreetMap contributors'
  137.                 }).addTo(map);
  139.                 // Real Leaflet popup, opened by default, sitting above the
  140.                 // marker with its little tail (native Leaflet behaviour).
  141.                 // maxWidth/minWidth stop it from ever stretching full-width.
  142.                 L.marker([{{ agency.latitude }}, {{ agency.longitude }}])
  143.                     .addTo(map)
  144.                     .bindPopup(mapEl.dataset.name, {
  145.                         closeButton: true,
  146.                         autoClose: false,
  147.                         maxWidth: 220,
  148.                         minWidth: 90
  149.                     })
  150.                     .openPopup();
  151.             })();
  152.             {% endif %}
  153.             {% endfor %}
  155.             // Keep phone values consistent without relying on a third-party CDN.
  156.             let phoneInput = document.querySelector('input[name="phone"]');
  157.             if (phoneInput) {
  158.                 let phoneForm = phoneInput.closest('form');
  159.                 if (phoneForm) {
  160.                     phoneForm.addEventListener('submit', () => {
  161.                         phoneInput.value = phoneInput.value.trim().replace(/\s+/g, ' ');
  162.                     });
  163.                 }
  164.             }
  165.         });
  166.     </script>
  168.     <script src="{{ asset('assets/js/leaflet_map.js') }}"></script>
  170. {% endblock %}