{% extends 'base/base.html.twig' %}
{% block stylesheets %}
<style>
.slick-dots{
display: none !important;
}
.descrip{
overflow-x:auto;
}
@media screen and (max-width:576px){
.descrip{
padding-left: 30px !important;
}
}
</style>
{% endblock %}
{% block body %}
{% include 'base/header.html.twig' %}
<div class="banner-wrapper no_background">
<div class="banner-wrapper-inner">
<nav class="kreen-breadcrumb"><a href="{{path('index')}}">Home</a><i class="fa fa-angle-right"></i><a href="{{path('vinos')}}">Tienda</a>
<i class="fa fa-angle-right"></i>{{product.name}}
</nav>
</div>
</div>
<div class="single-thumb-vertical main-container shop-page no-sidebar">
<div class="container">
<div class="row">
<div class="main-content col-md-12">
<div class="kreen-notices-wrapper"></div>
<div id="product-27"
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">
<div class="main-contain-summary row" >
<div class="contain-left has-gallery ">
<div class="single-left ">
<div class="kreen-product-gallery kreen-product-gallery--with-images kreen-product-gallery--columns-4 images">
{#<a href="#" class="kreen-product-gallery__trigger">
<img draggable="false" class="emoji" alt="🔍"
src="https://s.w.org/images/core/emoji/11/svg/1f50d.svg"></a>#}
<div class="flex-viewport">
<figure class="kreen-product-gallery__wrapper">
{% for image in product.images %}
<div class="kreen-product-gallery__image">
<img alt="img"
src="{{image.url}}">
</div>
{% endfor %}
</figure>
</div>
<ol class="flex-control-nav flex-control-thumbs">
{% for image in product.images %}
<li>
<img src="{{image.url}}" alt="img">
</li>
{% endfor %}
</ol>
</div>
</div>
<div class="summary entry-summary ">
<div class="flash">
<span class="onnew"><span class="text">New</span></span></div>
<h1 class="product_title entry-title">{{product.name}}</h1>
<p class="price" id="price"><span class="kreen-Price-amount amount"><span
class="kreen-Price-currencySymbol">$</span>{{product.price|number_format(0,',', '.')}}</span></p>
<h1 style="font-size: 15px;" class="MejMedium"><strong>
Venta Exclusiva para Chile
</strong></h1>
<h1 style="font-size: 15px;">
<strong class="MejMedium">
Ficha Tecnica:
</strong>
{% if product.id == 628 %}
{# Amancaya 2019 #}
<a href="{{asset('Fichastecnicas/Amancaya2019.pdf')}}" class="MejMedium" target="_blank">Amancaya 2019</a>
{% elseif product.id == 627 %}
{# Aruma 2021 #}
<a href="{{asset('Fichastecnicas/Aruma2021.pdf')}}" class="MejMedium" target="_blank">Aruma 2021</a>
{% elseif product.id == 625 %}
{# Caro 2018 #}
<a href="{{asset('Fichastecnicas/Caro2018.pdf')}}" class="MejMedium" target="_blank">Caro 2018</a>
{% elseif product.id == 615 %}
{# Chardonnay 2021 Los Vascos #}
<a href="{{asset('Fichastecnicas/CHA21.pdf')}}" class="MejMedium" target="_blank">Chardonnay 2021 Los Vascos</a>
{% elseif product.id == 629 %}
{# Cromas Carmenere Gran Reserva 2020 Los Vascos #}
<a href="{{asset('Fichastecnicas/CROMASCA20.pdf')}}" class="MejMedium" target="_blank">Cromas Carmenere Gran Reserva 2020 Los Vascos</a>
{% elseif product.id == 612 %}
{# Cromas Cabernet Franc Gran Reserva 2019 Los Vascos #}
<a href="{{asset('Fichastecnicas/CROMASCF2019.pdf')}}" class="MejMedium" target="_blank">Cromas Cabernet Franc Gran Reserva 2019 Los Vascos</a>
{% elseif product.id == 624 %}
{# Cromas Cabernet Sauvignon Gran Reserva 2018 Los Vascos #}
<a href="{{asset('Fichastecnicas/CROMASCS2018.pdf')}}" class="MejMedium" target="_blank">Cromas Cabernet Sauvignon Gran Reserva 2018 Los Vascos</a>
{% elseif product.id == 614 %}
{# Cromas Syrah Gran Reserva 2019 Los Vascos #}
<a href="{{asset('Fichastecnicas/CROMASSYRAH2019.pdf')}}" class="MejMedium" target="_blank">Cromas Syrah Gran Reserva 2019 Los Vascos</a>
{% elseif product.id == 616 %}
{# Cabernet Sauvignon 2019 Los Vascos #}
<a href="{{asset('Fichastecnicas/CS2019.pdf')}}" class="MejMedium" target="_blank">Cabernet Sauvignon 2019 Los Vascos</a>
{% elseif product.id == 547 %}
{# LeDix #}
<a href="{{asset('Fichastecnicas/LeDix17.pdf')}}" class="MejMedium" target="_blank">Le Dix 2017</a>
{% elseif product.id == 617 %}
{# Rosé 2022 Los Vascos #}
<a href="{{asset('Fichastecnicas/ROSE22.pdf')}}" class="MejMedium" target="_blank">Rosé 2022 Los Vascos</a>
{% elseif product.id == 618 %}
{# Sauvignon Blanc 2021 Los Vascos #}
<a href="{{asset('Fichastecnicas/SB21.pdf')}}" class="MejMedium" target="_blank">Sauvignon Blanc 2021 Los Vascos</a>
{% endif %}
</h1>
<form action="{{path('addToCart')}}" method="POST" id="product-form">
<div class="single_variation_wrap">
<div class="kreen-variation single_variation">
{% for option in product.options %}
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="form-group">
<label>{{option.name}}</label>
<select class="form-control product-option" name="option_{{loop.index}}" id="option_{{loop.index}}">
{% for value in option.values %}
<option value="{{value.name}}">{{value.name}}</option>
{% endfor %}
</select>
</div>
</div>
{% endfor %}
</div>
<div class="kreen-variation-add-to-cart variations_button">
<div class="quantity" style="margin-top: 15px !important;">
<span class="qty-label">Quantiy:</span>
<div class="control">
<a class="btn-number qtyminus quantity-minus" href="#" >-</a>
<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" >
<a class="btn-number qtyplus quantity-plus" href="#" >+</a>
</div>
</div>
<div class="kreen-variation-add-to-cart variations_button" id="disponibilidad" align="left">
<span style=" color: #B56150;"> Disponibles: {{product.variants[0].stock}}</span>
</div><br>
{% if product.status == true %}
<button type="submit" id="send" class="button-cart">
Comprar
</button>
{% else %}
<span >No Disponible</span>
{% endif %}
<input type="hidden" name="variant_id" value="{{product.variants[0].id}}" id="variantId">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% if product.description is defined %}
<div class="row"
id="tab-description" role="tabpanel" aria-labelledby="tab-title-description">
<div class="col-md-12 col-12 descrip MejMedium" style="word-wrap: break-word ;">
{{product.description|raw}}
</div>
</div>
{% endif %}
</div>
<div class="col-md-12 col-sm-12 dreaming_related-product">
<div class="block-title">
<h2 class="product-grid-title">
<span>Productos Relacionados</span>
</h2>
</div>
<div class="owl-slick owl-products equal-container better-height"
data-slick="{"arrows":false,"slidesMargin":30,"dots":true,"infinite":false,"slidesToShow":4}"
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"}}]">
{% for item in products|slice(0,4) %}
{% if product.id != item.id %}
<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 ">
<div class="product-inner tooltip-left">
<div class="product-thumb">
<a class="thumb-link"
href="{{path('producto',{'slug':item.slug,'tag': product.tags})}}" tabindex="0">
<img class="img-responsive"
src="{{item.img}}"
alt="Sweet Orange">
</a>
</div>
<div class="product-info equal-elem">
<h3 class="product-name product_title">
<a href="{{path('producto',{'slug':item.slug,'tag': product.tags})}}"
tabindex="0">{{item.name}}</a>
</h3>
<div class="rating-wapper nostar">
<span class="review">(0)</span></div>
<span class="price"><span class="kreen-Price-amount amount"><span
class="kreen-Price-currencySymbol">$</span>{{item.price|number_format(0,',', '.')}}</span></span>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="modal" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="font-size: 20px; color: black; text-align: center;" >Debes seleccionar la cantidad.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include 'base/footer.html.twig' %}
{% endblock %}
{% block javascripts %}
<script>
$( document ).ready(function() {
checkProductVariant();
$('#modal').modal('hide');
$( "#product-form" ).submit(function( event ) {
if($('#quantity').val()<=0){
$('#modal').modal('show');
return false;
}
var r = [];
$('.product-option').each(function(k, v) {
r.push($(this).val());
});
if((new Set(r)).size !== r.length){
//alert("Debes seleccionar diferentes opciones para cada categoria");
Swal.fire(
'',
'La caja debe contener tres vinos distintos. Por favor revisa tu selección',
'error'
);
return false;
}
$(this).append('<input type="hidden" name="product_id" value="'+"{{product.id}}"+'" /> ');
//$(this).append('<input type="hidden" name="variant_id" value="'+"{{product.variants[0].id}}"+'" /> ');
$(this).append('<input type="hidden" name="quantity_products" value="'+$('#quantity').val()+'" /> ');
return true;
});
$("#quantity").change(function(){checkProductVariant()});
$(".product-option").change(function(){checkProductVariant()});
function checkProductVariant(){
var variantName ="";
var productId= "{{product.id}}";
$(".product-option").each(function(){
if (variantName != '') {
variantName = variantName +'/'+$(this).val();
}else{
variantName = $(this).val();
}
});
//$("#title").val(variantName);
var parametros = {
"variantName": variantName,
"productId" : productId
};
$.ajax({
type: 'GET',
url: '{{path('checkProductVariant')}}',
data: parametros,
dataType: "json",
beforeSend: function(){
$("#send").attr("disabled", true);
$("#send").attr("value", 'Cargando...');
},
success: function(response){
var formatter = new Intl.NumberFormat('es-Cl', {
style: 'currency',
currency: 'CLP',
// These options are needed to round to whole numbers if that's what you want.
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
var cantidad = $('#quantity').val();
$("#variantId").val(response.id);
$('#disponibilidad').empty();
if(response.stock >= cantidad){
document.getElementById("quantity").max = response.stock;
$('#disponibilidad').append('<span style=" color: #B56150;"> Disponibilidad: '+response.stock+'</span>');
$("#send").show();
}else{
$('#disponibilidad').append('<span style=" color: red;">La cantidad supera la disponibilidad actual de productos</span>');
$("#send").hide();
}
document.getElementById("price").innerHTML = formatter.format(response.price);
$("#send").attr("disabled", false);
$("#send").attr("value", 'Agregar al Carrito');
}
});
}
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$('#guestNo').on('keydown keyup change', function(e){
if(e.keyCode == 38 || e.keyCode == 40){
e.preventDefault();
}
});
</script>
{% endblock %}