templates/frontend/resellers.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/base.html.twig' %}
  3. {% block metaTitle %}{% trans %}Trova i Rivenditori Piscine Astralpool Vicini Alla tua Zona{% endtrans %}{% endblock %}
  4. {% block metaDescription %}{% trans %}I rivenditori qualificati AstralPool Official Partner possono essere il tuo fornitore personale e la tua guida nella scelta della tua prossima piscina{% endtrans %}.{% endblock %}
  6. {% block body %}
  7.     {% include 'frontend/partials/_breadcrumb.html.twig' %}
  8.     <section class="space-1">
  9.         <div class="container">
  10.             <div class="position-relative mb-4">
  11.                 <div class="d-lg-none">
  12.                     <figure class="media equal-1-1">
  13.                         <span style="background-image: url('{{ asset('images/reseller.jpg') }}')"></span>
  14.                     </figure>
  15.                 </div>
  16.                 <div class="d-none d-lg-block">
  17.                     <figure class="media equal-2-1">
  18.                         <span style="background-image: url('{{ asset('images/reseller.jpg') }}')"></span>
  19.                     </figure>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </section>
  24.     <section class="space-top-lg-1 space-bottom-lg-3 space-bottom-2">
  25.         <div class="container">
  26.             <h1 class="display-5 fw-bold mb-4">
  27.                 {{ pageIntroduction(constant('App\\Entity\\PageIntroduction::PAGE_RESELLER')).title }}
  28.             </h1>
  29.             <div class="page-content">
  30.                 {{ pageIntroduction(constant('App\\Entity\\PageIntroduction::PAGE_RESELLER')).description|raw }}
  31.             </div>
  32.             <div class="space-top-1" id="reseller-app">
  33.                 <div class="row mb-4">
  34.                     <div class="col-12 col-lg-4 mb-3 mb-lg-0">
  35.                         <input
  36.                                 type="text"
  37.                                 class="form-control"
  38.                                 placeholder="{% trans %}Inserisci località / cap per cercare un rivenditore{% endtrans %}"
  39.                                 v-model="query">
  40.                     </div>
  41.                     <div class="col-12 col-lg-8 text-end">
  42.                         <div class="dropdown" id="filter-dropdown">
  43.                             <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  44.                                 Tipologia<span v-if="type">: [[ Translator.trans(type) ]]</span> <span class="ms-2">{{ svg_inject('filter') }}</span>
  45.                             </button>
  46.                             <ul class="dropdown-menu dropdown-menu-end">
  47.                                 <li><a class="dropdown-item" href="#" @click.prevent="type = null">{% trans %}Tutti{% endtrans %}</a></li>
  48.                                 <li><a class="dropdown-item" href="#" @click.prevent="type = t" v-for="t in types">[[ Translator.trans(t) ]]</a></li>
  49.                             </ul>
  50.                         </div>
  52.                     </div>
  53.                 </div>
  54.                 <div class="row">
  55.                     <div class="col-12 col-lg-4 order-1 order-lg-0">
  56.                         <div id="reseller-list">
  57.                             <div class="position-relative">
  58.                                 <div
  59.                                         class="search-result-box shadow bg-light rounded p-3"
  60.                                         v-show="showResults"
  61.                                 >
  62.                                     <div v-if="filteredResellers.length > 0">
  63.                                         <div class="text-muted fs-sm text-uppercase">{% trans %}Rivenditori{% endtrans %}</div>
  64.                                         <div ref="resellerList">
  65.                                             <div
  66.                                                     v-for="reseller in filteredResellers"
  67.                                                     :key="reseller.id"
  68.                                                     class="search-box-item d-flex align-items-center"
  69.                                                     tabindex="0"
  70.                                                     @click="() => selectReseller(reseller)"
  71.                                                     @keydown.enter="() => selectReseller(reseller)"
  72.                                             >
  73.                                                 <div class="rounded bg-white me-2 result-icon">
  74.                                                     <figure class="media equal-1-1" style="width: 16px; height: 16px">
  75.                                                         <span :style="{'background-image': `url('${reseller.icon.icon.publicUrl}')`}"></span>
  76.                                                     </figure>
  77.                                                 </div>
  78.                                                 <span class="fw-medium">[[ reseller.name ]]</span>
  79.                                             </div>
  80.                                         </div>
  81.                                     </div>
  83.                                     <div v-if="shownPlaces.length > 0">
  84.                                         <div class="text-muted fs-sm text-uppercase">{% trans %}Luoghi{% endtrans %}</div>
  85.                                         <div ref="placeList">
  86.                                             <div
  87.                                                     v-for="place in shownPlaces"
  88.                                                     :key="place.place_id"
  89.                                                     class="search-box-item d-flex align-items-center"
  90.                                                     tabindex="0"
  91.                                                     @click="() => selectPlace(place)"
  92.                                                     @keydown.enter="() => selectPlace(place)"
  93.                                             >
  94.                                                 <span class="rounded bg-white me-2 result-icon">
  95.                                                     <svg xmlns="http://www.w3.org/2000/svg"
  96.                                                          width="16"
  97.                                                          height="16" viewBox="0 0 24 24" stroke-width="1.5"
  98.                                                          stroke="#000000" fill="none" stroke-linecap="round"
  99.                                                          stroke-linejoin="round">
  100.                                                           <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  101.                                                           <circle cx="12" cy="11" r="3"/>
  102.                                                           <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"/>
  103.                                                         </svg>
  104.                                                 </span>
  105.                                                 <span class="fw-medium">[[ place.description ]]</span>
  106.                                             </div>
  107.                                         </div>
  108.                                     </div>
  109.                                 </div>
  110.                             </div>
  112.                             <div class="flex-grow-1" style="overflow: scroll">
  113.                                 <div>
  114.                                     <div v-for="reseller in shownResellers"
  115.                                          class="mb-3 p-3 bg-light cursor-pointer d-flex align-items-center"
  116.                                          @click="onSelectReseller(reseller)">
  117.                                         <div style="min-width: 100px">
  118.                                             <figure class="media equal-1-1">
  119.                                                 <span :style="{'background-image': `url('${reseller.icon.icon.publicUrl}')`}"></span>
  120.                                             </figure>
  121.                                         </div>
  122.                                         <div class="ms-3 w-100">
  123.                                             <div class="w-100 d-flex justify-content-between align-content-center">
  124.                                                 <span class="h5 mb-0">[[ reseller.name ]]</span>
  125.                                                 <span class="text-primary fw-bold text-nowrap">[[ resellerDistanceFromCenter(reseller) ]] km</span>
  126.                                             </div>
  127.                                             <p class="m-0 text-primary text-uppercase fw-bold">[[ reseller.type ===
  128.                                                 'official_partner' ? 'Official Partner' : 'E-Partner' ]]</p>
  129.                                             <p class="m-0" v-html="reseller.address.fullAddress"></p>
  130.                                             <div class="d-flex">
  131.                                                 <a class="m-0 text-primary me-3" :href="`tel:${reseller.phone}`"
  132.                                                    v-if="reseller.phone">
  133.                                                     [[ reseller.phone ]]
  134.                                                 </a>
  135.                                                 <a class="m-0 text-primary" :href="`mailto:${reseller.email}`"
  136.                                                    v-if="reseller.email">
  137.                                                     [[ reseller.email ]]
  138.                                                 </a>
  139.                                             </div>
  140.                                             <div class="d-block">
  141.                                                 <a class="m-0 text-primary" :href="reseller.website" target="_blank"
  142.                                                    v-if="reseller.website">
  143.                                                     [[ reseller.website ]]
  144.                                                 </a>
  145.                                             </div>
  146.                                         </div>
  147.                                     </div>
  148.                                     <div v-if="filteredResellers.length === 0" class="text-center py-5">
  149.                                         <span class="h5 text-muted">{% trans %}Nessun risultato trovato{% endtrans %}</span>
  150.                                     </div>
  151.                                 </div>
  152.                             </div>
  153.                         </div>
  154.                     </div>
  155.                     <div class="col-12 col-lg-8 order-0 order-lg-1 position-relative">
  156.                         <div id="reseller-map"></div>
  157.                         <div v-if="selectedReseller" class="position-absolute w-100" style="top: 5px; left: 0">
  158.                             <div class="p-3 bg-light mx-3 d-flex align-items-center">
  159.                                 <div style="min-width: 100px">
  160.                                     <figure class="media equal-1-1">
  161.                                         <span :style="{'background-image': `url('${selectedReseller.icon.icon.publicUrl}')`}"></span>
  162.                                     </figure>
  163.                                 </div>
  164.                                 <div class="ms-3">
  165.                                     <span class="h5">[[ selectedReseller.name ]]</span>
  166.                                     <p class="m-0 text-primary text-uppercase fw-bold">[[ selectedReseller.type ===
  167.                                         'official_partner' ? 'Official Partner' : 'E-Partner' ]]</p>
  168.                                     <p class="m-0" v-html="selectedReseller.address.fullAddress"></p>
  169.                                     <div class="d-flex">
  170.                                         <a class="m-0 text-primary me-3" :href="`tel:${selectedReseller.phone}`"
  171.                                            v-if="selectedReseller.phone">
  172.                                             [[ selectedReseller.phone ]]
  173.                                         </a>
  174.                                         <a class="m-0 text-primary" :href="`mailto:${selectedReseller.email}`"
  175.                                            v-if="selectedReseller.email">
  176.                                             [[ selectedReseller.email ]]
  177.                                         </a>
  178.                                     </div>
  179.                                     <div class="d-block">
  180.                                         <a class="m-0 text-primary" :href="selectedReseller.website" target="_blank"
  181.                                            v-if="selectedReseller.website">
  182.                                             [[ selectedReseller.website ]]
  183.                                         </a>
  184.                                     </div>
  185.                                 </div>
  186.                             </div>
  187.                         </div>
  188.                     </div>
  189.                 </div>
  190.             </div>
  191.         </div>
  192.     </section>
  193. {% endblock %}
  195. {% block javascripts %}
  196.     <script>
  197.         window.resellers = {{ resellers|serialize('json', { groups: 'api' })|raw }};
  198.     </script>
  199.     {{ encore_entry_script_tags('frontend_reseller') }}
  200. {% endblock %}
  202. {% block stylesheets %}
  203.     {{ encore_entry_link_tags('frontend_reseller') }}
  204. {% endblock %}