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