templates/main/front/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'baseFront.html.twig' %}
  3. {% block stylesheetsextra %}
  4.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.26.0/ui/trumbowyg.min.css">
  5.     <link href="/css/theme-style.css" rel="stylesheet">
  6. {% endblock %}
  8. {% block javascriptsextra %}
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.26.0/trumbowyg.min.js"></script>
  10.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
  11.     <script src="https://maps.googleapis.com/maps/api/js?key={{KEY_GOOGLEMAPS}}"></script>
  12. {% endblock %}
  13. {% block content %}
  14.     <section id="detail-top detail-top-grid">
  15.         <div class="container">
  16.             <div class="row">
  17.                 <input type="hidden" id="detail-glat" value="{{property.glat}}">
  18.                 <input type="hidden" id="detail-glon" value="{{property.glon}}">
  19.                 <input type="hidden" id="detail-visibilidad" value="{{property.visibilidad}}">
  20.                 <input type="hidden" id="property-id" value="{{property.id}}">
  21.                 <div class="col-sm-12">
  22.                     <div class="row align-items-center">
  23.                         <div class="col-8 header-left">
  24.                             <ol class="breadcrumb mb-3">
  25.                                 <li><a href="/"><i class="fa fa-home"></i></a></li>
  26.                                 <li><a href="{{url_volver}}">{{texts.signia_llistat}}</a></li>
  27.                                 <li class="active">{{texts.fitxa_immoble}}</li>
  28.                             </ol>
  29.                             <h1 class="detail-header-h1">
  30.                                 {{title|raw}}
  31.                                 <span class="label-wrap hidden-sm hidden-xs">
  32.                                     <span class="label label-primary">{{operation|upper}}</span>
  33.                                 </span>
  34.                             </h1>
  35.                             <address class="detail-property-address">{{textAddress}}</address>
  36.                         </div>
  37.                         <div class="col-4 header-right">
  38.                             <ul class="actions">
  39.                                 <li class="share-btn">
  40.                                     <div class="share_tooltip tooltip_left fade">
  41.                                         <a href="https://www.facebook.com/sharer/sharer.php?u={{url}}" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=600,toolbar=0'); return false;"><i class="fab fa-facebook"></i></a>
  42.                                         <a href="https://twitter.com/intent/tweet?text={{title}}&url={{url}}" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=600,toolbar=0'); return false;"><i class="fab fa-twitter"></i></a>
  43.                                         <a href="https://www.pinterest.com/pin/create/button?url={{url}}&media={{fotos[0]}}&description={{title}}" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=600,toolbar=0'); return false;"><i class="fab fa-pinterest"></i></a>
  44.                                         <a href="https://plus.google.com/share?url={{url}}" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=600,toolbar=0'); return false;"><i class="fab fa-google"></i></a>
  45.                                     </div>
  46.                                     <span data-placement="top" data-toggle="tooltip" data-original-title="share"><i class="fa fa-share-alt"></i></span>
  47.                                 </li>
  48.                             </ul>
  49.                             <span class="detail-item-price">{{price|raw}}</span>
  50.                             <span class="detail-item-sub-price">{{m2|raw}} | {{priceM2|raw}}</span>
  51.                         </div>
  52.                     </div>
  53.                     <div class="detail-media">
  54.                         <div class="tab-content">
  55.                             <div id="gallery" class="tab-pane fade in active show" style="background-image:url('{{fotos[0]}}'); background-position:center; background-size:100%; background-repeat:no-repeat; height:480px;">
  56.                                 <span class="label-wrap visible-sm visible-xs">
  57.                                     <span class="label label-primary">{{operation}}</span>
  58.                                 </span>
  59.                             </div>
  60.                             <div id="map" class="tab-pane fade">
  62.                             </div>
  64.                         </div>
  65.                         <div class="media-tabs">
  66.                             <ul class="media-tabs-list">
  67.                                 <li class="popup-trigger" id="detail-camera" data-placement="bottom" data-toggle="tooltip" data-original-title="{{texts.llistat_resultats_fotos}}">
  68.                                     <a href="#gallery" data-toggle="tab">
  69.                                         <i class="fa fa-camera"></i>
  70.                                     </a>
  71.                                 </li>
  72.                                 {# <li data-placement="bottom" data-toggle="tooltip" data-original-title="{{texts.signia_avancat_mapa}}">
  73.                                     <a href="#map" data-toggle="tab">
  74.                                         <i class="fa fa-map"></i>
  75.                                     </a>
  76.                                 </li> #}
  77.                             </ul>
  78.                             <ul class="actions">
  79.                                 {# <li class="share-btn">
  80.                                     <div class="share_tooltip tooltip_left fade">
  81.                                         <a href="https://www.facebook.com/sharer/sharer.php?u={{url}}" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fab fa-facebook"></i></a>
  82.                                         <a href="https://twitter.com/intent/tweet?text={{title}}&url={{url}}" onclick="if(!document.getElementById('td_social_networks_buttons')){window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;}"><i class="fab fa-twitter"></i></a>
  83.                                         <a href="https://www.pinterest.com/pin/create/button?url={{url}}&media={{fotos[0]}}&description={{title}}" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fab fa-pinterest"></i></a>
  84.                                         <a href="#" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fab fa-linkedin-in"></i></a>
  85.                                         <a href="https://plus.google.com/share?url={{url}}" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fab fa-google"></i></a>
  86.                                         <a href="#"><i class="fa fa-envelope"></i></a>
  87.                                     </div>
  88.                                     <span data-placement="top" data-toggle="tooltip" data-original-title="share"><i class="fa fa-share-alt"></i></span>
  89.                                 </li> #}
  90.                                 {# <li>
  91.                                     <span><i class="far fa-heart"></i></span>
  92.                                 </li> #}
  93.                             </ul>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.             </div>
  98.         </div>
  99.     </section>
  100.     <section id="section-body">
  102.         <!--start detail content-->
  103.         <section class="section-detail-content">
  104.             <div class="container">
  105.                 <div class="row">
  106.                     <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 container-contentbar">
  107.                         <div class="detail-bar">
  108.                             <div id="description" class="property-description detail-block target-block">
  109.                                 <div class="detail-title">
  110.                                     <h2 class="title-left">{{texts.mi_descripcion}}</h2>
  111.                                 </div>
  112.                                 <p>{{anuncio}}</p>
  113.                                 <br clear="all" />
  114.                                 <p>
  115.                                 Ref. {{reference}} - {{texts.fitxa_preu}}: {{price|raw}}
  116.                                 </p>
  117.                             </div>
  118.                              {% if features %}
  119.                                 <div id="features" class="detail-features detail-block target-block">
  120.                                     <div class="detail-title">
  121.                                         <h2 class="title-left">{{texts.signia_caracteristiques}}</h2>
  122.                                     </div>
  123.                                     <ul class="mb-3 detail-grid-wrapper">
  124.                                     {% for feature in features %}
  125.                                         {% if feature.value != '' %}
  126.                                                 {% if feature.type == 2 %}
  127.                                                 <li class="detail-feature">
  128.                                                     {% if feature.value >= 1 %}
  129.                                                         <i class="fa fa-check"></i>{{feature.text}}
  130.                                                     {% else %}
  131.                                                         <i class="fa fa-times"></i>{{feature.text}}
  132.                                                     {% endif %}
  133.                                                 </li>
  135.                                                 {% elseif feature.type in [1, 3] and feature.value matches '/^\\d+$/' %}
  136.                                                 <li class="detail-feature">
  137.                                                     {{feature.text}} <span class="badge label-span label-default" style="background-color:{{agency.colorPrimary}}cc">{{feature.value}}</span>
  138.                                                 </li>
  139.                                                 {% endif %}
  140.                                         {% endif %}
  141.                                     {% endfor %}
  142.                                     </ul>
  144.                                     <br clear="all" />
  145.                                     <ul class="list-col-labels">
  146.                                     {% for feature in features %}
  147.                                         {% if feature.value != '' %}
  148.                                             {% if feature.type in [1, 3, 5] and not (feature.value matches '/^\\d+$/') or feature.id == 753 or feature.id == 754 %}
  149.                                                 {% if feature.id == 753 and  feature.value != 'No disponible' %}
  150.                                                     {{feature.value}} = {{feature.value}} . '€/m2';
  151.                                                 {% endif %}
  152.                                                 {% if feature.id == 754 and  feature.value != 'No disponible' %}
  153.                                                     {{feature.value}} = {{feature.value}} . '€/m2';
  154.                                                 {% endif %}
  155.                                                 {% if feature.value %}
  156.                                                     <li class="mb-2"><span class="label label-default label-read p-2 mr-2 mb-2 label-span detail-feature" style="background-color:{{agency.colorPrimary}}cc">{{feature.text}}: {{feature.value}}</span>  </li>
  157.                                                 {% endif %}
  158.                                             {% elseif  feature.type == 2 and feature.id == 755 %}
  159.                                                 <span class="label label-default label-read p-2 label-span" style="background-color:{{agency.colorPrimary}}cc">{{feature.text}}</span> 
  160.                                             {% endif %}
  161.                                         {% endif %}
  162.                                     {% endfor %}
  163.                                     </ul>
  165.                                     
  166.                                 </div>
  167.                              {% endif %}
  169.                                 {% if property.idPropertiesSupertype in [1, 2, 3, 5] %}
  170.                                 <div id="cert_energetica" class="detail-features detail-block target-block">
  171.                                     {# <br clear="all" /> #}
  172.                                     <div class="detail-title">
  173.                                         <h2 class="title-left">{{texts.certificacion_energetica}}</h2>
  174.                                     </div>                                    
  175.                                     <ul class="list-two-col">                                        
  176.                                         {% for cert in certificadoFeatures %}
  177.                                             <li class="detail-feature">{{cert.name}} <span class="badge label-span label-default" style="background-color:{{agency.colorPrimary}}cc">{{cert.value}}</span></li>
  178.                                         {% endfor %}
  179.                                         
  180.                                         {% if imageCertificate is defined and imageCertificate is not empty %}
  181.                                             <li class="popupcert-trigger" data-placement="bottom" data-toggle="tooltipcert" >
  182.                                                 <a href="#gallery" data-toggle="tabcert">
  183.                                                     <img src="{{imageCertificate[0].url}}" width="100" height="70"></i>
  184.                                                 </a>
  185.                                             </li>
  186.                                         {% endif %}
  187.                                     </ul>
  188.                                 </div>                                    
  189.                                 {% endif %}
  191.                             <div class="property-gallery">
  192.                                 <div class="detail-slider-arrow right">
  193.                                     <i class="fas fa-chevron-right" style="color:{{agency.colorPrimary}}"></i>
  194.                                 </div>
  195.                                 <div class="detail-slider-arrow left">
  196.                                     <i class="fas fa-chevron-left" style="color:{{agency.colorPrimary}}"></i>
  197.                                 </div>
  198.                                 <div id="gallery-slider" class="mt-5 mb-5 gallery-container">
  199.                                     {% for foto in fotos %}
  200.                                     {# <div class="detail-gallery-image-container"> #}
  201.                                         <img src="{{foto}}" alt="Slide show" >
  202.                                     {# </div> #}
  203.                                     {% endfor %}
  204.                                     {# <div class="slideshow-nav-main">
  205.                                         <div class="slideshow-nav">
  206.                                             {% for foto in fotos %}
  207.                                                 <img src="{{foto}}" width="100" height="70" alt="Slide show thumb">
  208.                                             {% endfor %}
  209.                                         </div>
  210.                                     </div> #}
  211.                                 </div>
  212.                             </div>
  213.                             {% if video_tour %}
  214.                             <div class="panel panel-default">
  215.                                 <div class="panel-body">
  216.                                     <div class="row">
  217.                                         <div class="col-md-12 col-centered">
  218.                                             <div class="embed-responsive embed-responsive-16by9">
  219.                                               <iframe allowfullscreen="true" class="embed-responsive-item" src="{{video_tour}}"></iframe>
  220.                                             </div>
  221.                                         </div>
  222.                                     </div>
  223.                                 </div>
  224.                             </div>
  225.                             {% endif %}
  226.                             
  227.                         </div>
  228.                     </div>
  229.                     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-md-offset-0 col-sm-offset-3 container-sidebar">
  230.                         <aside id="sidebar">
  231.                             {% if similares %}
  232.                             <div class="widget widget-recommend">
  233.                                 <div class="widget-top">
  234.                                     <h3 class="widget-title">{{texts.anuncis_similars}}</h3>
  235.                                 </div>
  236.                                 <div class="widget-body">
  237.                                     {% for similar in similares %}
  238.                                     <div class="media">
  239.                                         <div class="media-left">
  240.                                             <figure class="item-thumb">
  241.                                                 <a class="hover-effect" href="{{similar.url}}">
  242.                                                     <img alt="thumb" src="{{similar.directorio}}" width="100" height="75">
  243.                                                 </a>
  244.                                             </figure>
  245.                                         </div>
  246.                                         <div class="media-body">
  247.                                             <h3 class="media-heading"><a href="{{similar.url}}">{{similar.text_tipus}}, {{similar.metros}}</a></h3>
  248.                                             <h4>{{similar.metros}}</h4>
  249.                                             <div class="amenities">
  250.                                                 <p>
  251.                                                     {% if similar.rooms %}
  252.                                                         {{similar.rooms}} {{texts.habitacion_contact}} • 
  253.                                                     {% endif %}
  254.                                                     {{similar.metros}}
  255.                                                 </p>
  256.                                                 <p>{{similar.situacion}}</p>
  257.                                             </div>
  258.                                         </div>
  259.                                     </div>
  260.                                     {% endfor %}
  261.                                 </div>
  262.                             </div>
  263.                             {% endif %}
  264.                             <div id="contact-info" class="detail-contact detail-block target-block">
  265.                                 <div class="detail-title">
  266.                                     <h2 class="title-left">{{texts.fitxa_contacto}}</h2>
  267.                                 </div>
  268.                                 <div class="media agent-media">
  269.                                     {# <div class="media-left">
  270.                                         <a href="#">
  271.                                             <img src="/images/<?= THEME; ?>/{{agency.logo_contact}}" class="media-object" alt="image" width="74" height="74">
  272.                                         </a>
  273.                                     </div> #}
  274.                                     <div class="media-body">
  275.                                         <h4 class="media-heading">{{texts.fitxa_contacto}}</h4>
  276.                                         <ul>
  277.                                             <li><i class="fa fa-phone"></i> {{agency.phone}}</li>
  278.                                             <li><i class="fa fa-envelope-o"></i> <a class="view" href="mailto: {{agency.email}}">{{agency.email}}</a></li>
  279.                                         </ul>
  280.                                     </div>
  281.                                 </div>
  282.                                 <div class="detail-title-inner">
  283.                                     <h4 class="title-inner">{{texts.contacto_inmueble}}</h4>
  284.                                 </div>
  285.                                 <form id="contact_form_foot">
  286.                                     <div class="row">
  287.                                         <div class="col-12">
  288.                                             <div class="form-group">
  289.                                                 <input class="form-control" placeholder="{{texts.formulari_nom}}" name="name" id="name" type="text" required>
  290.                                             </div>
  291.                                         </div>
  292.                                         <div class="col-12">
  293.                                             <div class="form-group">
  294.                                                 <input class="form-control" placeholder="{{texts.formulari_telefon}}" name="phone" id="phone" type="text" required>
  295.                                             </div>
  296.                                         </div>
  297.                                         <div class="col-12">
  298.                                             <div class="form-group">
  299.                                                 <input class="form-control" placeholder="{{texts.formulari_email}}" name="email" id="email" required>
  300.                                             </div>
  301.                                         </div>
  302.                                         <div class="col-12 ">
  303.                                             <div class="form-group">
  304.                                                 <textarea class="form-control resize-block" rows="5" placeholder="{{texts.formulari_comentari}}" name="message" id="message"></textarea>
  305.                                             </div>
  306.                                         </div>
  307.                                     </div>
  308.                                     <button type="submit" class="btn btn-secondary">{{texts.formulari_enviar}}</button>
  309.                                     <small id="form-error-msg"></small>
  310.                                 </form>
  311.                             </div>
  313.                             <!-- Banner module-->
  314.                             {# {% if banner %}
  315.                                 <a href="{{banner.url}}" target="_blank">
  316.                                 <div id="banner-content" style="background: url('/images/<?= THEME; ?>/{{banner}}') no-repeat 50% 50% / cover; height: 280px!important; width: 330px;margin-top:1rem;"></div>
  317.                                 </a>
  318.                             {% endif %} #}
  319.                             <!-- end banner module  -->
  321.                         </aside>
  322.                     </div>
  323.                 </div>
  324.             </div>
  325.         </section>
  326.     </section>
  327. {% endblock %}