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

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