templates/front/property/list.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block meta %}
  4.     <title>Floor | {% if contentHeader.preTitle is defined %}{{ contentHeader.preTitle }}{% endif %}</title>
  5.     {% if contentHeader.title is defined %}
  6.         <meta name="description"
  7.               content="{% if contentHeader.preTitle is defined %}{{ contentHeader.preTitle ~ ' | ' }}{% endif %}{{ contentHeader.title|striptags }}">
  8.     {% endif %}
  9. {% endblock %}
  11. {% block body %}
  12.     <section class="slide-header list">
  13.         <div class="main-slide">
  14.             <div class="img-main-slide position-relative"
  15.                  style="background:url({{ asset(constant('App\\Services\\UploadFileService::POST_IMAGE_DIR') ~ slider.image1) }})no-repeat center;background-size:cover;"
  16.                  id="mainImg">
  17.                 <div class="title-page bg-blue d-flex gold justify-content-end position-absolute">
  18.                     <img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite">
  19.                     <span class="ml-3">{{ contentHeader.preTitle|capitalize }}</span>
  20.                 </div>
  21.             </div>
  22.         </div>
  24.         {% set titleSplited = contentHeader.title|split(' ') %}
  25.         <div class="slides-title page d-flex align-items-center justify-content-end col-md-11 p-0 float-right position-relative">
  26.             <h1 class="title-left-right mr-5">
  27.                 {% if titleSplited|length > 1 %}
  28.                     <span>{{ titleSplited.0 }} {{ titleSplited.1 }}</span><br>
  29.                     <span class="gold">
  30.                         {% for word in titleSplited|slice(2) %}
  31.                             {{ ' ' ~ word }}
  32.                         {% endfor %}
  33.                     </span>
  34.                 {% else %}
  35.                     <span>{{ contentHeader.title }}</span>
  36.                 {% endif %}
  38.                 {% if app.user %}
  39.                     <a href="{{ path('back_content_edit', {'id': contentHeader.id}) }}"><i class="fas fa-pencil-alt red"></i></a>
  40.                 {% endif %}
  41.             </h1>
  43.             <a href="#" class="position-absolute arrow-slide-single" id="arrowSlideMove"
  44.                onclick="javascript: return false;">
  45.                 <img src="{{ asset('img/icons/arrow-right.svg') }}">
  46.             </a>
  47.             <div class="slide-miniatures d-flex align-self-baseline" id="containerMiniatures">
  48.                 {% if slider.image2 %}
  49.                     <div class="slide position-relative float-left">
  50.                         <img src="{{ asset(constant('App\\Services\\UploadFileService::POST_IMAGE_DIR') ~ slider.image2) }}">
  51.                     </div>
  52.                 {% endif %}
  53.                 {% if slider.image3 %}
  54.                     <div class="slide position-relative float-left">
  55.                         <img src="{{ asset(constant('App\\Services\\UploadFileService::POST_IMAGE_DIR') ~ slider.image3) }}">
  56.                     </div>
  57.                 {% endif %}
  58.                 {% if slider.image4 %}
  59.                     <div class="slide position-relative float-left">
  60.                         <img src="{{ asset(constant('App\\Services\\UploadFileService::POST_IMAGE_DIR') ~ slider.image4) }}">
  61.                     </div>
  62.                 {% endif %}
  63.             </div>
  64.         </div>
  65.         <a href="#targetSeeMore"
  66.            class="btn-see-more position-absolute d-flex flex-column align-items-center gold text-center">
  67.             <img src="{{ asset('img/icons/arrow-bottom-gold.svg') }}" alt="En savoir plus" class="mb-2">
  68.             <span>En savoir plus</span>
  69.         </a>
  70.     </section>
  72.     <section class="form-filter" id="targetSeeMore">
  73.         <div class="container">
  74.             <div class="title-page bg-blue d-flex gold pl-0">
  75.                 <img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite">
  76.                 <span class="ml-3">Vos critères</span>
  77.             </div>
  79.             <form class="mt-3" id="formFilter">
  80.                 <input name="advert-type" id="advertTypeFilter" type="hidden" value="{{ type }}">
  81.                 <div class="row">
  82.                     <div class="col-md-2">
  83.                         <select class="w-100" name="type">
  84.                             <option value="">Type</option>
  85.                             <option value="Maison">Maison</option>
  86.                             <option value="Appartement">Appartement</option>
  87.                             <option value="Commerce">Commerce</option>
  88.                             <option value="Garage">Garage</option>
  89.                             <option value="Parking">Parking</option>
  90.                             <option value="Terrain">Terrain</option>
  91.                         </select>
  92.                     </div>
  93.                     <div class="col-md-2">
  94.                         <select class="w-100" name="rent">
  95.                             <option value="">Vente / Location</option>
  96.                             <option value="vente" {% if type == 'vente' %}selected{% endif %}>Vente</option>
  97.                             <option value="location" {% if type == 'location' %}selected{% endif %}>Location</option>
  98.                         </select>
  99.                     </div>
  100.                     <div class="col-md-2">
  101.                         <select class="w-100" name="location">
  102.                             <option value="">Localisation</option>
  103.                             {% for city in advertCities %}
  104.                                 <option value="{{ city }}">{{ city }}</option>
  105.                             {% endfor %}
  106.                         </select>
  107.                     </div>
  108.                     <div class="col-md-2">
  109.                         {% if type == 'vente' %}
  110.                             <select class="w-100" name="max_price">
  111.                                 <option value="">Budget Max.</option>
  112.                                 <option value="500000">500 000€</option>
  113.                                 <option value="600000">600 000€</option>
  114.                                 <option value="700000">700 000€</option>
  115.                                 <option value="800000">800 000€</option>
  116.                                 <option value="900000">900 000€</option>
  117.                                 <option value="1000000">1 000 000€</option>
  118.                                 <option value="1500000">1 500 000€</option>
  119.                                 <option value="2000000">2 000 000€</option>
  120.                             </select>
  121.                         {% else %}
  122.                             <select class="w-100" name="max_price">
  123.                                 <option value="">Budget Max.</option>
  124.                                 <option value="600">300€</option>
  125.                                 <option value="400">400€</option>
  126.                                 <option value="500">500€</option>
  127.                                 <option value="600">600€</option>
  128.                                 <option value="700">700€</option>
  129.                                 <option value="800">800€</option>
  130.                                 <option value="900">900€</option>
  131.                                 <option value="1000">1000€</option>
  132.                                 <option value="1500">1 500€</option>
  133.                                 <option value="2000">2 000€</option>
  134.                                 <option value="2500">2 500€</option>
  135.                             </select>
  136.                         {% endif %}
  137.                     </div>
  138.                     <div class="col-md-2">
  139.                         <select class="w-100" name="min_room">
  140.                             <option value="">Chambres(s) min.</option>
  141.                             <option value="1">1</option>
  142.                             <option value="2">2</option>
  143.                             <option value="3">3</option>
  144.                             <option value="4">4</option>
  145.                         </select>
  146.                     </div>
  147.                 </div>
  148.             </form>
  149.         </div>
  150.     </section>
  152.     <section class="result-properties">
  153.         <div class="container">
  154.             <div class="text-center mt-5 mb-5">
  155.                 <h3 class="white">{{ contentHeader.preTitle|capitalize }}</h3>
  156.                 <h2 class="white" id="nbAdvertResult"><span
  157.                             class="gold">{{ countAdverts }}</span> {% if countAdverts > 1 %}annonces trouvées{% else %}annonce trouvée{% endif %}
  158.                 </h2>
  159.             </div>
  160.             <div class="position-relative col-md-12">
  161.                 <div id="loader" class="ml-3"></div>
  162.             </div>
  163.             <ul class="pl-0" id="containerAdvertList">
  164.                 {% for advert in adverts %}
  165.                     <li class="col-12 col-md-12 position-relative slide-1 slide-single h-100 p-0 {% if not loop.first %}mt-5{% endif %}">
  166.                         <div class="d-flex h-100 link-slide-1">
  167.                             <div class="col-md-6 img-slide img-slide-1 position-relative">
  168.                                 {% for photo in advert.photos %}
  169.                                     {% set async = loop.first ? '' : "loading=lazy async" %}
  170.                                     <img {{ async }} src="{{ asset('upload/photo/' ~ photo.name) }}"
  171.                                                      alt="{{ advert.info.nature }} • {{ advert.info.surface }}m²">
  172.                                 {% endfor %}
  173.                             </div>
  174.                             <div class="col-md-6 bg-red white p-5 d-flex flex-column justify-content-center position-relative info-slide info-slide-1">
  176.                                 <div class="title-page bg-blue d-flex gold pl-0 pt-0">
  177.                                     <img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite">
  178.                                     <span class="ml-3">{{ advert.info.nature }} • {{ advert.info.surface }}m²</span>
  179.                                 </div>
  180.                                 <h1 class="mb-3">{{ advert.localisation.ville }}</h1>
  182.                                 {% set price = advert.prix.budget|number_format(0, ' ', ' ') %}
  183.                                 <h4>
  184.                                     {% if advert.info.vente_location == 'location' %}
  185.                                         {{ price }}€<sup>/mois</sup>
  186.                                     {% else %}
  187.                                         {{ price }}€
  188.                                     {% endif %}
  189.                                 </h4>
  191.                                 {% if advert.info.disponibilite %}
  192.                                     {% if advert.info.disponibilite == 'immédiate' %}
  193.                                         <p>Disponibilité {{ advert.info.disponibilite }}</p>
  194.                                     {% else %}
  195.                                         <p>Disponible à p. d. {{ advert.info.disponibilite }}</p>
  196.                                     {% endif %}
  197.                                 {% endif %}
  199.                                 {% set parkingOuvert = advert.parking.parking_ouvert ?? 0 %}
  200.                                 {% set parkingsouterrain = advert.parking.parking_souterrain ?? 0 %}
  201.                                 {% set parkingCollectif = advert.parking.collectif ?? 0 %}
  202.                                 {% set parkings = parkingOuvert + parkingsouterrain + parkingCollectif %}
  203.                                 {% set parkingsExt = parkingOuvert + parkingCollectif %}
  205.                                 <div class="description pt-3 pb-5">
  206.                                     {% if advert.info.surface and advert.info.surface > 0 %}
  207.                                         <p>
  208.                                             <img src="{{ asset('img/icons/surface.svg') }}" class="mr-3">
  209.                                             <span class="gold">{{ advert.info.surface }} m²</span>
  210.                                             <span class="white">surface d’habitation</span>
  211.                                         </p>
  212.                                     {% endif %}
  213.                                     {% if advert.info.nombre_chambres and advert.info.nombre_chambres > 0 %}
  214.                                         <p>
  215.                                             <img src="{{ asset('img/icons/chambres.svg') }}" class="mr-3">
  216.                                             <span class="gold">{{ advert.info.nombre_chambres }}</span>
  217.                                             <span class="white">chambre{% if advert.info.nombre_chambres > 1 %}s{% endif %} à coucher</span>
  218.                                         </p>
  219.                                     {% endif %}
  220.                                     {% if advert.pieces.salles_de_bain and advert.pieces.salles_de_bain > 0 %}
  221.                                         <p>
  222.                                             <img src="{{ asset('img/icons/salles-bain.svg') }}" class="mr-3">
  223.                                             <span class="gold">{{ advert.pieces.salles_de_bain }}</span>
  224.                                             <span class="white">salle{% if advert.pieces.salles_de_bain > 1 %}s{% endif %} de bain</span>
  225.                                         </p>
  226.                                     {% endif %}
  227.                                     {% if advert.parking.garages and advert.parking.garages > 0 %}
  228.                                         <p>
  229.                                             <img src="{{ asset('img/icons/garage.svg') }}" class="mr-3">
  230.                                             <span class="gold">{{ advert.parking.garages }}</span>
  231.                                             <span class="white">garage{% if advert.parking.garages > 1 %}s{% endif %}</span>
  232.                                         </p>
  233.                                     {% endif %}
  234.                                     {% if parkings > 0 %}
  236.                                         <p>
  237.                                             <img src="{{ asset('img/icons/parking.svg') }}" class="mr-3">
  238.                                             {% if parkingsExt > 0 %}
  239.                                                 <span class="gold">{{ parkingsExt }}</span>
  240.                                                 <span class="white">parking{% if parkingsExt > 1 %}s{% endif %} extérieur{% if parkingsExt > 1 %}s{% endif %}</span>
  241.                                             {% endif %}
  243.                                             {% if parkingsouterrain > 0 %}
  245.                                                 {% if parkingsExt > 0 %}
  246.                                                     <span class="white">et</span>
  247.                                                 {% endif %}
  249.                                                 <span class="gold">{{ parkingsouterrain }}</span>
  250.                                                 <span class="white">parking{% if parkingsouterrain > 1 %}s{% endif %} intérieur{% if parkingsouterrain > 1 %}s{% endif %}</span>
  251.                                             {% endif %}
  252.                                         </p>
  253.                                     {% endif %}
  255.                                 </div>
  256.                                 <a href="{{ path('front_property_single', {'id': advert.info.id, 'type': real_estate.toSlug(advert.info.nature), 'city': real_estate.toSlug(advert.localisation.ville)}) }}"
  257.                                    class="btn-gold bg-gold white">Plus</a>
  258.                                 <img src="{{ asset('img/icons/chevrons-left.svg') }}"
  259.                                      class="chevrons-left position-absolute">
  260.                             </div>
  261.                         </div>
  262.                     </li>
  263.                 {% endfor %}
  264.             </ul>
  266.             <div class="navigation">
  267.                 {{ knp_pagination_render(adverts) }}
  268.             </div>
  270.         </div>
  271.     </section>
  273. {% endblock %}
  275. {% block javascript %}
  276. <script nonce="{{ csp_nonce('script') }}">
  277.     $(document).ready(function(){
  278.     $('.img-slide').slick({
  279.         'prevArrow': '<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style=""><i class="fas fa-arrow-left fa-2x"></i></button>',
  280.         'nextArrow': '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><i class="fas fa-arrow-right fa-2x"></i></button>',
  281.     });
  282. });
  283. </script>
  285. {% endblock %}