{# @var product \AppBundle\Model\DefaultProduct #}
{# @var marca \AppBundle\Model\DefaultMarca #}
{% extends 'layout/layout.html.twig' %}
{% block CONTENT %}
{# Define authentication variable #}
{% set is_authenticated = is_granted('IS_AUTHENTICATED_FULLY') %}
{# Check if there is an error in the product #}
{% set haveProductErrors = app_product_haveError(product) %}
{% if haveProductErrors %}
{% set haveDiscount = false %}
{% else %}
{% if is_authenticated %}
{# START PRICE WITH DISCOUNT BLOCK #}
{% set defaultPriceWithDiscount = app_product_default_price_with_discount(product, userIdSage) %}
{% set haveDiscount = defaultPriceWithDiscount.original_price != defaultPriceWithDiscount.end_price and defaultPriceWithDiscount.error is null and defaultPriceWithDiscount.end_price is not null %}
{# END PRICE WITH DISCOUNT BLOCK #}
{% endif %}
{% endif %}
{% set data = app_product_generate_data(product) %}
{% set variants = data.variants %}
{# {% set tableAttributes = app_product_variants_attributes(data) %}#}
{% set SKU = false %}
{# {{ dump(app_product_unpublished_variants_check(product)) }}#}
{# Does it have variants?#}
{% if ( ( data.variants | length ) > 1 ) %}
{% set haveVariants = true %}
{% else %}
{% set haveVariants = false %}
{% set SKU = ( data.variants | first ) %}
{% set SKU = SKU.bsncode %}
{% endif %}
{% set productID = (data.variants | first).id %}
{% set defaultPrice = app_product_default_price(product) %}
{% set attributesRows = app_product_attributes_rows(product, data) %}
{% set typesRows = app_product_types_rows(product, data) %}
{% set documents = app_product_documents(product) %}
{% set link = product.getDetailUrl({'document': document, 'prefix':app.request.locale}) %}
{% set title = product.getName() %}
{% set empresa = pimcore_website_config('empresa') %}
{% set titlePostFix = empresa.getTitle() %}
{% do pimcore_head_title().set(title ~ ' :: ' ~ titlePostFix) %}
{% if product.getSeodescription is not empty %}
{% do pimcore_head_meta().appendName('description', product.getSeodescription()) %}
{% endif %}
{% do pimcore_head_link({rel: 'canonical', href: app.request.schemeAndHttpHost ~ link }) %}
<style>
.spacing{
padding-right: 10px;
}
</style>
<!--Breadcrumbs-->
{% set lang = app.request.getLocale() %}
<input type="hidden" class="lang" lang="{{ lang }}">
<div class="breadcrumbs-wrapper text-uppercase">
<div class="container">
<div class="breadcrumbs"><a href="{{navStartNode}}" title="{{ 'general.content.back_home_translations' |trans }}">{{ 'general.content.breadcrumbs_home_translations' |trans }}</a><span>|</span><span class="fw-bold">{{ 'product_detail.content.breadcrumbs_product_detail_translations' |trans }}</span></div>
</div>
</div>
<!--End Breadcrumbs-->
<!--Main Content-->
<div class="container">
<!--Product Content-->
<div class="product-single">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
{% set image = product.getFirstImageAsset() %}
<div class="product-details-img product-details-img-indaba product-horizontal-style clearfix mb-3 mb-md-0">
<div class="zoompro-wrap product-zoom-right product-zoom-right-indaba w-100 p-0">
{% if image is not null %}
<div class="zoompro-span img-father"><img class="img-product" id="zoompro" {# class="zoompro" #} src="{{ image.thumbnail('ProductImages') }}" data-zoom-image="" alt="product" /></div>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12 product-info-container">
<!-- Product Info -->
<div class="product-single__meta">
{% if product.getName is not empty %}
<h1 class="product-single__title">{{ product.getName }}</h1>
{% endif %}
<!-- Product Info -->
{% if is_authenticated %}
<div class="prInfoRow product-info mt-2 d-flex-wrap">
<p class="product-sku fs-6" style="display: {{ (haveVariants) ? 'none' : '' }};">SKU: <span class="variant-sku">{{ SKU}}</span></p>
</div>
{% endif %}
<!-- End Product Info -->
<!-- Product Price -->
{% if is_authenticated %}
<div class="product-single__price pb-1">
<p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
<span class="visually-hidden">Regular price</span>
<span class="product-price__sale--single">
{% set originalPrice = haveDiscount ? defaultPriceWithDiscount.original_price : defaultPrice %}
{% set endPrice = haveDiscount ? defaultPriceWithDiscount.end_price : defaultPrice %}
{% set discountAmount = defaultPriceWithDiscount.original_price - defaultPriceWithDiscount.end_price %}
{% set displayClass = haveDiscount ? '' : 'd-none' %}
{% set displayClassPercent = defaultPriceWithDiscount.discount != '.00' ? '': 'd-none' %}
<span class="product-price-old-price {{ displayClass }}">
{{ app_helper_price_format_spain(originalPrice) }}€
</span>
<span class="product-price__price product-price__sale">
{{ app_helper_price_format_spain(endPrice) }}€
</span>
<span class="discount-badge {{ displayClass }}">
<span class="devider me-2">|</span>
<span>{{ 'Descuento' | trans }}:</span>
<span class="product-single__save-amount">
<span class="money">{{ app_helper_price_format_spain(discountAmount) }}€</span>
</span>
<span class="off ms-1 percentage-span {{ displayClassPercent }}">(<span class="percentage">{{ defaultPriceWithDiscount.discount is not null ? app_helper_price_format_spain(defaultPriceWithDiscount.discount): '' }}</span>%)</span>
</span>
</span>
</div>
<!-- End Product Price -->
{% else %}
{# if product have propspeed brand hide price #}
{% if product.marca == 15663 %}
<div class="product-single__price pb-1">
<span class="visually-hidden"></span>
<span class="product-price__price product-price__sale"></span>
</div>
{% else %}
<div class="product-single__price pb-1">
<p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
<span class="visually-hidden">Regular price</span>
<span class="product-price__price product-price__sale">
{{ app_helper_price_format_spain(defaultPrice) }}€
</span>
</div>
{% endif %}
{% endif %}
</div>
<!-- End Product Info -->
{% set longDescription = product.getLongdescription() %}
{% set shortDescription = product.getShortdescription() %}
{% set description = shortDescription is not empty ? shortDescription : longDescription %}
<div class="product-single__description rte">
{% if description matches '/<[^>]+>/' %}
<div class="mb-2 fs-6">
{% for paragraph in description | split('</p>') %}
{% if paragraph | trim %}
{{ paragraph | trim | raw }}</p>
{% endif %}
{% endfor %}
</div>
{% else %}
<p class="mb-2 fs-6">{{ description | nl2br | raw }}</p>
{% endif %}
<ul class="checkmarkList">
{% if attributesRows | length > 0 or typesRows | length > 0 %}
<table class="table table-striped">
{% for row in attributesRows %}
{{ row | raw }}
{% endfor %}
{% for row in typesRows %}
{{ row | raw }}
{% endfor %}
</table>
{% endif %}
</ul>
</div>
<!-- Product Form -->
<form method="post" action="#" class="product-form form-bordered hidedropdown">
<!-- Product Action -->
<div class="product-action w-100 clearfix">
{% if is_authenticated %}
<div class="product-form__item--quantity d-flex-center mb-2">
<div class="qtyField d-none" id="{{ productID }}">
<a class="qtyBtn minus" href="javascript:void(0);"><i class="icon an an-minus-r" aria-hidden="true"></i></a>
<input type="text" name="quantity" value="1" class="product-form__input qty rounded-0">
<a class="qtyBtn plus" href="javascript:void(0);"><i class="icon an an-plus-r" aria-hidden="true"></i></a>
</div>
<div class="pro-stockLbl d-flex">
<span class=" stockLbl instock fs-6 d-none ms-3" title="Click para ver info"><i class="icon an an-check-cil"></i><span class="stockText">En stock <span class="items"></span></span></span>
<span class=" stockLbl outstock infostock fs-6 d-none ms-3" title="Click para ver info"><i class="icon an an-times-cil"></i>
<span>{{ 'product_detail.content.not_available' | trans }}</span>
</span>
<span class=" stockLbl preorder nostock infostock fs-6 d-none ms-3" title="Click para ver info"><i class="icon an an-clock-r"></i><span class="differenceText"> Pre-order Now</span></span>
<span><i class="an an-info-cil fa-beat icon-info infostock ms-1 d-none" style="color: #0a53be"></i></span>
<span class=" stockLbl preorder deliveryTime infostock fs-6 d-none ms-3" title="Click para ver info"><i class="icon an an-truck-l"></i><span class="deliveryTimeText">En Llegar</span></span>
</div>
</div>
<div class="pro-stockLbl info-stock-container">
<span class="stock-warehouse stock-animation mb-3 {{ haveVariants ? 'd-none':'' }}">{{'product.detail-stock_by_warehouse' | trans}}</span>
<div class="stock-info-container"></div>
</div>
{% endif %}
{% if haveVariants %}
<div class="product-form__item--submit">
<a href="#sizechart" class="sizelink link-underline text-uppercase ms-auto text-decoration-none">
<i class="icon an an-ruler d-none"></i>
<button id="btnTableVariants" type="submit" name="add" class="btn rounded btn-outline-primary product-form__cart-submit">
<span>{{ 'product_detail.content.variants_table_header_translations' |trans }}</span>
</button>
</a>
</div>
{% endif %}
<div class="product-form__item--buyit clearfix add-item-cart d-none" id="">
<button type="button" class="btn rounded proceed-to-checkout" id="addToCartBtn">
{% if lang == 'en' %}
<span>Add to Cart</span>
{% else %}
<span>Agregar al carrito</span>
{% endif %}
</button>
</div>
</div>
<!-- End Product Action -->
</form>
<!-- End Product Form -->
</div>
</div>
</div>
{# Product Bundle Button #}
{% if is_authenticated %}
<!-- Modal -->
<div class="modal fade" id="relatedProducts-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
{% set dataRelatedProducts = [] %}
{% set variantsRelatedProducts = [] %}
{% set showCapacityColumn = false %}
{% set showColorColumn = false %}
{% for relatedProduct in relatedProducts %}
{% set dataRelatedProducts = app_product_generate_data(relatedProduct) %}
{% set variantsRelatedProducts = variantsRelatedProducts|merge(dataRelatedProducts.variants) %}
{% if dataRelatedProducts.attributes['capacidad'] is defined and dataRelatedProducts.attributes['capacidad'].value is not empty %}
{% set showCapacityColumn = true %}
{% endif %}
{% if dataRelatedProducts.attributes['color'] is defined and dataRelatedProducts.attributes['color'].value is not empty %}
{% set showColorColumn = true %}
{% endif %}
{% endfor %}
{% if relatedProducts | length > 0 %}
<table class="table table-bordered border-primary product-related-table">
<thead>
<tr>
<th class="text-center align-middle">{{ 'nombre' | trans }}</th>
<th class="text-center align-middle">{{ 'imagen' | trans }}</th>
{% if showCapacityColumn %}
<th class="text-center align-middle">{{ 'capacidad' | trans }}</th>
{% endif %}
{% if showColorColumn %}
<th class="text-center align-middle">{{ 'Color' | trans }}</th>
{% endif %}
<th class="text-center align-middle">{{ 'importe' | trans }}</th>
<th class="text-center align-middle">{{ 'accion' | trans }}</th>
</tr>
</thead>
<tbody>
{% for variantRelatedProduct in variantsRelatedProducts %}
{% set imageVariant = variantRelatedProduct.getFirstImageAsset() %}
{% set endPrice = variantRelatedProduct.price %}
{% set variantAttributes = app_product_generate_data(variantRelatedProduct).attributes %}
<tr>
<td class="text-center align-middle">{{ variantRelatedProduct.name }}</td>
<td class="text-center align-middle">
<img class="img-product" id="zoompro" width="50px" height="50px"
src="{{ imageVariant.thumbnail('ProductImages') }}" alt="product" />
</td>
{% if showCapacityColumn %}
<td class="text-center align-middle">
{% set capacidadValue = variantAttributes['capacidad'].value %}
{% if capacidadValue is not empty %}
{{ capacidadValue|first|raw }}
{% endif %}
</td>
{% endif %}
{% if showColorColumn %}
<td class="text-center align-middle">
{{ variantAttributes['color'].value | default('') }}
</td>
{% endif %}
<td class="text-center align-middle">{{ app_helper_price_format_spain(endPrice) }}€</td>
<td class="text-center align-middle">
<button class="btn btn-primary rounded btn-add-product deselected"
id="{{ variantRelatedProduct.id }}">
{{ 'seleccionar' | trans }}
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary rounded close-modal-of-related-products" data-bs-dismiss="modal">{{ 'no-gracias' | trans }}</button>
<button type="button" class="btn btn-primary rounded add-ids-of-products" data-bs-dismiss="modal" disabled>{{ 'product_detail.content.button_text_translations' | trans }} </button>
</div>
</div>
</div>
</div>
{% endif %}
{# Product Bundle Button #}
<!--Product Tabs-->
{% include 'Shop/includes/documentsbuttons.html.twig' %}
<!--End Product Tabs-->
</div>
<!--End Container-->
{% if relatedProducts | length > 0 %}
<!--You May Also Like Products-->
<section class="section product-slider pb-2">
<div class="container">
<div class="row">
<div class="section-header col-12">
<h2 class="text-transform-none">{{ 'product_detail.content.title_related_products_translations' |trans }}</h2>
</div>
</div>
{% include 'Shop/includes/relatedproducts.html.twig' %}
</div>
</section>
<!--End You May Also Like Products-->
{% endif %}
<!--Recently Viewed Products-->
{% if lastVisitedProducts | length > 1 %}
{% include 'Shop/includes/recentlyViewedProducts.html.twig' %}
{% endif %}
<!--End Recently Viewed Products-->
<!--Size Chart-->
{% include 'Shop/includes/articletable2.html.twig' %}
<!--End Size Chart-->
<!--Scoll Top-->
<span id="site-scroll"><i class="icon an an-chevron-up"></i></span>
<!--End Scoll Top-->
{% endblock %}
{% block PAGE_JS %}
{% set is_authenticated = is_granted('IS_AUTHENTICATED_FULLY') %}
{% set data = app_product_generate_data(product) %}
{% set variants = data.variants %}
{# {% set tableAttributes = app_product_variants_attributes(data) %}#}
{% set haveProductErrors = 0 %}
{# CHECK IF THE PRODUCT HAVE ERRORS #}
{% if is_authenticated %}
{% set haveProductErrors = app_product_haveError(product) %}
{# This is just so that js understand the boolean value #}
{% if haveProductErrors %}
{% set haveProductErrors = 1 %}
{% else %}
{% set haveProductErrors = 0 %}
{% endif %}
{% endif %}
{% set companyMail = company.mail %}
{% if ( ( data.variants | length ) > 1 ) %}
{% set haveVariants = 1 %}
{% else %}
{% set haveVariants = 0 %}
{% endif %}
{% if is_authenticated %}
<script>
let title = '{{ 'titleTranslation' |trans}}'
let content = '{{ 'contentTranslation' |trans}}'
let buttonText ='{{ 'buttonTextTranslation' |trans}}'
</script>
<script>
let haveVariants = {{ haveVariants }};
$(document).ready(function () {
let haveProductErrors = {{ haveProductErrors }} ;
if (haveProductErrors) {
Swal.fire({
icon: 'warning',
title: 'Oops...',
showCancelButton: true,
confirmButtonColor: '#106eea',
cancelButtonColor: '#38b000',
confirmButtonText: 'Entendido!',
cancelButtonText: 'Contactar',
html: 'La información del producto se esta actualizando, cualquier duda puede comunicarse a soporte.'
})
//Hide SKU, price, quantity, and add to cart button
$('.product-price__price').hide();
$('.product-form').hide();
$('.proceed-to-checkout').hide();
$('.product-sku').hide()
}
$('.swal2-cancel').click(function () {
var email = '{{ companyMail }}';
var subject = 'Soporte';
var emailBody = 'Hi';
window.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
})
// If the product doesn't have variants
if (haveVariants === 0) {
let qtyButton = $('.qtyField');
//ID of the product
let productID = qtyButton.attr('id');
// Selected value of the quantity button
let qtyValue = $('.product-form__input').val();
// Display add to cart button
$('.product-form__item--buyit').removeClass('d-none');
// Display the quantity button
qtyButton.removeClass('d-none');
$('.product-form__item--buyit').attr('id',productID);
getStockAjax(productID, qtyValue);
}
// Keep a reference to the button that was selected
let selectedButton = null;
function getPriceFormatSpain(price) {
return parseFloat(price).toLocaleString('es-ES', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}
$('table tbody').on('click', '.btn-ver-datatable', function() {
let idVariant = $(this).attr('id');
let qtyValue = $('.product-form__input').val();
let qtyButton = $('.qtyField');
let warehouseText = $('.stock-warehouse.stock-animation')
$('.proceed-to-checkout').css('font-weight','600');
$('.product-form__cart-submit').css('opacity','0.5');
$('.spacing').removeClass('d-inline');
$('.spacing').addClass('d-none');
$('.product-form__item--buyit').removeClass('d-none');
$('.product-form__item--buyit').attr('id',idVariant);
$('.mfp-close').click();
// If there is a selected button, reset its state
if (selectedButton) {
selectedButton.text('VER');
selectedButton.css('filter', 'brightness(100%)');
}
// Change the text and style of the clicked button and save it as the selected button
$(this).text('Seleccionado');
$(this).css('font-weight','bold'); // Make the font bold
$(this).css('filter','brightness(100%)');
selectedButton = $(this);
// This return info of variant selected
$.ajax({
method: 'POST',
url: '/ajax_variant_info',
datatype: 'json',
data: {
id: idVariant,
},
success: function (data) {
newImageAjax(idVariant);
// Display the quantity button
qtyButton.removeClass('d-none');
warehouseText.removeClass('d-none')
// Put the id of the variant in qtyField element
qtyButton.attr('id', idVariant);
// Display SKU of the variant product
$('.variant-sku').html(data.bsnCode);
$('.product-sku').show();
// Check if the product has discount
const { original_price, end_price, error, discount } = data.priceWithDiscount;
if (original_price !== end_price && error === null) {
// Set old price
$('.product-price-old-price')
.text(getPriceFormatSpain(original_price) + '€')
.removeClass('d-none');
$('.discount-badge').removeClass('d-none');
// Set new price
const truncatedPrice = parseFloat(end_price).toFixed(2);
$('.product-price__sale').text(getPriceFormatSpain(truncatedPrice) + '€');
// Set discount
const discountAmount = original_price - end_price;
$('.money').text(getPriceFormatSpain(discountAmount.toFixed(2)) + '€');
if (discount !== '.00') {
$('.percentage').text(getPriceFormatSpain(discount));
$('.percentage-span').removeClass('d-none');
} else {
$('.percentage-span').addClass('d-none');
}
} else {
// If there is no discount or there is an error
$('.product-price__sale').html(data.price + '€');
$('.product-price-old-price').addClass('d-none');
$('.discount-badge').addClass('d-none');
}
// Update stock information
getStock(data.stock, qtyValue, data.deliveryTime);
},
error: function () {
alert('ERROR: Unable to fetch variant information.');
}
});
});
function newImageAjax(idVariant){
// This return info of variant selected
$.ajax({
method: 'POST',
url: '/ajax_productDetail_new_asset',
datatype: 'html',
data: {
id: idVariant,
},
success: function (data) {
$('.img-father').html(data);
},
error: function () {
alert('ERROR');
}
});
}
let timer = false;
// Detect clicks on plus and minus buttons
$('.qtyBtn').click(function () {
let qtyField = $(this).closest('.qtyField');
let productID = qtyField.attr('id');
let qtyValue = parseInt(qtyField.find('.product-form__input').val(), 10);
// Ensure qtyValue is a valid number and greater than or equal to 1 before making request
if (!isNaN(qtyValue) && qtyValue >= 1) {
clearTimeout(timer);
timer = setTimeout(getStockAjax, 300, productID, qtyValue);
}
});
// Detect changes in the input field and allow only numeric values
$('.product-form__input').on('input', function () {
let qtyField = $(this).closest('.qtyField');
let productID = qtyField.attr('id');
let qtyValue = $(this).val();
// Allow only numeric input
qtyValue = qtyValue.replace(/\D/g, ''); // Remove any non-numeric characters
$(this).val(qtyValue); // Update the input field with the cleaned value
// Parse the value as an integer (but allow empty input while typing)
if (qtyValue !== "") {
qtyValue = parseInt(qtyValue, 10);
// Ensure the value is greater than or equal to 1 before making the request
if (!isNaN(qtyValue) && qtyValue >= 1) {
clearTimeout(timer);
timer = setTimeout(getStockAjax, 300, productID, qtyValue);
}
}
});
function getStockAjax(productID, qtyValue) {
$.ajax({
method: 'POST',
url: '/ajax_productDetail_getStock',
datatype: 'json',
data: {
id: productID
},
success: function (data) {
getStock(data.stock, qtyValue, data.deliveryTime);
},
error: function () {
alert('ERROR');
}
});
}
$('.infostock').click(function () {
// Obtén el idioma del usuario de la variable lang
const lang = $('.lang').attr('lang');
Swal.fire({
icon: 'info',
title: title,
confirmButtonColor: '#106eea',
confirmButtonText: buttonText,
html: content
});
});
function getStock(stock, qtyField, deliveryTime) {
$('.preorder.nostock').addClass('d-none');
$('.stockText').text(stock.total + ' {{ 'En stock' | trans }}');
$('.instock').addClass('d-none');
$('.outstock').addClass('d-none');
$('.differenceText').text('{{ 'Por entregar' |trans }}');
$('.deliveryTime').addClass('d-none');
$('.icon-info').addClass('d-none');
const lang = $('.lang').attr('lang');
let diferrence = ((stock.total - qtyField) * -1);
let warehouseHtml = '';
if (stock.warehouse[3] !== undefined || stock.warehouse[5] !== undefined) {
warehouseHtml += '<div class="stock-info-table card p-2 position-absolute">';
warehouseHtml += '<div class="header text-center mb-2">{{ 'Stock available in' | trans }}:</div>';
if (stock.warehouse[3] !== undefined) {
warehouseHtml += '<div class="row no-gutters first-row">';
warehouseHtml += '<div class="col-6 bg-primary text-white">{{ 'warehouse_barcelona' | trans }}</div>';
warehouseHtml += '<div class="col-6 bg-white text-dark">' + stock.warehouse[3] + '</div>';
warehouseHtml += '</div>';
}
if (stock.warehouse[5] !== undefined) {
warehouseHtml += '<div class="row no-gutters last-row">';
warehouseHtml += '<div class="col-6 bg-primary text-white">{{ 'warehouse_palma' | trans}}</div>';
warehouseHtml += '<div class="col-6 bg-white text-dark">' + stock.warehouse[5] + '</div>';
warehouseHtml += '</div>';
}
warehouseHtml += '</div>';
}
$('.stock-info-container').html(warehouseHtml);
const stockContainer = document.querySelector('.stock-animation');
const stockTable = document.querySelector('.stock-info-table');
stockContainer.addEventListener('mouseover', function() {
stockTable.style.display = 'flex';
});
stockContainer.addEventListener('mouseout', function() {
stockTable.style.display = 'none';
});
if (stock.total > 0) {
if (qtyField > 0) {
if (qtyField <= stock.total) {
$('.instock').removeClass('d-none');
} else {
$('.instock').removeClass('d-none');
$('.stockText').text(stock.total + ' {{ 'En stock' | trans }}');
$('.preorder.nostock').removeClass('d-none');
$('.differenceText').text(diferrence + ' {{ 'Por entregar' | trans }}');
$('.icon-info').removeClass('d-none');
if (deliveryTime) {
$('.deliveryTime').removeClass('d-none');
$('.deliveryTimeText').text(deliveryTime + ' {{ 'En llegar' | trans }}');
} else {
console.log('No hay info en el PIM');
}
}
} else {
$('.instock').removeClass('d-none');
}
} else {
if (deliveryTime) {
$('.deliveryTime').removeClass('d-none');
$('.deliveryTimeText').text(deliveryTime + (lang === 'en' ? ' To arrive' : ' En llegar'));
} else {
console.log('No hay info en el PIM');
}
$('.outstock').removeClass('d-none');
}
}
});
//PRODUCT BUNDLE
let buttons = document.getElementsByClassName("btn-add-product");
let idsArray = [];
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
let id = this.getAttribute("id");
let index = idsArray.indexOf(id);
if (index !== -1) {
idsArray.splice(index, 1);
this.classList.remove("selected");
this.classList.add("deselected");
this.textContent = "Seleccionar";
} else {
idsArray.push(id);
this.classList.add("selected");
this.classList.remove("deselected");
this.textContent = "Seleccionado";
}
if ( Array.isArray(idsArray) && idsArray.length){
$('.add-ids-of-products').removeAttr('disabled');
} else {
$('.add-ids-of-products').attr('disabled', true);
}
});
}
$('.add-ids-of-products').click(function() {
let productsIds = JSON.stringify(idsArray); // Convert the array to a JSON string
let mainProductId = $('.add-item-cart').attr('id');
let mainProductQtyValue = $('.product-form__input').val();
$.ajax({
url: '/add-to-cart-products-array-ajax',
type: 'POST',
dataType: 'JSON',
data: {
mainProductId : mainProductId,
mainProductQtyValue : mainProductQtyValue,
ids: productsIds
}, // Pass the data as an object with a key-value pair
success: function(data, status) {
if(data.success === true) {
$('.add-ids-of-products').addClass('opacity-50')
$('.site-cart-count').text(data.itemsOnCart);
$('.btn-minicart').click();
$('#minicart-drawer').modal('show');
} else {
alert(data.error);
}
},
error: function(xhr, desc, err) {
console.log("error");
}
});
});
</script>
{% endif %}
<script>
let relatedProducts = '{{ 'related-products' | trans | raw }}';
let relatedProductsDescription = '{{ 'related-products-description' | trans | raw }}';
</script>
<script src="{{ asset('assets/js/shop/product-detail.js') }}"></script>
{# if product not have Errors load the Datatable #}
{% if not haveProductErrors %}
<script src="{{ asset('../assets/js/dataTables/TableProduct.js') }}"></script>
{% endif %}
{% endblock %}