templates/front_v4/mca/store/finder.html.twig line 1

Open in your IDE?
  1. {% extends '/front_v4/base.html.twig' %}
  3. {% block meta_title %}Localisez les laboratoires auditifs proches de chez vous {% if pagination is defined and pagination is not null and pagination.params is not empty %} | Page {{ pagination.currentPageNumber }} {% endif %}{% endblock meta_title %}
  4. {% block meta_description %}Mon centre auditif vous aide à trouver le centre auditif le plus proche de chez vous afin de réaliser un bilan auditif et faciliter vos démarches d’accès aux soins.{% endblock meta_description %}
  6. {% block stylesheets %}
  7.     <!-- leaflet CSS -->
  8.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
  9.           integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  10.           crossorigin=""/>
  11.     <link rel="stylesheet"
  12.           href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">
  13.     {{ encore_entry_link_tags('locator') }}
  14.     {{ encore_entry_link_tags('store_finder') }}
  15. {% endblock stylesheets %}
  17. {% block content %}
  18.     <main>
  19.         <!-- Search Top Nav -->
  20.         <div class="content-space-t-2">
  21.             <div class="bg-dark"
  22.                  style="background-image: url({{ asset('build/front_v4/svg/components/wave-pattern-light.svg') }});">
  23.                 <div class="container py-4">
  24.                     <div class="w-lg-75 mx-lg-auto">
  25.                         <form id="finder-form" data-url="{{ path('find_nearest_store') }}">
  26.                             <!-- Input Card -->
  27.                             <div class="input-card">
  28.                                 <div class="input-card-form">
  29.                                     <label for="searchAnswersForm" class="form-label visually-hidden">Rechercher un
  30.                                         centre auditif</label>
  31.                                     <div class="input-group input-group-merge">
  32.                   <span class="input-group-prepend input-group-text">
  33.                   <i class="bi bi-geo-alt-fill"></i>
  34.                   </span>
  35.                                         <input type="text" class="form-control" id="search-term" name="finder"
  36.                                                placeholder="Adresse, code postal, ville..."
  37.                                                aria-label="Rechercher un centre auditif"
  38.                                                aria-describedby="searchProperty"
  39.                                                data-postal-code="null"
  40.                                                data-redirect-path="{{ path('find_nearest_store') }}"
  41.                                                value="{% if formatted_address_query != null %} {{ formatted_address_query }} {% endif %}">
  42.                                         <div class="input-group-append">
  43.                                             <button type="submit"
  44.                                                     class="btn btn-white btn-rounded border-0 text-primary"
  45.                                                     id="geolocation-btn" aria-label="Localisation">
  46.                                                 <span class="bi bi-crosshair"></span>
  47.                                             </button>
  48.                                             <!-- Error Info -->
  49.                                             <div id="finder-form-error" class="invalid-tooltip">
  50.                                                 Une erreur inattendue s'est produite
  51.                                             </div>
  52.                                             <!-- End Error Info -->
  53.                                         </div>
  54.                                     </div>
  55.                                 </div>
  56.                                 <button type="submit" id="search-btn" class="btn btn-primary">
  57.                                     Rechercher
  58.                                 </button>
  59.                             </div>
  60.                             <!-- End Input Card -->
  61.                         </form>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.         <!-- End Search Top Nav -->
  67.         <div class="container content-space-1">
  68.             {% if stores is not null %}
  69.             <!-- Store List -->
  70.             <div class="row">
  71.                 <div class="col-lg-8">
  72.                     <h1 class="h2 ">Vos audioprothésistes à {{ city_address_query }}</h1>
  73.                     <p>
  74.                         Effectuez une <strong class="text-primary">demande de bilan auditif<sup>(1)</sup>
  75.                             gratuit</strong> ou prenez directement RDV<br>
  76.                         {# Vous trouverez <strong class="text-primary">  {{ pagination.getTotalItemCount }} centres auditifs à {{ city_address_query }}</strong> et dans les alentours. #}
  77.                     </p>
  79.                     <!-- Card List -->
  80.                     <div class="d-grid gap-2 mb-5">
  81.                         {% if pagination is defined and pagination is not null and pagination.getPage() < 2 %}
  82.                         <div class="d-flex justify-content-end">
  83.                             <span class="badge badge-default mr-0 text-primary">Notre sélection</span>
  84.                         </div>
  85.                         {% endif %}
  86.                         {% for store in preferred_stores %}
  87.                             {% include ('front_v4/mca/store/_store_card.html.twig') with {preferred: true} %}
  88.                         {% endfor %}
  89.                         {% for store in stores %}
  90.                             {% include ('front_v4/mca/store/_store_card.html.twig') %}
  91.                         {% endfor %}
  92.                     </div>
  93.                     <!-- End Card List -->
  95.                     {# display navigation #}
  96.                     {% if pagination is defined and pagination is not null %}
  97.                         <div class="navigation pagination mt-5 justify-content-center">
  98.                             {% do pagination.setTemplate('@KnpPaginator/Pagination/twitter_bootstrap_v4_pagination.html.twig') %}
  99.                             {{ knp_pagination_render(pagination) }}
  100.                         </div>
  101.                     {% endif %}
  103.                     <!-- Sticky Block End Point -->
  104.                     <div id="stickyBlockEndPoint"></div>
  105.                 </div>
  106.                 <div class="col-lg-4 position-relative zi-2">
  107.                     <!-- Sticky Block Start Point -->
  108.                     <div id="stickyBlockStartPoint"></div>
  109.                     <div class="js-sticky-block"
  110.                          data-hs-sticky-block-options='{
  111.                          "parentSelector": "#stickyBlockStartPoint",
  112.                          "targetSelector": "#header",
  113.                          "breakpoint": "md",
  114.                          "startPoint": "#stickyBlockStartPoint",
  115.                          "endPoint": "#stickyBlockEndPoint",
  116.                          "stickyOffsetTop": 80
  117.                        }'>
  119.                         <!-- MAP -->
  120.                         <div class="card border-0 d-none d-lg-block mb-3">
  121. {#                            <button class="btn-map btn btn-outline-primary border-primary w-100" role="button"#}
  122. {#                                    style="cursor: pointer;">#}
  123. {#                                Afficher la carte <span class="bi bi-map-fill pl-2"></span>#}
  124. {#                            </button>#}
  125.                             <div class="mt-3">
  126.                                 <div id="map" class="map d-none">
  127.                                 </div>
  128.                             </div>
  129.                         </div>
  130.                         <!-- END MAP -->
  132.                         <!-- CTA -->
  133.                         <div class="row justify-content-center block px-3 py-5 py-lg-0">
  134.                             <div class="card border-success text-center p-0">
  135.                                 <div class="card-header bg-success p-3">
  136.                                     <h6 class="h5 card-title text-white">IMPORTANT<br>
  137.                                         PROFITEZ DU <strong>100% SANTE</strong></h6>
  138.                                 </div>
  139.                                 <div class="card-body">
  140.                                     <img class="img-fluid max-width-23 m-0 p-0"
  141.                                          src="{{ asset('build/100%_sante_mon_centre_auditif.jpg') | imagine_filter('default_webp') }}"
  142.                                          alt="L'offre 100% Santé">
  143.                                     <hr>
  144.                                     <p class="card-text">
  145.                                         100% santé = 100% remboursés<br>
  146.                                         Des soins accessibles pour tous<br>
  147.                                         Un large choix de produits<br>
  148.                                         30 jours d’essai <strong>GRATUITS</strong><br>
  149.                                     </p>
  150.                                     <a href="#" data-bs-toggle="modal" data-bs-target="#gouvernementModal"
  151.                                        data-modal-effect="fadein"><small class="text-primary fw-medium"><i
  152.                                                     class="bi bi-info-circle-fill"></i> INFO GOUVERNEMENT</small>
  153.                                     </a>
  154.                                 </div>
  155.                             </div>
  156.                         </div>
  157.                         <!-- END CTA -->
  158.                     </div>
  159.                 </div>
  160.             </div>
  161.             <!-- End Store List -->
  162.         </div>
  163.         <!-- Modal Prospect On Store -->
  164.         {% use 'front_v4/mca/partials/_modal_prospect.html.twig' with inc_content as modal_lead_content %}
  165.         {{ block('modal_lead_content') }}
  166.         <!-- End Modal Prospect On Store -->
  168.         <!-- Modal Information On Store -->
  169.         {% use 'front_v4/mca/partials/_modal_gouvernement.html.twig' with inc_content as modal_gouvernement_content %}
  170.         {{ block('modal_gouvernement_content') }}
  171.         <!-- End Modal Information On Store -->
  173.         <!-- Modal Callback On Store -->
  174.         {% use 'front_v4/mca/partials/_modal_callback.html.twig' with inc_content as modal_callback_content %}
  175.         {{ block('modal_callback_content') }}
  176.         <!-- End Modal Callback On Store -->
  178.         {% else %}
  179.             <div class="row">
  180.                 <div class="col-12">
  181.                     <div class="mb-4">
  182.                         <h1 class="h3">Désolé, aucun centre auditif n'est disponible à proximité. </h1>
  183.                         <p>Entrez une nouvelle adresse pour afficher les centres auditifs les plus proches.</p>
  184.                     </div>
  185.                 </div>
  186.             </div>
  188.         {% endif %}
  189.     </main>
  190. {% endblock content %}
  192. {% block javascripts %}
  193.     <script
  194.             src="https://code.jquery.com/jquery-3.7.1.min.js"
  195.             integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  196.             crossorigin="anonymous"></script>
  197.     <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
  198.     <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
  199.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
  200.     <!-- Google place API -->
  201.     <script type="text/javascript"
  202.             src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAJFMY4h2rwiDVFydKeK6l1eLgMpH5iV-0&libraries=places"></script>
  203.     {{ encore_entry_script_tags('google_places_api') }}
  204.     <!-- End Google place API -->
  205.     <!-- Display number center -->
  206.     {{ encore_entry_script_tags('display_center_number') }}
  207.     <!-- End Display number center -->
  208.     {#    {{ encore_entry_script_tags('locator') }} #}
  209.     {{ encore_entry_script_tags('stat') }}
  210.     {# modal lead javascripts #}
  211.     {% use 'front_v4/mca/partials/_modal_prospect.html.twig' with inc_javascripts as modal_lead_javascripts %}
  212.     {{ block('modal_lead_javascripts') }}
  214.     {% use 'front_v4/mca/partials/_modal_callback.html.twig' with inc_javascripts as modal_callback_javascripts %}
  215.     {{ block('modal_callback_javascripts') }}
  216.     <!-- Display map -->
  217.     {{ encore_entry_script_tags('display_map_finder') }}
  218.     <!-- End Display map -->
  219.     {{ encore_entry_script_tags('store_finder') }}
  220. {% endblock javascripts %}