templates/front/default/home.html.twig line 1

Open in your IDE?
  1. {% extends 'front/_common/_base.html.twig' %}
  3. {% block linkcanonical %}
  4. <link rel="canonical" href="{{ sd_canonical(path('home')) }}" />
  5. {% endblock %}
  7. {% block cssadicional %}
  8. <link rel="stylesheet" href="{{ STATIC_URL }}css/home-styles.css">
  9. {% endblock %}
  11. {% block classbody %}{% endblock %}
  13. {% block content %}
  14. {% if home.bannerShow %}
  15. <!-- BLOQUE 1 -->
  16. <div class="b1home {% if home.bannerVideoShow %}g1-has-video{% endif %}">
  17.     {% if not home.bannerVideoShow %}
  18.     <div class="b1home_slider">
  19.         <ul class="b1homePitcherSlider">
  20.             {% for row in home.bannerItems|arr_item_active('show') %}
  21.                 <li class="b1home_item homeChangeImages {{ row.with_opacity is defined and row.with_opacity ? '' : 'no-shadow' }}" data-image="{{ asset(row.img_desktop|default(''))|sd_azure }};{{ asset(row.img_mobile|default(''))|sd_azure }}">
  22.                     {% if row.only_img %}
  23.                     <a {% if row.url %}href="{{ row.url }}"{% endif %} {% if row.blank %}target="_blank"{% endif %} class="b1home_block wancho {{ row.property ? 'bannerHomeProperty' }}"
  24.                         data-property="{{ row.property }}" data-property-name="{{ row.propertyInfo ? row.propertyInfo.name : '' }}" data-property-location="{{ row.propertyInfo ? row.propertyInfo.location : '' }}" data-property-plaza="{{ row.propertyInfo ? row.propertyInfo.plaza : '' }}" data-property-type="{{ row.propertyInfo ? row.propertyInfo.type : '' }}"
  25.                     >
  26.                         <div class="b1home_info">
  27.                             <div class="b1home_titles">
  28.                                 {% if row.preffix %}
  29.                                 <h4>{{ row.preffix }}</h4>
  30.                                 {% endif %}
  31.                                 {% if row.title %}
  32.                                 <h2>{{ row.title }}</h2>
  33.                                 {% endif %}
  34.                                 {% if row.suffix %}
  35.                                 <h3>{{ row.suffix }}</h3>
  36.                                 {% endif %}
  37.                             </div>
  38.                         </div>
  39.                     </a>
  40.                     {% else %}
  41.                     <div class="b1home_block wancho">
  42.                         <div class="b1home_info">
  43.                             <div class="b1home_titles">
  44.                                 {% if row.preffix %}
  45.                                 <h4>{{ row.preffix }}</h4>
  46.                                 {% endif %}
  47.                                 {% if row.title %}
  48.                                 <h2>{{ row.title }}</h2>
  49.                                 {% endif %}
  50.                                 {% if row.suffix %}
  51.                                 <h3>{{ row.suffix }}</h3>
  52.                                 {% endif %}
  54.                                 {% if row.url and row.btn_text %}
  55.                                 <div class="g0-ctn-btn">
  56.                                     <a href="{{ row.url }}" class="g0-btn h45" {% if row.blank %}target="_blank"{% endif %}>{{ row.btn_text }}</a>
  57.                                 </div>
  58.                                 {% endif %}
  59.                             </div>
  60.                         </div>
  61.                     </div>
  62.                     {% endif %}
  63.                 </li>
  64.             {% endfor %}
  65.         </ul>
  66.     </div>
  67.     {% else %}
  68.     <!-- video -->
  69.     <!-- cuando se video poner una clase en el padre b1home -->
  70.         {% if home.bannerVideoBtnShow %}
  71.         <div class="g1-video-wrap">
  72.         {% else %}
  73.         <a {% if home.bannerVideoBtnUrl %}href="{{ home.bannerVideoBtnUrl }}"{% endif %} class="g1-video-wrap" {% if home.bannerVideoBtnBlank %}target="_blank"{% endif %}>
  74.         {% endif %}
  75.       
  76.         <div class="g1-banner lazy" {% if home.bannerVideoImg %}data-bg="url('{{ asset(home.bannerVideoImg|default(''))|sd_azure }}')" {% endif %}>
  77.             {% if home.bannerVideoText %}
  78.             <div class="wancho">
  79.                 <h3 class="b6-title">{{ home.bannerVideoText }}</h3>
  80.             </div>
  81.             {% endif %}
  82.         </div>
  84.         <div class="g1-video">
  85.             {% if home.bannerVideoTitle %}
  86.             <div class="g1-wrap-text" >
  87.                 <div class="wancho">
  88.                     <h3 class="b6-title">{{ home.bannerVideoTitle }}</h3>
  89.                 </div>
  90.             </div>
  91.             {% endif %}
  92.             <div class="g1-videoinner">
  93.                 <video width="100%" height="100%" class="g1-video-html lazy" autoplay muted playsinline loop data-src="{{ home.bannerVideoUrl }}" {% if home.bannerVideoImg %}data-poster="{{ asset(home.bannerVideoImg)|sd_azure }}"{% endif %}>
  94.                 </video>
  95.             </div>
  96.         </div>
  97.         {% if home.bannerVideoBtnShow %}
  98.             <div class="g0-ctn-btn center g1-cnt-button">
  99.                 <a {% if home.bannerVideoBtnUrl %}href="{{ home.bannerVideoBtnUrl }}"{% endif %} class="g0-btn" {% if home.bannerVideoBtnBlank %}target="_blank"{% endif %}>{{ home.bannerVideoBtnText|default('Ver Proyecto') }}</a>
  100.             </div>
  101.         </div>  
  102.         {% else %}
  103.         </a>
  104.         {% endif %}  
  106.     <!-- video -->
  107.     {% endif %}
  109. </div>
  110. {% endif %}
  112. {% if home.propertyTypesShow and property_types %}
  113. <!-- BLOQUE 2 -->
  114. <section class="b2 g3-anima">
  115.     <div class="wancho">
  116.         {% if home.propertyTypesTitle %}
  117.             <h1 class="b2-title">{{ home.propertyTypesTitle|block_title|raw }}</h1>
  118.         {% endif %}
  119.         <div class="b2-inner-wrap">
  120.             <div class="b2-cnt-tab">
  121.                 {% for item in filter_types %}
  122.                     {% set type_url = item.open_in_list ? path('projects', {'sd_type': item.id}) : path('map', {'sd_type': item.id}) %}
  123.                     <a class="b2-item itemPropertyType" data-type="{{ item.texto }}" href="{{ type_url }}">
  124.                         <div class="b2item-img" style="background-image: url('{{ asset(item.image|default(''))|sd_azure }}');"></div>
  125.                         <div class="b2-item-title {{ item.color }} {{ item.logo ? 'techo' }} ">
  126.                             {% if item.logo %}
  127.                                 <div class="b2-item-icon">
  128.                                     <img src="{{ asset(item.logo|default(''))|sd_azure }}" alt="{{ item.texto }}">
  129.                                 </div>
  130.                             {% endif %}
  131.                             <div class="b2-item-text {{ item.color }}">
  132.                                 <p>{{ item.texto }}</p>
  133.                             </div>
  134.                         </div>
  135.                     </a>
  136.                 {% endfor %}
  137.             </div>
  138.         </div>
  139.     </div>
  140. </section>
  141. {% endif %}
  143. <!-- BLOQUE 3 -->
  144. {% if not home.promoShow %}
  145. <div class="b3-separcion">
  146.     <div class="wancho"></div>
  147. </div>
  148. {% else %}
  149. <section class="b3 g3-anima">
  150.     <div class="wancho">
  151.         {% if home.promoTitle %}
  152.         <h3 class="b3-title">{{ home.promoTitle|block_title|raw }}</h3>
  153.         {% endif %}
  154.         {% if home.activePromoItems %}
  155.         <div class="b3-list">
  156.             {% for row in home.activePromoItems %}
  157.             <a {% if row.url %}href="{{ row.url }}"{% endif %} {% if row.blank %}target="_blank"{% endif %} class="b3-item">
  158.                 <div class="b3-figura">
  159.                     <img data-src="{{ asset(row.img|default(''))|sd_azure }}" alt="{{ row.img|default('')|img_alt }}" width="590" height="280" class="lazy">
  160.                 </div>
  161.             </a>
  162.             {% endfor %}
  163.         </div>
  164.         {% endif %}
  165.     </div>
  166. </section>
  167. {% endif %}
  169. {% if home.additionalShow and home.additionalImageDesktop and home.additionalLink %}
  170.     {% set imageDesktop = home.additionalImageDesktop %}
  171.     {% set imageResponsive = home.additionalImageResponsive ?? imageDesktop %}
  172.     <a href="{{ home.additionalLink }}" target="{{ home.additionalTarget|url_target }}" class="homebg homeChangeImages" data-image="{{ asset(imageDesktop|default(''))|sd_azure }};{{ asset(imageResponsive|default(''))|sd_azure }}"></a>
  173. {% endif %}
  175. {% if home.blogShow and info.blogShow and info.blogUrl %}
  176. <!-- BLOQUE 4 -->
  177. <section class="b4 g3-anima">
  178.     <div class="wancho">
  179.         {% if home.blogTitle %}
  180.         <h3 class="b4-title">{{ home.blogTitle|block_title|raw }}</h3>
  181.         {% endif %}
  182.         {% if home.blogBtnText %}
  183.         <div class="g0-ctn-btn center">
  184.             <a href="{{ info.blogUrl }}" target="_blank" class="g0-btn">{{ home.blogBtnText }}</a>
  185.         </div>
  186.         {% endif %}
  187.         <div class="b4-list" id="blog_ctn">
  188.             {# ver Ajax/blog.html.twig #}
  189.         </div>
  190.     </div>
  191. </section>
  192. {% endif %}
  194. {% if home.formShow %}
  195. <!-- BLOQUE 5 -->
  196. <section class="b5 {% if home.formBackground %}lazy{% endif %}" {% if home.formBackground %}data-bg="{{ asset(home.formBackground)|sd_azure }}"{% endif %}>
  197.     <div class="wancho">
  198.         {% if home.formTitle %}
  199.         <div class="b5-left">
  200.             <h3 class="b5-title">{{ home.formTitle|block_title|raw }}</h3>
  201.         </div>
  202.         {% endif %}
  203.         <div class="b5-rigth">
  204.             <form action="{{ path('subscribe') }}" method="post" id="form_subscription" novalidate>
  205.                 <div class="b5-form">
  206.                     <div class="b5-input">
  207.                         <div class="g5-input g5-item-input">
  208.                             <input type="text" autocomplete="off" id="form_email" name="email" class="form-input validate[required,custom[email]]" onblur="onBlurValidateEmail(this)">
  209.                             <label class="input-label" for="form_email"><span>Email*</span></label>
  210.                         </div>
  211.                     </div>
  212.                     <button class="g0-btn small b5-enviar">
  213.                         <div class="g0-loading-form" style="display:none">
  214.                             <img src="{{ STATIC_URL }}img/loading-form.svg" width="30" alt="enviando...">
  215.                         </div>
  216.                         {{ info_form.subscribeBtnText|default('Suscribirme') }}
  217.                     </button>
  218.                 </div>
  219.                 <div class="b5check">
  220.                     <input type="checkbox"  name="acepto" id="terminos_1" class="validate[required]">
  221.                     <label for="terminos_1" class="b5check_wrap">
  222.                         <span class="b5check_icon"></span>
  223.                         <div class="b5check_text">
  224.                             <p>Acepto los <a href="{{ path('privacy_policies') }}" target="_blank">Políticas de privacidad</a></p>
  225.                         </div>
  226.                     </label>
  227.                 </div>
  228.                 <input type="hidden" name="__token" value="{{ _token }}">
  229.                 {% include "front/form/_utm.html.twig" %}
  230.             </form>
  231.         </div>
  232.     </div>
  233. </section>
  234. {% endif %}
  236. {% if home.popupShow and home.popupImgDesktop %}
  237. <div>
  238.     <a href="#popup-home" class="open-boxlight g0-open-modal" data-custom-class="g0-modal-home"></a>
  239.     <div id="popup-home" class="boxlight g0-wrap-modal">
  240.         <a {% if home.popupUrl %}href="{{ home.popupUrl }}"{% endif %} class="g0-popup-link" {% if home.popupBlank %}target="_blank"{% endif %}>
  241.             <img class="g0-image-popup" data-image="{{ asset(home.popupImgDesktop)|sd_azure }};{{ asset(home.popupImgMobile|default(home.popupImgDesktop))|sd_azure}}" alt="{{ home.popupImgDesktop|img_alt }}">
  242.         </a>
  243.     </div>
  244. </div>
  245. {% endif %}
  246. {% endblock %}
  248. {% block jsfinal %}
  249. <script src="{{ STATIC_URL }}js/home.js"></script>
  250. <script type="text/javascript">
  251.     changeLazyImage('.g0-image-popup', 'tagHtml');
  253.     function load_properties(type_slug, tab) {
  254.         $.post('{{ path("get_properties_by_type_slug") }}',{'slug': type_slug}, function(html){
  255.             $(tab).html(html);
  256.             changeLazyImage('.g7-item .g7-figura-it', '');
  257.         });
  258.     }
  260.     function load_blog_posts() {
  261.         $.post('{{ path("sync_blog") }}', function(html){
  262.             $('#blog_ctn').html(html);
  263.         });
  264.     }
  266.     $(function(){
  267.         {% if home.blogShow and info.blogShow and info.blogUrl %}
  268.         load_blog_posts();
  269.         {% endif %}
  271.         $('.open-boxlight').boxlight();
  272.         $('.g0-open-modal').trigger('click');
  275.         changeImage('.homeChangeImages');
  276.         changeLazyImage('.g7-item .g7-figura-it','')
  281.         //$('.b2 .b2-item-head:first-child').addClass('active');
  282.         //$('.b2 .b2-item-tab:first-child').addClass('active');
  284.         $('.b2').on('click', '.b2-item-head', function (event) {
  285.             if ($(this).attr('href')) {
  286.                 return true;
  287.             }
  288.             event.preventDefault();
  290.             var idTab = $(this).attr('data-tab');
  291.             var slug = $(this).attr('data-slug');
  292.             var tab_body = $('.b2 .b2-item-tab[data-tab="' + idTab + '"]');
  293.             //load_properties(slug, tab_body);
  295.             $('.b2-item-head').removeClass('active');
  296.             $(this).addClass('active');
  297.             $('.b2 .b2-item-tab').removeClass('active');
  298.             tab_body.addClass('active');
  299.         });
  300.         $('.b2 .b2-item-head:first-child').trigger('click');
  302.         $('.bannerHomeProperty').on('click', function () {
  303.             sendClicEnBanner($(this));
  304.         })
  306.         function sendClicEnBanner(element) {
  307.             const name = element.data('property-name');
  308.             const location = element.data('property-location');
  309.             const plaza = element.data('property-plaza');
  310.             const type = element.data('property-type');
  312.             const data = {
  313.                 'event': 'clic_en_banner',
  314.                 'Proceso': 'Informativo',
  315.                 'Tipo_evento': 'Interacción',
  316.                 'Nombre_proyecto': name,
  317.                 'Plaza': plaza,
  318.                 'Tipo-vivienda': type,
  319.                 'Nombre_ciudad': location,
  320.                 'Sección': 'Pagina principal',
  321.                 'SubSección': 'Banner',
  322.                 'PagePath': getPagePath(),
  323.                 'TimeStamp': getCurrentTimestamp(),
  324.                 'TipoDispositivo': getDeviceType(),
  325.             }
  327.             sendToAnalytics(data);
  328.         }
  330.         $('.itemPropertyType').on('click', function (e) {
  331.             const propertyType = $(this).data('type');
  332.             sendClicEnTipoInmueble(propertyType);
  333.         })
  335.         function sendClicEnTipoInmueble(value) {
  336.             const data = {
  337.                 'event': 'clic_en_tipo_inmueble',
  338.                 'Proceso': 'Navegación',
  339.                 'Tipo_evento': 'Interacción',
  340.                 'Tipo_vivienda': value,
  341.                 'Sección': 'Pagina principal',
  342.                 'SubSección': 'Encuentra el proyecto ideal para ti',
  343.                 'PagePath': getPagePath(),
  344.                 'TimeStamp': getCurrentTimestamp(),
  345.                 'TipoDispositivo': getDeviceType(),
  346.             };
  348.             sendToAnalytics(data);
  349.         }
  351.         $('.g7-item').on('click', function (event) {
  352.             event.preventDefault();
  353.             const $this = $(this);
  354.             const link = $this.attr('href');
  356.             // sendClicEnProyecto($this);
  357.             window.location.href = link;
  358.         });
  360.         // function sendClicEnProyecto(element) {
  361.         //     const name = element.data('name');
  362.         //     const location = element.data('location');
  363.         //     const plaza = element.data('plaza');
  364.         //     const type = element.data('type');
  365.         //
  366.         //     const data = {
  367.         //         'event': 'clic_en_proyecto',
  368.         //         'Proceso': 'Informativo',
  369.         //         'Tipo_evento': 'Interaccion',
  370.         //         'Nombre_proyecto': name,
  371.         //         'Plaza': plaza,
  372.         //         'Tipo_vivienda': type,
  373.         //         'Nombre_departamento': location,
  374.         //         'Sección': 'Pagina principal',
  375.         //         'SubSección': 'Encuentra el proyecto ideal para tí',
  376.         //         'PagePath': getPagePath(),
  377.         //         'TimeStamp': getCurrentTimestamp(),
  378.         //         'TipoDispositivo': getDeviceType(),
  379.         //     };
  380.         //
  381.         //     sendToAnalytics(data);
  382.         // }
  384.         //- +++ SLIDER BANNER +++
  385.         var b1homeItems = $('.b1home_item').length;
  386.         if(b1homeItems > 1){
  387.             $('.b1homePitcherSlider').on('init', function(e, slick) {
  388.                 $(this).find('.b1home_item').removeClass('animation');
  389.                 $(this).find('.b1home_item.slick-active').addClass('animation');
  390.             });
  391.             $( '.b1homePitcherSlider').slick({
  392.                 fade: true,
  393.                 autoplay: true,
  394.                 autoplaySpeed: 4000,
  395.                 speed: 1350,
  396.                 arrows: false,
  397.                 dots: true,
  398.                 pauseOnFocus: false,
  399.                 pauseOnHover: false
  400.             });
  401.             $('.b1homePitcherSlider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  402.                 $(this).find('.b1home_item').removeClass('animation');
  403.             });
  404.             $('.b1homePitcherSlider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  405.                 $(this).find('.b1home_item.slick-active').addClass('animation');
  406.             });
  407.         } else {
  408.             $('.b1home_item').addClass('animation');
  409.         }
  410.         //- <<< END >>>
  412.     // /proyectos
  413.         var cantidadb2 = $('.b2-item-head').length;
  415.         function sliderOwb2(){
  416.             $('.b2-slider').removeClass('desktop')
  417.             $('.b2-slider').addClass('owl-carousel');
  418.             $('.b2-slider').owlCarousel({
  419.                 loop:true,
  420.                 margin:9,
  421.                 nav:true,
  422.                 autoplay:false,
  423.                 autoWidth:true,
  424.                 autoplayTimeout:3000,
  425.                 navText:['<span class="icon-dropdown-arrow"></span>','<span class="icon-dropdown-arrow"></span>'],
  426.                 responsive:{
  427.                     0:{
  428.                         items:2,
  429.                         margin:9,
  430.                     },
  432.                     425:{
  433.                         items:3,
  434.                         margin:9,
  435.                     },
  437.                     640:{
  438.                         items:4,
  439.                         margin:9,
  440.                     },
  441.                     1001:{
  442.                         items:7,
  443.                         margin:9,
  444.                     },
  446.                 }
  447.             })
  448.         }
  450.         function destroyOwb2(){
  451.             $('.b2-slider').trigger('destroy.owl.carousel');
  452.             $('.b2-slider').addClass('desktop');
  453.             $('.b2-slider').removeClass('owl-carousel');
  454.         }
  456.         if (matchMedia) {
  457.             var mqb2 = window.matchMedia("(max-width: 1000px)");
  458.             mqb2.addListener(WidthChangeb2);
  459.             WidthChangeb2(mqb2);
  460.         }
  462.         // media query change
  463.         function WidthChangeb2(mqb2) {
  464.             if (mqb2.matches ) {
  465.                     console.log('menor a 1000px');
  466.                     if ($('.b2-slider').hasClass('owl-carousel')) {
  467.                         // console.log('slider, ya existe');
  468.                     }
  469.                     else{
  470.                         // console.log('slider, aun no existe')
  471.                         sliderOwb2()
  472.                 }
  473.             }
  474.             else {
  475.                 console.log('mayor a 1000px');
  476.                 if (cantidadb2 >= 8) {
  477.                     destroyOwb2()
  478.                     sliderOwb2()
  479.                 }
  480.                 else{
  481.                     destroyOwb2()
  482.                 }
  483.             };
  484.         }
  485.         // /proyectos
  487.           //efecto levantar label de formulario
  488.           var inputs = document.getElementsByClassName("form-input");
  489.           for (var i = 0; i < inputs.length; i++) {
  490.             inputs[i].addEventListener("blur", function(e) {
  491.                 e.currentTarget.closest('.g5-item-input').classList.remove('inFocus');
  492.             });
  493.             inputs[i].addEventListener("focus", function(e) {
  494.                 e.currentTarget.closest('.g5-item-input').classList.add('inFocus');
  495.               if (this.value.length >= 1) {
  496.                 this.nextElementSibling.classList.add("fijar");
  497.               } else {
  498.                 this.nextElementSibling.classList.remove("fijar");
  499.               }
  500.             });
  501.             inputs[i].addEventListener("change", function() {
  502.               if (this.value == "") {
  503.                 this.nextElementSibling.classList.remove("fijar");
  504.               } else {
  505.                 this.nextElementSibling.classList.add("fijar");
  506.               }
  507.             });
  508.           }
  509.           //efecto levantar label de formulario
  510.         
  511.         $("#form_subscription").validationEngine('attach', {
  512.             promptPosition: "topLeft",
  513.             autoHidePrompt: true,
  514.             autoPositionUpdate: false,
  515.             autoHideDelay: 2000,
  516.             binded: false,
  517.             scroll: false,
  518.             validateNonVisibleFields: true,
  519.             showOneMessage: false
  520.         });
  521.         
  523.         $('.b5-enviar').on('click', function(event) {
  524.             event.preventDefault();
  525.             let loading = $('.g0-loading-form');
  526.             let btn = $(this);
  527.             let form = $(this).closest('form');
  528.             btn.prop('disabled', true);
  529.             loading.show();
  530.             const valid = form.validationEngine('validate');
  531.             if (!valid) {
  532.                 loading.hide();
  533.                 btn.prop('disabled', false);
  534.                 return false;
  535.             }else {
  536.                ajaxSendSimpleForm(form,btn,loading);
  537.             }
  538.         });
  540.         // animaciones bloques
  541.         var animaseccion = $('.g3-anima')
  542.         $(animaseccion).each(function (index, el) {
  543.             $(el).waypoint(function (direction) {
  544.                 if (direction === 'down') {
  545.                     $(el).addClass('animate');
  546.                 }
  547.             }, {
  548.                 offset: '85%'
  549.             });
  550.         });
  551.         // animaciones bloques
  552.     });
  553. </script>
  554. {% endblock %}