templates/home/home_new.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4. {% set route = app.request.attributes.get('_route') %}
  5. {% set params = app.request.attributes.get('_route_params') %}
  6. {% set cat_id = app.request.get('categoria_id') %}
  9. {{ include('basic/canales.html.twig') }}
  11. <section class="banner-home" data-delay="{{ qi.setting('tiempo-slider-home') }}">
  12.     <div class="swiper swiper-home only-desk">
  13.         <div class="swiper-wrapper">
  14.             {% for item in qi.galeria('home-banner') %}  
  15.             {# {{ dump(item)}} #}
  16.                 <div class="swiper-slide optimagen" style="background-image: url('{{ qi.imagen('imagen-defecto').image }}');" data-imagen="{{ item.image }}">
  18.                         <!-- en desktop dejar un maximo de 4 links por slider -->
  19.                     {% if item.link %}
  20.                     <div class="links">
  21.                         <a href="{{ item.link }}" target="_blank"></a>
  22.                     </div>
  23.                     {% endif %}
  24.                 </div>
  25.             {% endfor %}
  26.         </div>
  27.         <div class="controls d-flex justify-content-center align-items-center">
  28.             <a class="control stop" data-state="play">
  29.                 <img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('stop_home').image }}" alt="imgoptimize"/>
  30.             </a>
  31.             <p class="color-naranja mx-3 separador">|</p>
  32.             <div class="swiper-button-prev">
  33.                 <img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('left_home').image }}" alt="imgoptimize"/>
  34.             </div>
  35.             <div class="pagination-banner-home swiper-pagination mx-3"></div>
  36.               <div class="swiper-button-next">
  37.                   <img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('right_home').image }}" alt="imgoptimize"/>
  38.             </div>
  39.         </div>
  40.     </div>
  41.     
  42.     <div class="swiper swiper-home only-mobile">
  43.         <div class="swiper-wrapper">
  44.             {% for item in qi.galeria('home-banner-mobile') %}
  45.                 <div class="swiper-slide optimagen" style="background-image: url('{{qi.imagen('imagen-defecto').image}}');" data-imagen="{{ item.image }}">
  46.                     <!-- en mobile dejar un maximo de 2 links por slider -->
  47.                     <div class="links">
  48.                         <a href="#"></a>
  49.                         <a href="#"></a>
  50.                     </div>
  51.                 </div>
  52.             {% endfor %}
  53.         </div>
  54.         <div class="controls d-flex justify-content-center align-items-center">
  55.             <a class="control stop" data-state="play">
  56.                 <img src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('stop_home').image }}" alt="img"/>
  57.             </a>
  58.             <p class="color-naranja mx-3 separador">|</p>
  59.             <div class="swiper-button-prev">
  60.                 <img src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('left_home').image }}" alt="img"/>
  61.             </div>
  62.             <div class="pagination-banner-home swiper-pagination mx-3"></div>
  63.               <div class="swiper-button-next">
  64.                   <img src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('right_home').image }}" alt="img"/>
  65.             </div>
  66.         </div>
  67.     </div>
  68.     <div class="aviso only-desk">
  69.         <a href="{{ qi.imagen('banner_ad').link }}" >
  70.             <img class="imgoptimize" src="{{ qi.imagen('imagen-defecto').image }}" data-imagen="{{  qi.imagen('banner_ad').image }}" alt="{{ qi.imagen('banner_ad').alt }}"/>
  71.         </a>
  72.         <img  class="flecha imgoptimize" src="{{ asset(qi.imagen('imagen-defecto').image) }}" data-imagen="{{ qi.imagen('flecha_home').image }}" alt="img">
  73.     </div>
  74.     <div class="aviso only-mobile">
  75.         <img class="imgoptimize" src="{{ asset(qi.imagen('imagen-defecto').image) }}" data-imagen="{{ qi.imagen('seleccionar_home').image }}" alt="img">
  76.     </div>
  77.     <div class="conjunto only-mobile">
  78.         <a href=""><img class="imgoptimize" src="{{ asset(qi.imagen('imagen-defecto').image) }}" data-imagen="{{ qi.imagen('enlinea_home').image }}"  alt="img"></a> <br>
  79.         <a href=""><img  class="imgoptimize" src="{{ asset(qi.imagen('imagen-defecto').image) }}" data-imagen="{{ qi.imagen('chat_home').image }}" alt="img"></a>
  80.     </div>
  81. </section>
  83. <div class="container">
  84.     <div class="row">
  85.         <div class="col-12 col-md-8 offset-md-2 py-2 py-md-4 text-center">
  86.             <h1 class="mb-2 mb-md-4">{{ qi.texto('titulo-productos-home') |raw}}</h1>
  87.             <p>{{ qi.texto('texto-productos-home') |raw}} </p>
  88.         </div>
  89.     </div>
  90. </div>
  92. {# productos destacados #}
  93. <section class="products-home bg-gris3">
  94.     <div class="container pt-4">
  95.         <div class="swiper productos-home">
  96.       <div class="swiper-wrapper">
  97.         {% for item in productos %}
  98.         <div class="swiper-slide">
  99.             <div class="item-producto">
  100.                 <div class="tags-promos">
  101.                     {% if item.descuento %}
  102.                         
  103.                         <p class="prom bg-naranja mb-2">
  104.                             {{ (item.descuento * 100) | round }}% Dcto
  105.                         </p>
  106.                         
  107.                     {% endif %}
  108.                     {% if item.nuevo == 1 %}
  109.                         
  110.                         <p class="prom bg-naranja-claro">nuevo</p>
  111.                         
  112.                     {% endif %}
  113.                 </div>
  114.                 {# enlace en la img #}
  115.                 <a class="img" href="{{ path('producto_slug_subcat', {idproducto: item.id, producto: item.slug}) }}"> 
  116.                     <img class="imgoptimize" src="{{ qi.imagen('imagen-defecto').image }}" alt="{{ item.alt }}" data-imagen="{{ item.imagen }}" alt="img">
  117.                 </a>
  118.                 <div class="text-center px-3">
  119.                     <h4 class="color-negro">{{ item.nombre }}</h4>
  120.                 </div>
  121.                 <p class="sm pt-2">{{ item.resumen | raw }}</p>
  123.                 {% for lista in listas %}
  124.                     {% if lista.producto.plu == item.plu %}
  125.                         <p class="pt-2 anterior">${{ lista.PrecioSinDescuento | number_format }}</p>
  126.                         <p class="pt-1">Desde ${{ lista.precio | number_format }}</p>                    
  127.                     {% endif %}                                    
  128.                 {% endfor %}
  130.                 {% if not listas and item.descuento %}
  131.                     <p class="pt-2 anterior">${{ item.PrecioSinDescuento | number_format }}</p>
  132.                     <p class="pt-1">Desde ${{ item.precio | number_format }}</p>
  133.                 {% endif %}    
  135.                 {% if not item.descuento %}
  136.                     <p class="pt-1">${{ item.precio | number_format }}</p> 
  137.                 {% endif %}    
  138.                 
  139.                 <div class="btn-ver mt-1">
  140.                     <a href="{{ path('product', {id: item.plu, nombre:item.nombre}) }}" class="btn btn-gris btn-item">{{qi.Texto('btn_ver_producto_home')}}</a>
  141.                 </div>
  142.             </div> 
  143.         </div>
  144.         {% endfor %}
  145.       </div>
  146.         <div class="swiper-button-next">
  147.             <img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('right_home').image }}" alt="img">
  148.         </div>
  149.         <div class="swiper-button-prev">
  150.             <img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('left_home').image }}" alt="img">
  151.         </div>
  152.     </div>
  153.     </div>
  154. </section>
  156. <div class="conjunto only-desk text-center">
  157.     <!-- <a href="{{qi.setting('chat_en_linea')}}" target="_blank"><img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('chat_home').image }}" alt="img"/></a> -->
  158.     <div>
  159.         <a class="cursor-pointer" id="btn-action-chats"><img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('chat_home').image }}" alt="img"/></a>
  160.     </div>
  161.     <div class="btns-chats" id="btns-chats">
  162.         <a href="{{qi.setting('chat_en_linea')}}" target="_blank"><img class="imgoptimize icono" src="/img/SVG/whatsapp-verde.svg" alt="img"/></a>
  163.         <a href="https://telegram.me/Warriorseg" target="_blank"><img class="imgoptimize icono" src="/img/SVG/telegram-azul.svg" alt="img"/></a>
  164.     </div>
  165. </div>
  167. <section class="bg-gris3 py-5 categ-slider">
  168.     <div class="container">
  169.         <div class="row">
  170.             <div class="col-12 d-flex justify-content-between align-items-center">
  171.                 <div class="swiper-button-prev color-naranja">
  172.                     <img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('left_home').image }}" alt="img"/>
  173.                 </div>
  174.                 <div class="swiper-container categoria-slider px-2">
  175.                     <div class="swiper-wrapper">
  176.                         {% for item in blogs %}
  177.                             <div class="swiper-slide">
  178.                                 <div class="container">
  179.                                     <div class="row">
  180.                                         <div class="col-sm-6">
  181.                                             <!-- <img class="imgoptimize" src="{{ qi.imagen('imagen-defecto').image }}" data-imagen="{{ item.imagenHome }}" alt="item img"> -->
  182.                                             <img class="w-100" src="{{ item.imagenHome }}" alt="item img">
  183.                                         </div>
  184.                                         <div class="col-sm-6 d-flex align-items-center">
  185.                                             <div class="info-swiper">
  186.                                                 <h4 class="color-amarillo">{{ item.categoria }}</h4>
  187.                                                 <h2 class="color-negro pt-4">{{ item.titulo }}</h2>
  188.                                                 <p class="color-negro">{{ item.resumen|raw }} </p>
  189.                                                 <button class="btn btn-naranja mt-4"><a href="{{ path('blog-interna', {id: item.id, nombre: item.titulo}) }}">{{qi.Texto('btn_ver_mas_home')}}</a></button>
  190.                                             </div>
  191.                                         </div>
  192.                                     </div>
  193.                                 </div>
  194.                             </div>
  195.                         {% endfor %}
  196.                     </div>
  197.                 </div>
  198.                 <div class="swiper-button-next color-naranja">
  199.                     <img class="imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('right_home').image }}" alt="img"/>
  200.                 </div>
  201.             </div>
  202.         </div>
  203.     </div>
  204. </section>
  206. <section class="bg-gris2 w-100 info d-flex justify-content-center align-items-center optimagen" style="background-image: url({{ qi.imagen('imagen-defecto').image }});" data-imagen="{{ qi.imagen('bg-nubes').image }}">
  207.     <div class="container">
  208.         <div class="row text-center">
  209.             <div class="col">
  210.                 <div>
  211.                     {{ qi.imagen('bg-nubes').descripcion | raw }}
  212.                 </div>
  213.             </div>
  214.         </div>
  215.     </div>
  216. </section>
  218. {% if qi.setting('imgvideo_home') == 1 %}
  219. <section>
  220.     <div class="bg-naranja animacion py-5">
  221.         <div class="wave my-lg-5 m-auto d-flex justify-content-center">
  222.             <img class="w-100 imgoptimize" src="{{qi.imagen('imagen-defecto').image}}" data-imagen="{{ qi.imagen('imgvideo_home').image }}" alt="img">
  223.         </div>
  224.     </div>
  225.     {{ include('basic/swiper-firmeza.html.twig') }}    
  226. </section>
  227. {% else %}
  228. <section class="video-home">    
  229.     <iframe class="video" src="https://www.youtube.com/embed/{{qi.imagen('imgvideo_home').link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  230. </section>
  231. {% endif %}
  233. <section>
  234.     <div class="row w-100 cont pt-2">
  235.         {% for item in qi.galeria('puntos_home') %}
  236.             {% if item.link %}
  237.             {# <a href="{{item.link}}"> #}
  238.                 <a href="{{item.link}}" class="col-sm-4 elementos optimagen" style="background-image: url('{{ qi.imagen('imagen-defecto').image }}');" data-imagen="{{ item.image }}">
  239.                 </a>
  240.             {# </a> #}
  241.             {% else %}
  242.             <div class="col-sm-4 elementos optimagen" style="background-image: url('{{ qi.imagen('imagen-defecto').image }}');" data-imagen="{{ item.image }}">
  243.                 {% for punto in item.puntos %}
  244.                     <a href="{{ path('product',{id: punto.producto.id, nombre: qi.slugify(punto.producto.nombre)}) }}" data-toggle="tooltip" data-placement="top" class="boton" style="top: calc({{ punto.y*100 }}% - 4.2vw); left: calc({{ punto.x*100 }}% - 4.2vw);" title="
  245.                         <div class='tooltip-box' data-href='{{ path('product',{id: punto.producto.id, nombre: qi.slugify(punto.producto.nombre)}) }}''>
  246.                             <a href='{{ path('product',{id: punto.producto.id, nombre: qi.slugify(punto.producto.nombre)}) }}'>
  247.                                 <img src='{{punto.producto.imagen}}' />
  248.                                 <h4 class='color-blanco'>{{ punto.producto.nombre }}</h4>
  249.                                 {# <p class='color-blanco'>${{ punto.producto.precio | number_format }}</p> #}
  250.                                 <i class='icon-ver ft-tx color-blanco'></i>
  251.                             </a>
  252.                         </div>">
  253.                         <div>
  254.                             <button type="button" class="bot color-gris7" >+</button>
  255.                         </div>
  256.                     </a>
  257.                 {% endfor %}
  258.             </div>
  259.             {% endif %}
  260.         {% endfor %}
  261.     </div>
  262. </section>
  265. <section class="info-banner-mobile optimagen d-md-none" style="background-image: url('{{ qi.imagen('imagen-defecto').image }}');" data-imagen="{{ qi.imagen('home_promocion_mobile').image }}">
  266.     <div class="d-flex justify-content-center align-items-center w-100 h-100">
  267.         <h2 class="italic color-blanco text-center">{{ qi.imagen('home_promocion_mobile').titulo }}</h2>
  268.     </div>
  269. </section>
  271. <section class="info-banner optimagen d-none d-md-block" style="background-image: url('{{ qi.imagen('imagen-defecto').image }}');" data-imagen="{{ qi.imagen('home_promocion').image }}">
  272.     <div class="d-flex justify-content-center align-items-center w-100 h-100">
  273.         <h2 class="italic color-blanco text-center">{{ qi.imagen('home_promocion').titulo }}</h2>
  274.     </div>
  275. </section>
  279. {{ include('basic/necesitas-ayuda.html.twig') }}
  283. {{ include('basic/modalProm.html.twig') }}
  285. {% endblock %}
  286. {% block javascripts %}
  287.     <script>
  288.         (function () {
  289.             const mediaQueryMobile = window.matchMedia("(max-width: 1200px)");
  291.             if (mediaQueryMobile.matches) {
  292.                 const botonesPuntos = $('.cont .elementos a');
  294.                 for (let i = 0; i < botonesPuntos.length; i++) {
  295.                     botonesPuntos[i].addEventListener("click", (e) => {
  296.                         e.preventDefault();
  297.                     });
  298.                 }
  299.             }
  300.         })();    
  301.     </script>
  302. {% endblock %}