templates/basic/product.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block seo %}
  4.   {% set ruta = app.request.get('_route') %}
  5.   {% set params = app.request.attributes.get('_route_params')  %}
  6.   
  7.   <title>{{ product.TituloSeo }}</title>
  8.   <meta name="description" content="{{ product.DescripcionSeo }}" />
  9.   <link rel="image_src" href="{{ product.imagen }}"/>
  10.   <meta property="og:title" content="{{ product.nombre }}" />
  11.   <meta property="og:type" content="article" />
  12.   <meta property="og:url" content="{{ url(ruta,params) }}" />
  13.   <meta property="og:image" content="{{ product.imagen }}" />
  14.   <meta property="og:description" content="{{ product.DescripcionSeo }}" />
  15. {% endblock %}
  17. {% block body %}
  18. {{ include('basic/canales.html.twig') }}
  19. <section class="product">
  20.   <div class="container">    
  21.     <div class="row">
  22.       <div class="col-12 col-md-6 col-xl-7">
  23.         <div class="swiper mySwiper2 position-relative">
  24.           <div class="swiper-wrapper">
  25.             
  26.             {% for item in imgsprod %}
  27.             <div class="swiper-slide">
  28.               <img class="img-pro zoom" src="{{ item.image }}" />
  29.             </div>
  30.             {% endfor %}
  31.           </div>
  32.           <div class="swiper-button-next" aria-disabled="false">
  33.             <img src="/img/SVG/right.svg"/>
  34.           </div>
  35.           <div class="swiper-button-prev" aria-disabled="false">
  36.             <img src="/img/SVG/left.svg"/>
  37.           </div>
  38.         </div>
  39.         <div thumbsSlider="" class="swiper mySwiper">
  40.           <div class="swiper-wrapper">
  41.            {% for item in imgsprod %}
  42.             <div class="swiper-slide">
  43.               <img class="w-100" src="{{ item.image }}" />
  44.             </div>
  45.             {% endfor %}
  46.           </div>
  47.         </div>        
  48.       </div>
  49.       {# informacion del producto #}
  50.       <div class="col-12 col-md-6 col-xl-5">
  51.         {# escritorio #}
  53.         <div class="info-product only-desk mb-4">
  54.           
  55.           <div class="d-flex justify-content-between">
  56.             <h1 class="color-negro">{{ product.nombre }} 
  57.             {% if product.rotulo %}
  58.               {% if product.rotulo.nombre %}
  59.               <span class="etiqueta-nombre-producto py-1 px-3 bg-gris3 rounded-pill">{{  product.rotulo.nombre }}</span>
  60.               {% endif %}
  62.               {% if product.rotulo.imagen %}
  63.               <img src ="{{ product.rotulo.imagen }}" class="etiqueta-nombre-producto py-1 px-3 bg-gris3 rounded-pill"></img>
  64.               {% endif %}
  65.             {% endif%}
  66.             </h1>
  67.             {# <i class="icon-fav color-gris4" id="fav_prod{{ principal_padre['plu'] }}" data-id="{{ principal_padre['plu'] }}" data-user="{% if app.user %}1{% endif %}"></i> #}
  68.                             <i class="icon-fav color-gris4" id="fav_prod{{ product.plu }}" data-id="{{ product.plu }}" data-user="{% if app.user %}1{% endif %}"></i>
  69.           </div>
  71.           <div class="titulos-producto">
  73.           {% if lista %}
  74.             {% if lista.precioSinDescuento != lista.precio %}
  75.               {% if product.dctoic %}
  76.                   <h2 class="mr-2 mb-0 color-naranja">${{ lista.precio | number_format }}</h2>
  77.                   <p class="color-naranja">{{qi.texto('textoprom_incarrito')|raw}}</p>
  78.               {% else %}
  79.                 <h3 class="medium mb-0 mr-2" style="text-decoration: line-through;">
  80.                     ${{ lista.precioSinDescuento | number_format }}
  81.                 </h3>
  82.               {% endif %}
  83.             {% endif %}
  84.               {% if product.dctoic %}
  85.                   <h2 class="mr-2 mb-0 color-naranja">${{ lista.precio | number_format }}</h2>
  86.                   <p class="color-naranja">{{qi.texto('textoprom_incarrito')|raw}}</p>
  87.               {% else %}
  88.               <h2 class="mr-2 mb-0 color-naranja">${{ lista.precio | number_format }}</h2>
  89.             {% if lista.precioSinDescuento != lista.precio %}
  90.               <h6 class="sm-bold mb-0">Ahorras ${{ (lista.precioSinDescuento - lista.precio) | number_format }}</h6>
  91.             {% endif %} 
  92.             {% endif %}           
  93.           {% else %}
  94.               {% if product.dctoic %}
  95.                 <h2 class="mr-2 mb-0 color-naranja">${{ lista.precio | number_format }}</h2>
  96.                 <p class="color-naranja">{{qi.texto('textoprom_incarrito')|raw}}</p>
  97.               {% else %}
  98.                 <h2 class="mr-2 mb-0 color-naranja">${{ product.precio | number_format }}</h2>
  99.               {% endif %}
  100.           {% endif %}
  101.           </div>
  103.           <p class="color-gris1">Disponible para fabricación</p>
  105.           <ul class="opciones mt-4">
  106.             <li id="descripcion" class="active">Descripción </li>
  107.             {# <li id="materiales">Materiales</li> #}
  108.             <li id="entrega">Tiempos de entrega</li>
  109.             <li id="ficha">Ficha técnica</li>
  110.           </ul>
  112.           <div class="py-2 descripcion inf">
  114.             <div class="cont-info">
  115.               <p class="sm">{{ product.descripcion | raw }}</p>
  117.               <h4>Material:</h4>
  118.               <p>{{ materialproduct }} </p>
  120.               <h4>Tipología:</h4> 
  121.               <p>{{ product.tipologia }}</p>  
  122.               {# cambio en el selec de las medidas #}
  123.               <h4>Medidas</h4>
  124.               <div class="tam">
  125.                 {% for item in medidas %}
  126.                   {% if item.nombremed %}
  127.                     <a href="{{ path('product_medida', {id: item.plu, nombre: qi.slugify(item.nombremed), medida: qi.slugifyMedida(item.nombremed) }) }}" id="tam_{{item.idmed}}"
  128.                        class="btn-med {% if medidaroute %}{% if medidaroute == qi.slugify(item.nombremed) %}active{% endif %}{% endif %}
  129.                       {% if medidaroute == null %}
  130.                         {% if item.nombremed == product.medida %}active{% endif %}
  131.                       {% endif %}">
  132.                       {{ item.nombremed }}</a>
  133.                   {% endif %}
  134.                 {% endfor %}
  135.               </div>
  137.             </div>
  139.           </div>
  141.           {# tiempos de entrega #}
  142.           <div class="py-2 entrega inf mb-2 mb-md-4">
  143.             <div class="cont-info">
  144.               <p class="sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
  145.               <h6 class="bold pt-4">Precio y tiempos de entrega para productos inferiores a
  146.                 $300.000
  147.               </h6>
  148.               <table class="w-100">
  149.                 <tbody>
  150.                   <tr>
  151.                     <td class="ciudad"><p class="sm">Bogotá</p></td>
  152.                     <td class="tiempo"><p class="sm">6 días hab</p></td>
  153.                     <td class="valor"><p class="sm">$10.000</p></td>
  154.                   </tr>
  155.                   <tr>
  156.                     <td class="ciudad"><p class="sm">Medellín</p></td>
  157.                     <td class="tiempo"><p class="sm">6 días hab</p></td>
  158.                     <td class="valor"><p class="sm">$10.000</p></td>
  159.                   </tr>
  160.                   <tr>
  161.                     <td class="ciudad"><p class="sm">Cali</p></td>
  162.                     <td class="tiempo"><p class="sm">6 días hab</p></td>
  163.                     <td class="valor"><p class="sm">$10.000</p></td>
  164.                   </tr>
  165.                   <tr>
  166.                     <td class="ciudad"><p class="sm">Barranquilla</p></td>
  167.                     <td class="tiempo"><p class="sm">6 días hab</p></td>
  168.                     <td class="valor"><p class="sm">$10.000</p></td>
  169.                   </tr>
  170.                   <tr>
  171.                     <td class="ciudad"><p class="sm">Bucaramanga</p></td>
  172.                     <td class="tiempo"><p class="sm">6 días hab</p></td>
  173.                     <td class="valor"><p class="sm">$10.000</p></td>
  174.                   </tr>
  175.                 </tbody>
  176.               </table>
  177.             </div>
  178.           </div>
  180.           {# ficha tecnica #}
  181.           <div class="py-2 ficha inf">
  182.             <div class="cont-info w-100">
  183.             {{ include('basic/fichatecnica.html.twig') }}
  184.             </div>
  185.           </div>
  187.           <div class="w-75 mx-auto">
  188.             <img src="{{ product.imagenFirmeza }}" alt="">
  189.           </div>
  191.         </div>
  194.         {# mobile #}
  195.         <div class="only-mobile info-product">
  196.           <div class="d-flex justify-content-between">
  197.             <h1 class="color-negro">{{product.nombre}}</h1>
  198.                             <i class="icon-fav color-gris4" id="fav_prod{{ product.plu }}" data-id="{{ product.plu }}" data-user="{% if app.user %}1{% endif %}"></i>
  199.             {# <i class="icon-fav color-gris4"></i> #}
  200.           </div>
  201.           <div class="d-flex">
  202.           {% if lista %}
  203.             {% if lista.precioSinDescuento != lista.precio %}
  204.               <h3 class="medium mb-0 mr-2" style="text-decoration: line-through;">
  205.                   ${{ lista.precioSinDescuento | number_format }}
  206.               </h3>
  207.             {% endif %}
  208.               <h2 class="mr-2 mb-0 color-naranja">${{ lista.precio | number_format }}</h2>
  209.             {% if lista.precioSinDescuento != lista.precio %}
  210.               <h6 class="sm-bold mb-0">Ahorras ${{ (lista.precioSinDescuento - lista.precio) | number_format }}</h6>
  211.             {% endif %}
  212.           {% else %}
  213.                 <h2 class="mr-2 mb-0 color-naranja">${{ product.precio | number_format }}</h2>
  214.           {% endif %}
  216.           </div> 
  217.           <div class="row w-100">
  218.             <h4>Medidas</h4>
  219.             <div class="tam">
  220.               {% for item in medidas %}
  222.                 {% if item.nombremed %}
  223.                   <a href="{{ path('product_medida', {id: item.plu, nombre: qi.slugify(item.nombremed), medida: qi.slugifyMedida(item.nombremed) }) }}" id="tam_{{item.idmed}}" class="btn-med {% if medidaroute %}{% if medidaroute == qi.slugify(item.nombremed) %}active{% endif %}{% endif %} {% if medidaroute == null %}{% if item.nombremed == "Sencillo 100 x 190" %}active{% endif %}{% endif %}">{{ item.nombremed }}</a>
  224.                 {% endif %}
  225.               {% endfor %}
  226.             </div>
  227.           </div>
  228.         </div>
  229.         {# boton añadir #}
  230.         <div class="container">
  231.           <div class="d-flex">
  232.             <div class="cant d-flex">
  233.               <button class="color-naranja inumber-decrement_input">-</button>
  234.               <input class="color-negro" id="cant_{{ product.id }}" type="text" value="1">
  235.               <button class="color-naranja inumber-increment_input">+</button>
  236.             </div>
  237.             <button class="btn btn-naranja ml-3 openCar agregar" data-id="{{ product.plu }}"><i class="icon-carrito color-blanco mr-1"></i>Añadir</button>
  238.           </div> 
  239.         </div>
  240.         {# mobile #}
  241.         <div class="only-mobile info-product mt-4">
  242.           <div class="accordion" id="accordionExample">
  243.             <div class="card">
  244.               <div class="card-header" id="headingOne">
  245.                 <h2 class="mb-0">
  246.                   <button class="btn btn-block collapsed text-left color-gris1" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  247.                     Descripción
  248.                   </button>
  249.                 </h2>
  250.               </div>
  252.               <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  253.                 <div class="card-body p-2">
  254.                   <div class="descripcion inf">
  255.                     <div class="cont-info">
  256.                       {{ product.descripcion | raw }}
  257.                     </div>
  258.                   </div>
  259.                 </div>
  260.                 <div class="p-2">
  261.                   <h4>Material:</h4> 
  262.                   <p>{{ materialproduct }}</p>
  263.                   <h4>Tipología:</h4> 
  264.                   <p>{{ product.tipologia }}</p>  
  265.                 </div>
  266.               </div>
  267.             </div>
  268.             <div class="card">
  269.               <div class="card-header" id="headingTwo">
  270.                 <h2 class="mb-0">
  271.                   <button class="btn btn-block text-left collapsed color-gris1" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  272.                     Materiales
  273.                   </button>
  274.                 </h2>
  275.               </div>
  276.               <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
  277.                 <div class="card-body p-2">
  278.                   <div class="materiales inf">
  279.                     <div class="cont-info">
  280.                         {{ materialproduct }}
  281.                     </div>
  282.                   </div>
  283.                 </div>
  284.               </div>
  285.             </div>
  287.             {# tiempos de entrega #}
  288.             <div class="card">
  289.               <div class="card-header" id="headingThree">
  290.                 <h2 class="mb-0">
  291.                   <button class="btn  btn-block text-left collapsed color-gris1" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  292.                     Tiempos de entrega
  293.                   </button>
  294.                 </h2>
  295.               </div>
  296.               <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
  297.                 <div class="card-body p-2">
  298.                   <div class="entrega inf">
  299.                     <div class="cont-info">
  300.                       <p class="sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
  301.                       <h6 class="bold pt-4">Precio y tiempos de entrega para productos inferiores a
  302.                         $300.000
  303.                       </h6>
  304.                       <table class="w-100">
  305.                         <tbody>
  306.                           <tr>
  307.                             <td class="ciudad"><p class="sm">Bogotá</p></td>
  308.                             <td class="tiempo"><p class="sm">6 días hab</p></td>
  309.                             <td class="valor"><p class="sm">$10.000</p></td>
  310.                           </tr>
  311.                           <tr>
  312.                             <td class="ciudad"><p class="sm">Medellín</p></td>
  313.                             <td class="tiempo"><p class="sm">6 días hab</p></td>
  314.                             <td class="valor"><p class="sm">$10.000</p></td>
  315.                           </tr>
  316.                           <tr>
  317.                             <td class="ciudad"><p class="sm">Cali</p></td>
  318.                             <td class="tiempo"><p class="sm">6 días hab</p></td>
  319.                             <td class="valor"><p class="sm">$10.000</p></td>
  320.                           </tr>
  321.                           <tr>
  322.                             <td class="ciudad"><p class="sm">Barranquilla</p></td>
  323.                             <td class="tiempo"><p class="sm">6 días hab</p></td>
  324.                             <td class="valor"><p class="sm">$10.000</p></td>
  325.                           </tr>
  326.                           <tr>
  327.                             <td class="ciudad"><p class="sm">Bucaramanga</p></td>
  328.                             <td class="tiempo"><p class="sm">6 días hab</p></td>
  329.                             <td class="valor"><p class="sm">$10.000</p></td>
  330.                           </tr>
  331.                         </tbody>
  332.                       </table>
  333.                     </div>
  334.                   </div>
  335.                 </div>
  336.               </div>
  337.             </div>
  338.             <div class="card">
  339.               <div class="card-header" id="headingFourth">
  340.                 <h2 class="mb-0">
  341.                   <button class="btn btn-block text-left collapsed color-gris1" type="button" data-toggle="collapse" data-target="#collapseFourth" aria-expanded="false" aria-controls="collapseFourth">
  342.                     Ficha técnica
  343.                   </button>
  344.                 </h2>
  345.               </div>
  346.               <div id="collapseFourth" class="collapse" aria-labelledby="headingFourth" data-parent="#accordionExample">
  347.                 <div class="card-body p-2">
  348.                   <div class="ficha inf">
  349.                     <div class="cont-info">
  350.                     {{ include('basic/fichatecnica.html.twig') }}
  351.                     </div>
  352.                   </div>
  353.                 </div>
  354.               </div>
  355.             </div>
  356.           </div>
  357.           </div>
  358.         </div>        
  359.       </div>
  360.     </div>
  361.   </div>
  362. </section>
  363. {# productos relacionados #}
  364. {% if relacionados|length > 0 %}
  366. <!-- <section class="my-5 text-center">
  367.   <div class="container">
  368.     <div class="swiper-container swiper-prueba">
  369.       <div class="swiper-wrapper">
  370.         {% for i in 1..20 %}
  371.           <div class="swiper-slide">
  372.             <div class="singular-control">
  373.               <p class="mb-0">Control {{i}}</p>
  374.             </div>
  375.           </div>
  376.         {% endfor %}
  377.       </div>
  378.       <div class="swiper-button-next" aria-disabled="false">
  379.         <img src="/img/SVG/right.svg"/>
  380.       </div>
  381.       <div class="swiper-button-prev" aria-disabled="false">
  382.         <img src="/img/SVG/left.svg"/>
  383.       </div>
  384.     </div>
  385.   </div>
  386. </section> -->
  388. <section class="complementarios">
  389.   <div class="container">
  390.     <div class="row">
  391.         <div class="col-sm-5">
  392.           <div class="container">
  393.               <h2 class="color-naranja mt-4">{{qi.texto('complementatucompra_titulo')|raw}}</h2>
  394.               <p class="color-gris1 mt-3">{{qi.texto('complementatucompra')|raw}}</p>
  395.           </div>
  396.         </div>
  397.         <div class="col-sm-7">
  398.           <div class="container">
  399.             <div class="swiper-container complementarios-rotador">
  400.               <div class="swiper-wrapper">
  401.                   {% for item in relacionados %}
  402.                     <div class="swiper-slide">
  403.                         <div class="item-complementario">
  404.                           <a class="img" href="{{ path('product', {id: item.plu, nombre: qi.slugify(item.nombre)}) }}">
  405.                             <img src="{{ item.imagen }}" alt="{{ item.alt }}">
  406.                           </a>                       
  407.                           <h4 class="medium">{{ item.nombre}}</h4>
  408.                           {% if item.medida %}
  409.                             <p class="mb-2 d-none d-xl-block">{{ item.medida}}</p>
  410.                           {% endif %}
  411.                           <p class="mb-2 d-none d-xl-block">{{ item.precio | number_format}}</p>                                 
  412.                           <button class="btn btn-naranja agregarcomplementario" data-id="{{ item.plu }}"><a href="#">Agregar</a></button>
  413.                         </div>
  414.                     </div>
  415.                   {% endfor %}
  416.                 </div>
  417.               </div>
  418.           </div>
  419.             <div class="swiper-button-next" aria-disabled="false">
  420.               <img src="/img/SVG/right.svg">
  421.             </div>
  422.             <div class="swiper-button-prev" aria-disabled="false">
  423.               <img src="/img/SVG/left.svg">
  424.             </div>
  425.             <div class="swiper-pagination"></div>
  426.           </div>
  427.         </div>
  428.     </div>
  429.   </div>
  430. </section>
  431. {% endif %}
  436. {# BENEFICIOS #}
  437. <section class="otros pt-5">
  438.   <div class="container">
  439.     <div class="w-100 d-flex justify-content-center">
  440.       <img class="relax-img" src="{{ principal_padre.imagen_beneficios }}" alt="">
  441.     </div>
  442.     <div class="row w-100">
  443.         {% for item in principal_padre.beneficios %}
  444.           <div class="col-sm-4">
  445.             <div>
  446.               <img src="{{ item.icono }}" alt="">
  447.             </div>
  448.             <div>
  449.               <h6 class="sm-bold color-negro">{{ item.nombre }}</h6>
  450.               <p class="sm">{{ item.resumen }}</p>
  451.             </div>
  452.           </div>
  453.         {% endfor %}
  454.     </div>
  455.   </div>
  456. </section>
  461. <!-- <div class="swiper-control-firmeza d-flex justify-content-between align-items-center px-2 px-md-0"> -->
  462. <div class="swiper-control-firmeza px-2 px-md-0">
  463.   <div class="swiper content-wrapper swiper-container">
  464.     <div class="swiper-wrapper justify-content-xl-center">
  465.       {% for subcat in subcategorias %}
  466.         {% if subcat.descripcion %}
  467.           {% if vieneconsubcategoria != null %}
  468.           <div class="swiper-slide px-5 px-md-0 {% if subcat.id == idsub %} swiper-slide-active {% endif %} {% if loop.index == 2 %} swiper-slide-next {% endif %}" style="width: 398px;">
  469.             <div class="opcion opciones px-2 px-md-3 px-lg-2 py-3 py-md-4 d-flex justify-content-center align-items-center {% if subcat.id == idsub %}active{% endif %}" data-id="{{subcat.id}}">
  470.           {% else %}
  471.           <div  class="swiper-slide px-5 px-md-0 {% if loop.index == 1 %} swiper-slide-active {% endif %} {% if loop.index == 2 %} swiper-slide-next {% endif %}" style="width: 398px;">
  472.             <div class="opcion opciones px-2 px-md-3 px-lg-2 py-3 py-md-4 d-flex justify-content-center align-items-center {% if loop.index == 1 %} active {% endif %}" data-id="{{subcat.id}}">
  473.           {% endif %}
  474.                 <img class="icon mr-3 mr-md-2 mr-lg-3" src="{{subcat.icono_blanco}}" alt="">
  475.                 <h4 class="mb-0">{{subcat.nombre}}</h4>
  476.             </div>
  477.           </div>
  478.         {% endif %}
  479.       {% endfor %}
  480.     </div>
  481.     <div class="swiper-button-prev d-xl-none" aria-disabled="false">
  482.       <img src="/img/SVG/left.svg">
  483.     </div>         
  484.     <div class="swiper-button-next d-xl-none" aria-disabled="false">
  485.       <img src="/img/SVG/right.svg">
  486.     </div>
  487.     <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>                   
  488.   </div>
  489. </div>
  492. <div class="container">    
  493.   <div class="secciones mt-4">
  494.     {% for subcat in subcategorias %}
  495.       {% if subcat.descripcion %}          
  496.           <div class="opciones-container" id="sub_{{subcat.id}}">
  497.             <div class="container">
  498.               <div class="row">
  499.                 <div class="col-12 col-lg-5 info-opciones">
  500.                   <div class="container pt-xl-5">
  501.                     <h1 class="color-negro">{{subcat.nombre}}</h1>
  502.                     {{subcat.descripcion|raw}}
  503.                     <div class="d-flex align-items-center mt-5">
  504.                       {% if subcat.avatar == 1 %}
  505.                       <a href="https://colchonperfecto.romancerelax.com/">
  506.                         <button class="btn btn-naranja mr-2">Pruébalo en Avatar.</button>
  507.                       </a>
  508.                       {% endif %}
  509.                       <a href="{{ path('subcategoria_slug', {subcategoria: subcat.slug, categoria_slug: slugcat }) }}">
  510.                         <button class="btn btn-naranja">Ver productos</button>
  511.                       </a>
  512.                     </div>
  513.                   </div>
  514.                 </div>
  515.                 {% if subcat.idyoutube %}
  516.                   <div class="col-12 col-lg-7 img-opciones mt-5"><iframe width="560" height="315" src="https://www.youtube.com/embed/{{subcat.idyoutube}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  517.                 {% else %}
  518.                   <div class="col-12 col-lg-7 img-opciones mt-5" style="background-image: url('{{subcat.imagen}}');"></div>
  519.                 {% endif %}
  521.               </div>
  522.             </div>
  523.           </div>
  524.       {% endif %}      
  525.     {% endfor %}                
  526.   </div>
  527. </div>
  529. {# video #}
  530. {% if principal_padre.video %}
  531.     <section class="py-4">
  532.         <div class="container">
  533.             <iframe src="https://www.youtube.com/embed/{{ qi.getIdVideoYt(principal_padre.video) }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  534.         </div>
  535.     </section>
  536. {% endif %}
  538. {# banner de tipos de tecnologia en colchones #}
  539. <section class="colchon-partes">
  540.   {% if principal_padre.detalles or  principal_padre.imagen_puntos or principal_padre.gif_puntos or principal_padre.imagen_puntos %}
  541.   <div class="container piezas py-5">
  542.       {% if principal_padre.detalles %}
  543.       <h2 class="text-center color-blanco">Tecnología</h2>
  544.       <p class="color-blanco texto">{{principal_padre.detalles|raw}}</p>
  545.       {% endif %}
  546.       <div class="cont_int" style="position: relative;display: inline-block">
  547.       <img class="img-ppal" id="img_inter" src="{{ principal_padre.imagen_puntos }}" data-gif="{{ principal_padre.gif_puntos }}" data-ini="{{ principal_padre.imagen_puntos }}" alt="" style="width: 100%">
  548.       {% for item in principal_padre.puntos %}
  549.         <a class="bubble" style="display:none;bottom: {{ (100 - item.y*100) }}%; left: {{ (item.x*100) }}%;" href="#" data-toggle="tooltip" data-placement="{{ item.direccion }}"  title="
  550.         <div>
  551.         <h6 class='bold color-azul'>{{ item.titulo }}</h6>
  552.         <p class='color-blanco'>{{ item.resumen}}</p>
  553.         </div>">
  554.           <div><img src="/img/{{ item.numero }}-12.png" alt=""></div>
  555.         </a>
  556.       {% endfor %}
  557.     </div>
  558.   </div>
  559.   {% endif %}
  560. </section>
  562. {% if principal_padre.calidad or principal_padre.responsabilidad or principal_padre.tecnologia %}
  563.   <section class="rotador">
  564.     <div class="container d-flex justify-content-between align-items-center">
  565.         <div class="swiper-button-prev">
  566.           <img src="/img/SVG/left.svg"/>
  567.         </div>
  568.         <div class="swiper-container slider-temas">
  569.           <div class="swiper-wrapper">
  571.             {% if principal_padre.calidad %}
  572.             <div class="swiper-slide">
  573.               <div class="container">
  574.                 <div class="row">
  575.                 <div class="col-sm-6 img-box" style="background-image: url('{{principal_padre.imgcalidad}}');">&nbsp;</div>
  576.                   <div class="col-sm-6 bg-rosa-palo">
  577.                     <div class="pt-3">
  578.                       <h2 class="color-negro">{{ principal_padre.calidad | raw }}</h2>
  579.                     </div>  
  580.                   </div>
  581.                 </div>
  582.               </div>
  583.             </div>
  584.             {% endif %}
  585.             {% if principal_padre.responsabilidad %}
  586.             <div class="swiper-slide">
  587.               <div class="container">
  588.                 <div class="row">
  589.                 <div class="col-sm-6 img-box" style="background-image: url('{{principal_padre.imgresponsabilidad}}');">&nbsp;</div>
  590.                   <div class="col-sm-6 bg-rosa-palo">
  591.                     <div class="pt-3">
  592.                       <h2 class="color-negro">{{ principal_padre.responsabilidad | raw }}</h2>
  593.                     </div>  
  594.                   </div>                
  595.                 </div>
  596.               </div>
  597.             </div>
  598.             {% endif %}
  599.             {% if principal_padre.tecnologia %}
  600.             <div class="swiper-slide">
  601.               <div class="container">
  602.                 <div class="row">
  603.                 <div class="col-sm-6 img-box" style="background-image: url('{{principal_padre.imgtecnologia}}');">&nbsp;</div>
  604.                   <div class="col-sm-6 bg-rosa-palo">
  605.                     <div class="pt-3">
  606.                       <h2 class="color-negro">{{ principal_padre.tecnologia | raw }}</h2>
  607.                     </div>  
  608.                   </div>                                 
  609.                 </div>
  610.               </div>
  611.             </div>
  612.             {% endif %}
  613.           </div>
  614.         </div>
  615.         <div class="swiper-button-next">
  616.           <img src="/img/SVG/right.svg"/>
  617.         </div>
  618.     </div>
  619.   </section>
  620. {% endif %}
  621. {# fin del banner de tipos de tecnologia en colchones #}
  624. {# banner de necesitas ayuda #}
  625. {{ include('basic/necesitas-ayuda.html.twig') }}
  628. {# para mostrar que producto agregado #}
  629. <div id="snackbar">Producto agregado</div>
  630.   <script type="text/javascript">
  631.       function preloadImage(url)
  632.       {
  633.           var img=new Image();
  634.           img.src=url;
  635.       }
  636.       preloadImage('{{ principal_padre.gif_puntos }}')
  637.   </script>
  638. {% endblock %}
  639. {% block javascripts %}
  641. {# codigo js #}
  642. <script>
  643.   $('.icon-fav').removeClass('active');
  644.   {% if app.user %}
  645.     {% for item in  qi.getFavoritoUser(app.user) %}
  646.       $('#fav_prod{{ item.plu }}').addClass('active');
  647.     {% endfor %}
  648.   {% endif %}
  650.   $(document).ready(function (){
  651.     {# gtag('event', 'view_item', {
  652.         "items": [
  653.             {
  654.                 "id": "{{ principal_padre.plu }}",
  655.                 "name": "{{ principal_padre.nombre }}",
  656.                 "price": "{{ principal_padre.precio }}"
  657.             }
  658.         ]
  659.     }); #}
  660.     {% if vieneconsubcategoria != null %}
  661.       $('.opciones-container').hide();
  662.       $('#sub_{{ idsub }}').fadeIn();
  663.     {% endif %}
  664.   })
  667. </script>
  669. {% endblock %}