templates/producto.html.twig line 1

Open in your IDE?
  1. {% extends 'base/base.html.twig' %}
  2. {% block stylesheets %}
  3. <style>
  4. .slick-dots{
  5.     display: none !important;
  6. }
  7. .descrip{
  8.     overflow-x:auto;    
  9. }
  10. @media screen and (max-width:576px){
  11.     .descrip{
  12.         padding-left: 30px !important;        
  13.     }
  14. }
  15. </style>
  16. {% endblock %}
  17. {% block body %}
  18. {% include 'base/header.html.twig' %}
  19. <div class="banner-wrapper no_background">
  20.     <div class="banner-wrapper-inner">
  21.         <nav class="kreen-breadcrumb"><a href="{{path('index')}}">Home</a><i class="fa fa-angle-right"></i><a href="{{path('vinos')}}">Tienda</a>
  22.             <i class="fa fa-angle-right"></i>{{product.name}}
  23.         </nav>
  24.     </div>
  25. </div>
  26. <div class="single-thumb-vertical main-container shop-page no-sidebar">
  27.     <div class="container">
  28.         <div class="row">
  29.             <div class="main-content col-md-12">
  30.                 <div class="kreen-notices-wrapper"></div>
  31.                 <div id="product-27"
  32.                      class="post-27 product type-product status-publish has-post-thumbnail product_cat-table product_cat-new-arrivals product_cat-lamp product_tag-table product_tag-sock first instock shipping-taxable purchasable product-type-variable has-default-attributes">
  33.                     <div class="main-contain-summary row" >
  34.                         <div class="contain-left has-gallery ">
  35.                             <div class="single-left ">
  36.                                 <div class="kreen-product-gallery kreen-product-gallery--with-images kreen-product-gallery--columns-4 images">
  37.                                     {#<a href="#" class="kreen-product-gallery__trigger">
  38.                                         <img draggable="false" class="emoji" alt="🔍"
  39.                                              src="https://s.w.org/images/core/emoji/11/svg/1f50d.svg"></a>#}
  40.                                     <div class="flex-viewport">
  41.                                         <figure class="kreen-product-gallery__wrapper">
  42.                                             {% for image in product.images %}
  43.                                                 <div class="kreen-product-gallery__image">
  44.                                                     <img alt="img"
  45.                                                         src="{{image.url}}">
  46.                                                 </div>
  47.                                             {% endfor %}
  48.                                         </figure>
  49.                                     </div>
  50.                                     <ol class="flex-control-nav flex-control-thumbs">
  51.                                         {% for image in product.images %}
  52.                                             <li>
  53.                                                 <img src="{{image.url}}" alt="img">
  54.                                             </li>
  55.                                         {% endfor %}
  56.                                         
  57.                                     </ol>
  58.                                 </div>
  59.                             </div>
  60.                             <div class="summary entry-summary ">
  61.                                 <div class="flash">
  62.                                     <span class="onnew"><span class="text">New</span></span></div>
  63.                                 <h1 class="product_title entry-title">{{product.name}}</h1>
  64.                                 <p class="price" id="price"><span class="kreen-Price-amount amount"><span
  65.                                         class="kreen-Price-currencySymbol">$</span>{{product.price|number_format(0,',', '.')}}</span></p>
  66.                                 <h1 style="font-size: 15px;" class="MejMedium"><strong>
  67.                                     Venta Exclusiva para Chile
  68.                                 </strong></h1>
  69.                                  
  70.                                 
  71.                                
  72.                                 <h1 style="font-size: 15px;">
  73.                                     <strong class="MejMedium">
  74.                                         Ficha Tecnica: 
  75.                                     </strong>
  76.                                     {% if product.id == 628 %}
  77.                                     {# Amancaya 2019 #}
  78.                                         <a href="{{asset('Fichastecnicas/Amancaya2019.pdf')}}" class="MejMedium" target="_blank">Amancaya 2019</a>     
  79.                                     {% elseif product.id == 627 %}
  80.                                     {# Aruma 2021 #}
  81.                                         <a href="{{asset('Fichastecnicas/Aruma2021.pdf')}}" class="MejMedium" target="_blank">Aruma 2021</a>  
  82.                                     {% elseif product.id == 625 %}
  83.                                     {# Caro 2018 #}
  84.                                         <a href="{{asset('Fichastecnicas/Caro2018.pdf')}}" class="MejMedium" target="_blank">Caro 2018</a>  
  85.                                     {% elseif product.id == 615 %}
  86.                                     {# Chardonnay 2021 Los Vascos #}
  87.                                         <a href="{{asset('Fichastecnicas/CHA21.pdf')}}" class="MejMedium" target="_blank">Chardonnay 2021 Los Vascos</a>  
  88.                                     {% elseif product.id == 629 %}
  89.                                     {# Cromas Carmenere Gran Reserva 2020 Los Vascos #}
  90.                                         <a href="{{asset('Fichastecnicas/CROMASCA20.pdf')}}" class="MejMedium" target="_blank">Cromas Carmenere Gran Reserva 2020 Los Vascos</a>  
  91.                                     {% elseif product.id == 612 %}
  92.                                     {# Cromas Cabernet Franc Gran Reserva 2019 Los Vascos #}
  93.                                         <a href="{{asset('Fichastecnicas/CROMASCF2019.pdf')}}" class="MejMedium" target="_blank">Cromas Cabernet Franc Gran Reserva 2019 Los Vascos</a> 
  94.                                     {% elseif product.id == 624 %}
  95.                                     {# Cromas Cabernet Sauvignon Gran Reserva 2018 Los Vascos #}
  96.                                         <a href="{{asset('Fichastecnicas/CROMASCS2018.pdf')}}" class="MejMedium" target="_blank">Cromas Cabernet Sauvignon Gran Reserva 2018 Los Vascos</a>
  97.                                     {% elseif product.id == 614 %}
  98.                                     {# Cromas Syrah Gran Reserva 2019 Los Vascos #}
  99.                                         <a href="{{asset('Fichastecnicas/CROMASSYRAH2019.pdf')}}" class="MejMedium" target="_blank">Cromas Syrah Gran Reserva 2019 Los Vascos</a>
  100.                                     {% elseif product.id == 616 %}
  101.                                     {# Cabernet Sauvignon 2019 Los Vascos #}
  102.                                         <a href="{{asset('Fichastecnicas/CS2019.pdf')}}" class="MejMedium" target="_blank">Cabernet Sauvignon 2019 Los Vascos</a>
  103.                                     {% elseif product.id == 547 %}
  104.                                     {# LeDix #}
  105.                                         <a href="{{asset('Fichastecnicas/LeDix17.pdf')}}" class="MejMedium" target="_blank">Le Dix 2017</a>        
  106.                                     {% elseif product.id == 617 %}
  107.                                     {# Rosé 2022 Los Vascos #}
  108.                                         <a href="{{asset('Fichastecnicas/ROSE22.pdf')}}" class="MejMedium" target="_blank">Rosé 2022 Los Vascos</a> 
  109.                                     {% elseif product.id == 618 %}
  110.                                     {# Sauvignon Blanc 2021 Los Vascos #}
  111.                                         <a href="{{asset('Fichastecnicas/SB21.pdf')}}" class="MejMedium" target="_blank">Sauvignon Blanc 2021 Los Vascos</a> 
  112.                                     {% endif %}
  113.                                 </h1>
  114.                                
  115.                                 <form action="{{path('addToCart')}}" method="POST" id="product-form">
  116.                                     <div class="single_variation_wrap">
  117.                                         <div class="kreen-variation single_variation">
  118.                                             {% for option in product.options %}
  119.                                             
  120.                                             <div class="col-lg-12 col-md-12 col-sm-12">
  121.                                                 <div class="form-group">
  122.                                                     <label>{{option.name}}</label>
  123.                                                     <select class="form-control product-option"  name="option_{{loop.index}}" id="option_{{loop.index}}">
  124.                                                         {% for value in option.values %}
  125.                                                             <option value="{{value.name}}">{{value.name}}</option>
  126.                                                         {% endfor %}
  127.                                                     </select>
  128.                                                 </div>
  129.                                             </div>
  130.                                         {% endfor %}
  131.                                         </div>
  132.                                         <div class="kreen-variation-add-to-cart variations_button">
  133.                                             <div class="quantity" style="margin-top: 15px !important;">
  134.                                                 <span class="qty-label">Quantiy:</span>
  135.                                                 <div class="control">
  136.                                                     <a class="btn-number qtyminus quantity-minus" href="#" >-</a>
  137.                                                     <input type="number"  data-step="1" oninput="this.value = Math.round(this.value);" data-max="{{product.stock}}" min="0"  name="quantity" id="quantity" value="0" title="Qty" class="input-qty input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" >
  138.                                                     <a class="btn-number qtyplus quantity-plus" href="#" >+</a>
  139.                                                 </div>                                                
  140.                                             </div>
  141.                                             <div class="kreen-variation-add-to-cart variations_button" id="disponibilidad" align="left">
  142.                                                 <span style=" color: #B56150;"> Disponibles: {{product.variants[0].stock}}</span>
  143.                                             </div><br>
  144.                                             {% if product.status == true %}
  145.                                             <button type="submit" id="send" class="button-cart">
  146.                                                     Comprar
  147.                                             </button>
  148.                                             {% else %}
  149.                                                 <span >No Disponible</span>
  150.                                             {% endif %}
  151.                                             <input type="hidden" name="variant_id" value="{{product.variants[0].id}}" id="variantId">
  152.                                         </div>
  153.                                     </div>
  154.                                 </form>                                
  155.                             </div>          
  156.                                               
  157.                         </div>
  158.                     </div>
  159.                    
  160.                 </div>
  161.                 {% if product.description is defined %}                                            
  162.                     <div class="row"
  163.                         id="tab-description" role="tabpanel" aria-labelledby="tab-title-description">
  164.                         <div class="col-md-12 col-12 descrip MejMedium"  style="word-wrap: break-word ;">
  165.                                 {{product.description|raw}}
  166.                         </div>
  167.                     </div>
  168.                 {% endif %}
  169.             </div>
  170.             <div class="col-md-12 col-sm-12 dreaming_related-product">
  171.                 <div class="block-title">
  172.                     <h2 class="product-grid-title">
  173.                         <span>Productos Relacionados</span>
  174.                     </h2>
  175.                 </div>
  176.                 <div class="owl-slick owl-products equal-container better-height"
  177.                      data-slick="{&quot;arrows&quot;:false,&quot;slidesMargin&quot;:30,&quot;dots&quot;:true,&quot;infinite&quot;:false,&quot;slidesToShow&quot;:4}"
  178.                      data-responsive="[{"breakpoint":480,"settings":{"slidesToShow":2,"slidesMargin":"10"}},{"breakpoint":768,"settings":{"slidesToShow":2,"slidesMargin":"10"}},{"breakpoint":992,"settings":{"slidesToShow":3,"slidesMargin":"20"}},{"breakpoint":1200,"settings":{"slidesToShow":3,"slidesMargin":"20"}},{"breakpoint":1500,"settings":{"slidesToShow":3,"slidesMargin":"30"}}]">
  179.                     
  180.                     {% for item in products|slice(0,4) %} 
  181.                         {% if product.id != item.id %}
  182.                         
  183.                             <div class="product-item style-01 post-27 product type-product status-publish has-post-thumbnail product_cat-table product_cat-new-arrivals product_cat-lamp product_tag-table product_tag-sock  instock shipping-taxable purchasable product-type-variable has-default-attributes ">
  184.                                 <div class="product-inner tooltip-left">
  185.                                     <div class="product-thumb">
  186.                                         <a class="thumb-link"
  187.                                         href="{{path('producto',{'slug':item.slug,'tag': product.tags})}}" tabindex="0">
  188.                                             <img class="img-responsive"
  189.                                                 src="{{item.img}}"
  190.                                                 alt="Sweet Orange">
  191.                                         </a>
  192.                                     </div>
  193.                                     <div class="product-info equal-elem">
  194.                                         <h3 class="product-name product_title">
  195.                                             <a href="{{path('producto',{'slug':item.slug,'tag': product.tags})}}"
  196.                                             tabindex="0">{{item.name}}</a>
  197.                                         </h3>
  198.                                         <div class="rating-wapper nostar">
  199.                                         
  200.                                             <span class="review">(0)</span></div>
  201.                                         <span class="price"><span class="kreen-Price-amount amount"><span
  202.                                                 class="kreen-Price-currencySymbol">$</span>{{item.price|number_format(0,',', '.')}}</span></span>
  203.                                     </div>
  204.                                 </div>
  205.                             </div>
  206.                         {% endif %}
  207.                     {% endfor %}
  208.                     
  209.                 </div>
  210.                 <div class="modal" id="modal" tabindex="-1" role="dialog">
  211.                     <div class="modal-dialog" role="document">
  212.                         <div class="modal-content">
  213.                         <div class="modal-header">                           
  214.                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  215.                             <span aria-hidden="true">&times;</span>
  216.                             </button>
  217.                         </div>
  218.                         <div class="modal-body">
  219.                             <p style="font-size: 20px; color: black; text-align: center;" >Debes seleccionar la cantidad.</p>
  220.                         </div>
  221.                         <div class="modal-footer">
  222.                             
  223.                             <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
  224.                         </div>
  225.                         </div>
  226.                     </div>
  227.                 </div>
  228.             </div>
  229.             
  230.         </div>
  231.     </div>
  232. </div>
  233. {% include 'base/footer.html.twig' %}
  234. {% endblock %}
  235. {% block javascripts %}
  236. <script>
  237.     $( document ).ready(function() {
  238.     checkProductVariant();
  239.     $('#modal').modal('hide');
  240.       $( "#product-form" ).submit(function( event ) {
  241.         if($('#quantity').val()<=0){
  242.             $('#modal').modal('show');              
  243.             return false;
  244.         }
  245.         var r = [];
  246.         $('.product-option').each(function(k, v) {
  247.           r.push($(this).val());
  248.         });
  249.         if((new Set(r)).size !== r.length){
  250.           //alert("Debes seleccionar diferentes opciones para cada categoria");
  251.           Swal.fire(
  252.               '',
  253.               'La caja debe contener tres vinos distintos. Por favor revisa tu selección',
  254.               'error'
  255.           );
  256.           return false;
  257.         }
  258.         $(this).append('<input type="hidden" name="product_id" value="'+"{{product.id}}"+'" /> ');
  259.         //$(this).append('<input type="hidden" name="variant_id" value="'+"{{product.variants[0].id}}"+'" /> ');
  260.         $(this).append('<input type="hidden" name="quantity_products" value="'+$('#quantity').val()+'" /> ');  
  261.         return true;
  262.       });
  263.         $("#quantity").change(function(){checkProductVariant()});
  264.         $(".product-option").change(function(){checkProductVariant()});
  265.         function checkProductVariant(){
  266.             var variantName ="";
  267.             var productId= "{{product.id}}";
  268.             
  269.             $(".product-option").each(function(){
  270.             if (variantName != '') {
  271.                 variantName = variantName +'/'+$(this).val();
  272.             }else{
  273.                 variantName = $(this).val();
  274.             }
  275.             });
  276.     
  277.             //$("#title").val(variantName);
  278.             var parametros = {
  279.             "variantName": variantName,
  280.             "productId" : productId
  281.             };
  282.     
  283.             $.ajax({
  284.                 type: 'GET',
  285.                 url: '{{path('checkProductVariant')}}',
  286.                 data: parametros,
  287.                 dataType: "json",
  288.                 beforeSend: function(){
  289.                     $("#send").attr("disabled", true);
  290.                     $("#send").attr("value", 'Cargando...');
  291.                 },
  292.                 success: function(response){
  293.                     var formatter = new Intl.NumberFormat('es-Cl', {
  294.                     style: 'currency',
  295.                     currency: 'CLP',
  296.         
  297.                     // These options are needed to round to whole numbers if that's what you want.
  298.                     minimumFractionDigits: 0,
  299.                     maximumFractionDigits: 0,
  300.                     });
  301.                     var cantidad =  $('#quantity').val();
  302.                     $("#variantId").val(response.id);
  303.                     $('#disponibilidad').empty();
  304.                     if(response.stock >= cantidad){
  305.                         document.getElementById("quantity").max = response.stock;
  306.                         $('#disponibilidad').append('<span style=" color: #B56150;"> Disponibilidad:  '+response.stock+'</span>');
  307.                         $("#send").show();
  308.                     }else{
  309.                         $('#disponibilidad').append('<span style=" color: red;">La cantidad supera la disponibilidad actual de productos</span>');
  310.                         $("#send").hide();
  311.                     }
  312.                 
  313.                     
  314.                     document.getElementById("price").innerHTML = formatter.format(response.price);
  315.                     $("#send").attr("disabled", false);
  316.                     $("#send").attr("value", 'Agregar al Carrito');
  317.                 }
  318.             });
  319.         }
  320.   
  321.     
  322.     });
  323.     function numberWithCommas(x) {
  324.       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  325.     } 
  326.   
  327.     $('#guestNo').on('keydown keyup change', function(e){
  328.   
  329.       if(e.keyCode == 38 || e.keyCode == 40){
  330.         e.preventDefault();
  331.       }
  332.   
  333.     }); 
  334.   </script>
  335. {% endblock %}