templates/Shop/ProductDetails/productDetail.html.twig line 1

Open in your IDE?
  1. {# @var product \AppBundle\Model\DefaultProduct #}
  2. {# @var marca \AppBundle\Model\DefaultMarca #}
  3. {% extends 'layout/layout.html.twig' %}
  4. {% block CONTENT %}
  5.     {# Define authentication variable #}
  6.     {% set is_authenticated = is_granted('IS_AUTHENTICATED_FULLY') %}
  7.     {# Check if there is an error in the product #}
  8.     {% set haveProductErrors = app_product_haveError(product) %}
  9.     {% if haveProductErrors %}
  10.         {% set haveDiscount =  false %}
  11.     {% else %}
  12.         {% if is_authenticated %}
  13.             {#  START PRICE WITH DISCOUNT BLOCK  #}
  14.             {% set defaultPriceWithDiscount = app_product_default_price_with_discount(product, userIdSage) %}
  15.             {% set haveDiscount = defaultPriceWithDiscount.original_price != defaultPriceWithDiscount.end_price  and defaultPriceWithDiscount.error is null and defaultPriceWithDiscount.end_price is not null %}
  16.             {#  END PRICE WITH DISCOUNT BLOCK  #}
  17.         {% endif %}
  18.     {% endif %}
  19.     {% set data = app_product_generate_data(product) %}
  20.     {% set variants = data.variants %}
  21. {#    {% set tableAttributes = app_product_variants_attributes(data) %}#}
  22.     {% set SKU = false %}
  23. {#    {{ dump(app_product_unpublished_variants_check(product)) }}#}
  24.     {#   Does it have variants?#}
  25.     {% if ( ( data.variants | length ) > 1 )  %}
  26.         {% set haveVariants =  true %}
  27.     {% else %}
  28.         {% set haveVariants = false %}
  29.         {% set SKU = ( data.variants | first ) %}
  30.         {% set SKU = SKU.bsncode %}
  31.     {% endif %}
  32.     {% set productID = (data.variants | first).id %}
  33.     {% set defaultPrice = app_product_default_price(product) %}
  34.     {% set attributesRows = app_product_attributes_rows(product, data) %}
  35.     {% set typesRows = app_product_types_rows(product, data) %}
  36.     {% set documents = app_product_documents(product) %}
  37.     {% set link = product.getDetailUrl({'document': document, 'prefix':app.request.locale}) %}
  38.     {% set title = product.getName() %}
  39.     {% set empresa = pimcore_website_config('empresa') %}
  40.     {% set titlePostFix = empresa.getTitle() %}
  41.     {% do pimcore_head_title().set(title ~ ' :: ' ~ titlePostFix) %}
  42.     {% if product.getSeodescription is not empty %}
  43.         {% do pimcore_head_meta().appendName('description', product.getSeodescription()) %}
  44.     {% endif %}
  45.     {% do pimcore_head_link({rel: 'canonical', href: app.request.schemeAndHttpHost ~ link }) %}
  46.     <style>
  47.         .spacing{
  48.             padding-right: 10px;
  49.         }
  50.     </style>
  51.                 <!--Breadcrumbs-->
  52.             {% set lang = app.request.getLocale() %}
  53.             <input type="hidden" class="lang" lang="{{ lang }}">
  54.                 <div class="breadcrumbs-wrapper text-uppercase">
  55.                     <div class="container">
  56.                         <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>
  57.                     </div>
  58.                 </div>
  59.                 <!--End Breadcrumbs-->
  60.                 <!--Main Content-->
  61.                 <div class="container">
  62.                     <!--Product Content-->
  63.                     <div class="product-single">
  64.                         <div class="row">
  65.                             <div class="col-lg-6 col-md-6 col-sm-12 col-12">
  66.                                 {% set image = product.getFirstImageAsset() %}
  67.                                 <div class="product-details-img product-details-img-indaba product-horizontal-style clearfix mb-3 mb-md-0">
  68.                                     <div class="zoompro-wrap product-zoom-right product-zoom-right-indaba w-100 p-0">
  69.                                         {% if image is not null %}
  70.                                         <div class="zoompro-span img-father"><img class="img-product" id="zoompro" {# class="zoompro" #} src="{{ image.thumbnail('ProductImages') }}" data-zoom-image="" alt="product" /></div>
  71.                                         {% endif %}
  72.                                     </div>
  73.                                 </div>
  74.                             </div>
  75.                             <div class="col-lg-6 col-md-6 col-sm-12 col-12 product-info-container">
  76.                                 <!-- Product Info -->
  77.                                 <div class="product-single__meta">
  78.                                     {% if product.getName is not empty %}
  79.                                         <h1 class="product-single__title">{{ product.getName }}</h1>
  80.                                     {% endif %}
  81.                                     <!-- Product Info -->
  82.                                     {% if is_authenticated %}
  83.                                     <div class="prInfoRow product-info mt-2 d-flex-wrap">
  84.                                         <p class="product-sku fs-6" style="display: {{ (haveVariants) ? 'none' : '' }};">SKU: <span class="variant-sku">{{ SKU}}</span></p>
  85.                                     </div>
  86.                                     {% endif %}
  87.                                     <!-- End Product Info -->
  88.                                     <!-- Product Price -->
  89.                                     {% if is_authenticated %}
  90.                                         <div class="product-single__price pb-1">
  91.                                             <p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
  92.                                             <span class="visually-hidden">Regular price</span>
  93.                                             <span class="product-price__sale--single">
  94.                                                 {% set originalPrice = haveDiscount ? defaultPriceWithDiscount.original_price : defaultPrice %}
  95.                                                 {% set endPrice = haveDiscount ? defaultPriceWithDiscount.end_price : defaultPrice %}
  96.                                                 {% set discountAmount = defaultPriceWithDiscount.original_price - defaultPriceWithDiscount.end_price %}
  97.                                                 {% set displayClass = haveDiscount ? '' : 'd-none' %}
  98.                                                 {% set displayClassPercent = defaultPriceWithDiscount.discount != '.00' ? '': 'd-none' %}
  99.                                                  <span class="product-price-old-price {{ displayClass }}">
  100.                                                     {{ app_helper_price_format_spain(originalPrice) }}€
  101.                                                 </span>
  102.                                                 <span class="product-price__price product-price__sale">
  103.                                                     {{ app_helper_price_format_spain(endPrice) }}€
  104.                                                 </span>
  105.                                                  <span class="discount-badge {{ displayClass }}">
  106.                                                         <span class="devider me-2">|</span>
  107.                                                         <span>{{ 'Descuento' | trans }}:</span>
  108.                                                         <span class="product-single__save-amount">
  109.                                                             <span class="money">{{ app_helper_price_format_spain(discountAmount) }}€</span>
  110.                                                         </span>
  111.                                                         <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>
  112.                                                     </span>
  113.                                             </span>
  114.                                         </div>
  115.                                         <!-- End Product Price -->
  116.                                     {% else %}
  117.                                         {# if product have propspeed brand hide price #}
  118.                                         {% if product.marca == 15663 %}
  119.                                             <div class="product-single__price pb-1">
  120.                                                 <span class="visually-hidden"></span>
  121.                                                 <span class="product-price__price product-price__sale"></span>
  122.                                             </div>
  123.                                         {% else %}
  124.                                             <div class="product-single__price pb-1">
  125.                                                     <p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
  126.                                                 <span class="visually-hidden">Regular price</span>
  127.                                                 <span class="product-price__price product-price__sale">
  128.                                                         {{ app_helper_price_format_spain(defaultPrice) }}€
  129.                                                     </span>
  130.                                             </div>
  131.                                         {% endif %}
  132.                                     {% endif %}
  133.                                 </div>
  134.                                 <!-- End Product Info -->
  135.                                 {% set longDescription = product.getLongdescription() %}
  136.                                 {% set shortDescription = product.getShortdescription() %}
  137.                                 {% set description = shortDescription is not empty ? shortDescription : longDescription %}
  138.                                 <div class="product-single__description rte">
  139.                                     {% if description matches '/<[^>]+>/' %}
  140.                                         <div class="mb-2 fs-6">
  141.                                             {% for paragraph in description | split('</p>') %}
  142.                                                 {% if paragraph | trim %}
  143.                                                     {{ paragraph | trim | raw }}</p>
  144.                                                 {% endif %}
  145.                                             {% endfor %}
  146.                                         </div>
  147.                                     {% else %}
  148.                                         <p class="mb-2 fs-6">{{ description | nl2br | raw }}</p>
  149.                                     {% endif %}
  150.                                     <ul class="checkmarkList">
  151.                                         {% if attributesRows | length > 0 or typesRows | length > 0 %}
  152.                                             <table class="table table-striped">
  153.                                                 {% for row in attributesRows %}
  154.                                                     {{ row | raw }}
  155.                                                 {% endfor %}
  156.                                                 {% for row in typesRows %}
  157.                                                     {{ row | raw }}
  158.                                                 {% endfor %}
  159.                                             </table>
  160.                                         {% endif %}
  161.                                     </ul>
  162.                                 </div>
  163.                                 <!-- Product Form -->
  164.                                 <form method="post" action="#" class="product-form form-bordered hidedropdown">
  165.                                     <!-- Product Action -->
  166.                                     <div class="product-action w-100 clearfix">
  167.                                         {% if is_authenticated %}
  168.                                             <div class="product-form__item--quantity d-flex-center mb-2">
  169.                                                 <div class="qtyField d-none" id="{{ productID }}">
  170.                                                     <a class="qtyBtn minus" href="javascript:void(0);"><i class="icon an an-minus-r" aria-hidden="true"></i></a>
  171.                                                     <input type="text" name="quantity" value="1" class="product-form__input qty rounded-0">
  172.                                                     <a class="qtyBtn plus" href="javascript:void(0);"><i class="icon an an-plus-r" aria-hidden="true"></i></a>
  173.                                                 </div>
  174.                                                 <div class="pro-stockLbl d-flex">
  175.                                                     <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>
  176.                                                     <span class=" stockLbl outstock infostock fs-6 d-none ms-3" title="Click para ver info"><i class="icon an an-times-cil"></i>
  177.                                                         <span>{{ 'product_detail.content.not_available' | trans }}</span>
  178.                                                     </span>
  179.                                                     <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>
  180.                                                     <span><i class="an an-info-cil fa-beat icon-info infostock ms-1 d-none" style="color: #0a53be"></i></span>
  181.                                                     <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>
  182.                                                 </div>
  183.                                             </div>
  184.                                             <div class="pro-stockLbl info-stock-container">
  185.                                                 <span class="stock-warehouse stock-animation mb-3 {{ haveVariants ? 'd-none':'' }}">{{'product.detail-stock_by_warehouse' | trans}}</span>
  186.                                                 <div class="stock-info-container"></div>
  187.                                             </div>
  188.                                         {% endif %}
  189.                                         {% if haveVariants %}
  190.                                             <div class="product-form__item--submit">
  191.                                                 <a href="#sizechart" class="sizelink link-underline text-uppercase ms-auto text-decoration-none">
  192.                                                     <i class="icon an an-ruler d-none"></i>
  193.                                                     <button id="btnTableVariants" type="submit" name="add" class="btn rounded btn-outline-primary product-form__cart-submit">
  194.                                                             <span>{{ 'product_detail.content.variants_table_header_translations' |trans }}</span>
  195.                                                     </button>
  196.                                                 </a>
  197.                                             </div>
  198.                                         {% endif %}
  199.                                         <div class="product-form__item--buyit clearfix add-item-cart d-none" id="">
  200.                                             <button type="button" class="btn rounded proceed-to-checkout" id="addToCartBtn">
  201.                                                 {% if lang == 'en' %}
  202.                                                     <span>Add to Cart</span>
  203.                                                 {% else %}
  204.                                                     <span>Agregar al carrito</span>
  205.                                                 {% endif %}
  206.                                             </button>
  207.                                         </div>
  208.                                     </div>
  209.                                     <!-- End Product Action -->
  210.                                 </form>
  211.                                 <!-- End Product Form -->
  212.                             </div>
  213.                         </div>
  214.                     </div>
  215.                     {# Product Bundle Button #}
  216.                     {% if  is_authenticated %}
  217.                     <!-- Modal -->
  218.                     <div class="modal fade" id="relatedProducts-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  219.                         <div class="modal-dialog modal-lg">
  220.                             <div class="modal-content">
  221.                                 <div class="modal-body">
  222.                                     {% set dataRelatedProducts = [] %}
  223.                                     {% set variantsRelatedProducts = [] %}
  224.                                     {% set showCapacityColumn = false %}
  225.                                     {% set showColorColumn = false %}
  226.                                     {% for relatedProduct in relatedProducts %}
  227.                                         {% set dataRelatedProducts = app_product_generate_data(relatedProduct) %}
  228.                                         {% set variantsRelatedProducts = variantsRelatedProducts|merge(dataRelatedProducts.variants) %}
  229.                                         {% if dataRelatedProducts.attributes['capacidad'] is defined and dataRelatedProducts.attributes['capacidad'].value is not empty %}
  230.                                             {% set showCapacityColumn = true %}
  231.                                         {% endif %}
  232.                                         {% if dataRelatedProducts.attributes['color'] is defined and dataRelatedProducts.attributes['color'].value is not empty %}
  233.                                             {% set showColorColumn = true %}
  234.                                         {% endif %}
  235.                                     {% endfor %}
  236.                                     {% if relatedProducts | length > 0 %}
  237.                                         <table class="table table-bordered border-primary product-related-table">
  238.                                             <thead>
  239.                                             <tr>
  240.                                                 <th class="text-center align-middle">{{ 'nombre' | trans }}</th>
  241.                                                 <th class="text-center align-middle">{{ 'imagen' | trans }}</th>
  242.                                                 {% if showCapacityColumn %}
  243.                                                     <th class="text-center align-middle">{{ 'capacidad' | trans }}</th>
  244.                                                 {% endif %}
  245.                                                 {% if showColorColumn %}
  246.                                                     <th class="text-center align-middle">{{ 'Color' | trans }}</th>
  247.                                                 {% endif %}
  248.                                                 <th class="text-center align-middle">{{ 'importe' | trans }}</th>
  249.                                                 <th class="text-center align-middle">{{ 'accion' | trans }}</th>
  250.                                             </tr>
  251.                                             </thead>
  252.                                             <tbody>
  253.                                             {% for variantRelatedProduct in variantsRelatedProducts %}
  254.                                                 {% set imageVariant = variantRelatedProduct.getFirstImageAsset() %}
  255.                                                 {% set endPrice = variantRelatedProduct.price %}
  256.                                                 {% set variantAttributes = app_product_generate_data(variantRelatedProduct).attributes %}
  257.                                                 <tr>
  258.                                                     <td class="text-center align-middle">{{ variantRelatedProduct.name }}</td>
  259.                                                     <td class="text-center align-middle">
  260.                                                         <img class="img-product" id="zoompro" width="50px" height="50px"
  261.                                                              src="{{ imageVariant.thumbnail('ProductImages') }}" alt="product" />
  262.                                                     </td>
  263.                                                     {% if showCapacityColumn %}
  264.                                                         <td class="text-center align-middle">
  265.                                                             {% set capacidadValue = variantAttributes['capacidad'].value %}
  266.                                                             {% if capacidadValue is not empty %}
  267.                                                                 {{ capacidadValue|first|raw }}
  268.                                                             {% endif %}
  269.                                                         </td>
  270.                                                     {% endif %}
  271.                                                     {% if showColorColumn %}
  272.                                                         <td class="text-center align-middle">
  273.                                                             {{ variantAttributes['color'].value | default('') }}
  274.                                                         </td>
  275.                                                     {% endif %}
  276.                                                     <td class="text-center align-middle">{{ app_helper_price_format_spain(endPrice) }}€</td>
  277.                                                     <td class="text-center align-middle">
  278.                                                         <button class="btn btn-primary rounded btn-add-product deselected"
  279.                                                                 id="{{ variantRelatedProduct.id }}">
  280.                                                             {{ 'seleccionar' | trans }}
  281.                                                         </button>
  282.                                                     </td>
  283.                                                 </tr>
  284.                                             {% endfor %}
  285.                                             </tbody>
  286.                                         </table>
  287.                                     {% endif %}
  288.                                 </div>
  289.                                 <div class="modal-footer">
  290.                                     <button type="button" class="btn btn-secondary rounded close-modal-of-related-products" data-bs-dismiss="modal">{{ 'no-gracias' | trans }}</button>
  291.                                     <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>
  292.                                 </div>
  293.                             </div>
  294.                         </div>
  295.                     </div>
  296.                     {% endif %}
  297.                     {# Product Bundle Button #}
  298.                     <!--Product Tabs-->
  299.                     {% include 'Shop/includes/documentsbuttons.html.twig' %}
  300.                     <!--End Product Tabs-->
  301.                 </div>
  302.                 <!--End Container-->
  303.     {% if relatedProducts | length > 0 %}
  304.         <!--You May Also Like Products-->
  305.         <section class="section product-slider pb-2">
  306.             <div class="container">
  307.                 <div class="row">
  308.                     <div class="section-header col-12">
  309.                         <h2 class="text-transform-none">{{ 'product_detail.content.title_related_products_translations' |trans }}</h2>
  310.                     </div>
  311.                 </div>
  312.                 {% include 'Shop/includes/relatedproducts.html.twig' %}
  313.             </div>
  314.         </section>
  315.         <!--End You May Also Like Products-->
  316.     {% endif %}
  317.     <!--Recently Viewed Products-->
  318.     {% if lastVisitedProducts | length > 1 %}
  319.         {% include 'Shop/includes/recentlyViewedProducts.html.twig' %}
  320.     {% endif %}
  321.     <!--End Recently Viewed Products-->
  322.     <!--Size Chart-->
  323.     {% include 'Shop/includes/articletable2.html.twig' %}
  324.     <!--End Size Chart-->
  325.     <!--Scoll Top-->
  326.     <span id="site-scroll"><i class="icon an an-chevron-up"></i></span>
  327.     <!--End Scoll Top-->
  328. {% endblock %}
  329. {% block PAGE_JS %}
  330.     {% set is_authenticated = is_granted('IS_AUTHENTICATED_FULLY') %}
  331.     {% set data = app_product_generate_data(product) %}
  332.     {% set variants = data.variants %}
  333. {#    {% set tableAttributes = app_product_variants_attributes(data) %}#}
  334.     {% set haveProductErrors = 0 %}
  335.     {# CHECK IF THE PRODUCT HAVE ERRORS #}
  336.     {% if is_authenticated %}
  337.         {% set haveProductErrors = app_product_haveError(product) %}
  338.         {# This is just so that js understand the boolean value   #}
  339.         {% if haveProductErrors %}
  340.             {% set haveProductErrors = 1 %}
  341.         {% else %}
  342.             {% set haveProductErrors = 0 %}
  343.         {% endif %}
  344.     {% endif %}
  345.     {% set companyMail = company.mail %}
  346.     {% if ( ( data.variants | length ) > 1 )  %}
  347.         {% set haveVariants =  1 %}
  348.     {% else %}
  349.         {% set haveVariants = 0 %}
  350.     {% endif %}
  351.     {% if is_authenticated %}
  352.         <script>
  353.             let title = '{{ 'titleTranslation' |trans}}'
  354.             let content = '{{ 'contentTranslation' |trans}}'
  355.             let buttonText ='{{ 'buttonTextTranslation' |trans}}'
  356.         </script>
  357.         <script>
  358.             let haveVariants = {{ haveVariants }};
  359.             $(document).ready(function () {
  360.                 let haveProductErrors = {{ haveProductErrors }} ;
  361.                 if (haveProductErrors) {
  362.                     Swal.fire({
  363.                         icon: 'warning',
  364.                         title: 'Oops...',
  365.                         showCancelButton: true,
  366.                         confirmButtonColor: '#106eea',
  367.                         cancelButtonColor: '#38b000',
  368.                         confirmButtonText: 'Entendido!',
  369.                         cancelButtonText: 'Contactar',
  370.                         html: 'La información del producto se esta actualizando, cualquier duda puede comunicarse a soporte.'
  371.                     })
  372.                     //Hide SKU, price, quantity, and add to cart button
  373.                     $('.product-price__price').hide();
  374.                     $('.product-form').hide();
  375.                     $('.proceed-to-checkout').hide();
  376.                     $('.product-sku').hide()
  377.                 }
  378.                 $('.swal2-cancel').click(function () {
  379.                     var email = '{{ companyMail }}';
  380.                     var subject = 'Soporte';
  381.                     var emailBody = 'Hi';
  382.                     window.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
  383.                 })
  384.                 // If the product doesn't have variants
  385.                 if (haveVariants === 0) {
  386.                     let qtyButton = $('.qtyField');
  387.                     //ID of the product
  388.                     let productID = qtyButton.attr('id');
  389.                     // Selected value of the quantity button
  390.                     let qtyValue = $('.product-form__input').val();
  391.                     // Display add to cart button
  392.                     $('.product-form__item--buyit').removeClass('d-none');
  393.                     // Display the quantity button
  394.                     qtyButton.removeClass('d-none');
  395.                     $('.product-form__item--buyit').attr('id',productID);
  396.                     getStockAjax(productID, qtyValue);
  397.                 }
  398.                 // Keep a reference to the button that was selected
  399.                 let selectedButton = null;
  400.                 function getPriceFormatSpain(price) {
  401.                     return parseFloat(price).toLocaleString('es-ES', {
  402.                         minimumFractionDigits: 2,
  403.                         maximumFractionDigits: 2
  404.                     });
  405.                 }
  406.                 $('table tbody').on('click', '.btn-ver-datatable', function() {
  407.                     let idVariant = $(this).attr('id');
  408.                     let qtyValue = $('.product-form__input').val();
  409.                     let qtyButton = $('.qtyField');
  410.                     let warehouseText = $('.stock-warehouse.stock-animation')
  411.                     $('.proceed-to-checkout').css('font-weight','600');
  412.                     $('.product-form__cart-submit').css('opacity','0.5');
  413.                     $('.spacing').removeClass('d-inline');
  414.                     $('.spacing').addClass('d-none');
  415.                     $('.product-form__item--buyit').removeClass('d-none');
  416.                     $('.product-form__item--buyit').attr('id',idVariant);
  417.                     $('.mfp-close').click();
  418.                     // If there is a selected button, reset its state
  419.                     if (selectedButton) {
  420.                         selectedButton.text('VER');
  421.                         selectedButton.css('filter', 'brightness(100%)');
  422.                     }
  423.                     // Change the text and style of the clicked button and save it as the selected button
  424.                     $(this).text('Seleccionado');
  425.                     $(this).css('font-weight','bold');         // Make the font bold
  426.                     $(this).css('filter','brightness(100%)');
  427.                     selectedButton = $(this);
  428.                     // This return info of variant selected
  429.                     $.ajax({
  430.                         method: 'POST',
  431.                         url: '/ajax_variant_info',
  432.                         datatype: 'json',
  433.                         data: {
  434.                             id: idVariant,
  435.                         },
  436.                         success: function (data) {
  437.                             newImageAjax(idVariant);
  438.                             // Display the quantity button
  439.                             qtyButton.removeClass('d-none');
  440.                             warehouseText.removeClass('d-none')
  441.                             // Put the id of the variant in qtyField element
  442.                             qtyButton.attr('id', idVariant);
  443.                             // Display SKU of the variant product
  444.                             $('.variant-sku').html(data.bsnCode);
  445.                             $('.product-sku').show();
  446.                             // Check if the product has discount
  447.                             const { original_price, end_price, error, discount } = data.priceWithDiscount;
  448.                             if (original_price !== end_price && error === null) {
  449.                                 // Set old price
  450.                                 $('.product-price-old-price')
  451.                                     .text(getPriceFormatSpain(original_price) + '€')
  452.                                     .removeClass('d-none');
  453.                                 $('.discount-badge').removeClass('d-none');
  454.                                 // Set new price
  455.                                 const truncatedPrice = parseFloat(end_price).toFixed(2);
  456.                                 $('.product-price__sale').text(getPriceFormatSpain(truncatedPrice) + '€');
  457.                                 // Set discount
  458.                                 const discountAmount = original_price - end_price;
  459.                                 $('.money').text(getPriceFormatSpain(discountAmount.toFixed(2)) + '€');
  460.                                 if (discount !== '.00') {
  461.                                     $('.percentage').text(getPriceFormatSpain(discount));
  462.                                     $('.percentage-span').removeClass('d-none');
  463.                                 } else {
  464.                                     $('.percentage-span').addClass('d-none');
  465.                                 }
  466.                             } else {
  467.                                 // If there is no discount or there is an error
  468.                                 $('.product-price__sale').html(data.price + '€');
  469.                                 $('.product-price-old-price').addClass('d-none');
  470.                                 $('.discount-badge').addClass('d-none');
  471.                             }
  472.                             // Update stock information
  473.                             getStock(data.stock, qtyValue, data.deliveryTime);
  474.                         },
  475.                         error: function () {
  476.                             alert('ERROR: Unable to fetch variant information.');
  477.                         }
  478.                     });
  479.                 });
  480.                 function newImageAjax(idVariant){
  481.                     // This return info of variant selected
  482.                     $.ajax({
  483.                         method: 'POST',
  484.                         url: '/ajax_productDetail_new_asset',
  485.                         datatype: 'html',
  486.                         data: {
  487.                             id: idVariant,
  488.                         },
  489.                         success: function (data) {
  490.                             $('.img-father').html(data);
  491.                         },
  492.                         error: function () {
  493.                             alert('ERROR');
  494.                         }
  495.                     });
  496.                 }
  497.                 let timer = false;
  498.                 // Detect clicks on plus and minus buttons
  499.                 $('.qtyBtn').click(function () {
  500.                     let qtyField = $(this).closest('.qtyField');
  501.                     let productID = qtyField.attr('id');
  502.                     let qtyValue = parseInt(qtyField.find('.product-form__input').val(), 10);
  503.                     // Ensure qtyValue is a valid number and greater than or equal to 1 before making request
  504.                     if (!isNaN(qtyValue) && qtyValue >= 1) {
  505.                         clearTimeout(timer);
  506.                         timer = setTimeout(getStockAjax, 300, productID, qtyValue);
  507.                     }
  508.                 });
  509.                 // Detect changes in the input field and allow only numeric values
  510.                 $('.product-form__input').on('input', function () {
  511.                     let qtyField = $(this).closest('.qtyField');
  512.                     let productID = qtyField.attr('id');
  513.                     let qtyValue = $(this).val();
  514.                     // Allow only numeric input
  515.                     qtyValue = qtyValue.replace(/\D/g, '');  // Remove any non-numeric characters
  516.                     $(this).val(qtyValue);  // Update the input field with the cleaned value
  517.                     // Parse the value as an integer (but allow empty input while typing)
  518.                     if (qtyValue !== "") {
  519.                         qtyValue = parseInt(qtyValue, 10);
  520.                         // Ensure the value is greater than or equal to 1 before making the request
  521.                         if (!isNaN(qtyValue) && qtyValue >= 1) {
  522.                             clearTimeout(timer);
  523.                             timer = setTimeout(getStockAjax, 300, productID, qtyValue);
  524.                         }
  525.                     }
  526.                 });
  527.                 function getStockAjax(productID, qtyValue) {
  528.                     $.ajax({
  529.                         method: 'POST',
  530.                         url: '/ajax_productDetail_getStock',
  531.                         datatype: 'json',
  532.                         data: {
  533.                             id: productID
  534.                         },
  535.                         success: function (data) {
  536.                             getStock(data.stock, qtyValue, data.deliveryTime);
  537.                         },
  538.                         error: function () {
  539.                             alert('ERROR');
  540.                         }
  541.                     });
  542.                 }
  543.                 $('.infostock').click(function () {
  544.                     // Obtén el idioma del usuario de la variable lang
  545.                     const lang = $('.lang').attr('lang');
  546.                     Swal.fire({
  547.                         icon: 'info',
  548.                         title: title,
  549.                         confirmButtonColor: '#106eea',
  550.                         confirmButtonText: buttonText,
  551.                         html: content
  552.                     });
  553.                 });
  554.                 function getStock(stock, qtyField, deliveryTime) {
  555.                     $('.preorder.nostock').addClass('d-none');
  556.                     $('.stockText').text(stock.total + ' {{ 'En stock' | trans }}');
  557.                     $('.instock').addClass('d-none');
  558.                     $('.outstock').addClass('d-none');
  559.                     $('.differenceText').text('{{ 'Por entregar' |trans }}');
  560.                     $('.deliveryTime').addClass('d-none');
  561.                     $('.icon-info').addClass('d-none');
  562.                     const lang = $('.lang').attr('lang');
  563.                     let diferrence = ((stock.total - qtyField) * -1);
  564.                     let warehouseHtml = '';
  565.                     if (stock.warehouse[3] !== undefined || stock.warehouse[5] !== undefined) {
  566.                         warehouseHtml += '<div class="stock-info-table card p-2 position-absolute">';
  567.                         warehouseHtml += '<div class="header text-center mb-2">{{ 'Stock available in' | trans }}:</div>';
  568.                         if (stock.warehouse[3] !== undefined) {
  569.                             warehouseHtml += '<div class="row no-gutters first-row">';
  570.                             warehouseHtml += '<div class="col-6 bg-primary text-white">{{ 'warehouse_barcelona' | trans }}</div>';
  571.                             warehouseHtml += '<div class="col-6 bg-white text-dark">' + stock.warehouse[3] + '</div>';
  572.                             warehouseHtml += '</div>';
  573.                         }
  574.                         if (stock.warehouse[5] !== undefined) {
  575.                             warehouseHtml += '<div class="row no-gutters last-row">';
  576.                             warehouseHtml += '<div class="col-6 bg-primary text-white">{{ 'warehouse_palma' | trans}}</div>';
  577.                             warehouseHtml += '<div class="col-6 bg-white text-dark">' + stock.warehouse[5] + '</div>';
  578.                             warehouseHtml += '</div>';
  579.                         }
  580.                         warehouseHtml += '</div>';
  581.                     }
  582.                     $('.stock-info-container').html(warehouseHtml);
  583.                     const stockContainer = document.querySelector('.stock-animation');
  584.                     const stockTable = document.querySelector('.stock-info-table');
  585.                     stockContainer.addEventListener('mouseover', function() {
  586.                         stockTable.style.display = 'flex';
  587.                     });
  588.                     stockContainer.addEventListener('mouseout', function() {
  589.                         stockTable.style.display = 'none';
  590.                     });
  591.                     if (stock.total > 0) {
  592.                         if (qtyField > 0) {
  593.                             if (qtyField <= stock.total) {
  594.                                 $('.instock').removeClass('d-none');
  595.                             } else {
  596.                                 $('.instock').removeClass('d-none');
  597.                                 $('.stockText').text(stock.total + ' {{ 'En stock' | trans }}');
  598.                                 $('.preorder.nostock').removeClass('d-none');
  599.                                 $('.differenceText').text(diferrence + ' {{ 'Por entregar' | trans }}');
  600.                                 $('.icon-info').removeClass('d-none');
  601.                                 if (deliveryTime) {
  602.                                     $('.deliveryTime').removeClass('d-none');
  603.                                     $('.deliveryTimeText').text(deliveryTime + ' {{ 'En llegar' | trans }}');
  604.                                 } else {
  605.                                     console.log('No hay info en el PIM');
  606.                                 }
  607.                             }
  608.                         } else {
  609.                             $('.instock').removeClass('d-none');
  610.                         }
  611.                     } else {
  612.                         if (deliveryTime) {
  613.                             $('.deliveryTime').removeClass('d-none');
  614.                             $('.deliveryTimeText').text(deliveryTime + (lang === 'en' ? ' To arrive' : ' En llegar'));
  615.                         } else {
  616.                             console.log('No hay info en el PIM');
  617.                         }
  618.                         $('.outstock').removeClass('d-none');
  619.                     }
  620.                 }
  621.             });
  622.             //PRODUCT BUNDLE
  623.             let buttons = document.getElementsByClassName("btn-add-product");
  624.             let idsArray = [];
  625.             for (let i = 0; i < buttons.length; i++) {
  626.                 buttons[i].addEventListener("click", function() {
  627.                     let id = this.getAttribute("id");
  628.                     let index = idsArray.indexOf(id);
  629.                     if (index !== -1) {
  630.                         idsArray.splice(index, 1);
  631.                         this.classList.remove("selected");
  632.                         this.classList.add("deselected");
  633.                         this.textContent = "Seleccionar";
  634.                     } else {
  635.                         idsArray.push(id);
  636.                         this.classList.add("selected");
  637.                         this.classList.remove("deselected");
  638.                         this.textContent = "Seleccionado";
  639.                     }
  640.                     if ( Array.isArray(idsArray) && idsArray.length){
  641.                         $('.add-ids-of-products').removeAttr('disabled');
  642.                     } else {
  643.                         $('.add-ids-of-products').attr('disabled', true);
  644.                     }
  645.                 });
  646.             }
  647.             $('.add-ids-of-products').click(function() {
  648.                 let productsIds = JSON.stringify(idsArray); // Convert the array to a JSON string
  649.                 let mainProductId = $('.add-item-cart').attr('id');
  650.                 let mainProductQtyValue = $('.product-form__input').val();
  651.                 $.ajax({
  652.                     url: '/add-to-cart-products-array-ajax',
  653.                     type: 'POST',
  654.                     dataType: 'JSON',
  655.                     data: {
  656.                         mainProductId : mainProductId,
  657.                         mainProductQtyValue : mainProductQtyValue,
  658.                         ids: productsIds
  659.                     }, // Pass the data as an object with a key-value pair
  660.                     success: function(data, status) {
  661.                         if(data.success === true) {
  662.                             $('.add-ids-of-products').addClass('opacity-50')
  663.                             $('.site-cart-count').text(data.itemsOnCart);
  664.                             $('.btn-minicart').click();
  665.                             $('#minicart-drawer').modal('show');
  666.                         } else {
  667.                             alert(data.error);
  668.                         }
  669.                     },
  670.                     error: function(xhr, desc, err) {
  671.                         console.log("error");
  672.                     }
  673.                 });
  674.             });
  675.         </script>
  676.     {% endif %}
  677.     <script>
  678.         let relatedProducts = '{{ 'related-products' | trans | raw }}';
  679.         let relatedProductsDescription = '{{ 'related-products-description' | trans | raw }}';
  680.     </script>
  681.     <script src="{{ asset('assets/js/shop/product-detail.js') }}"></script>
  682.     {#  if product not have Errors load the Datatable  #}
  683.     {% if not haveProductErrors %}
  684.         <script src="{{ asset('../assets/js/dataTables/TableProduct.js') }}"></script>
  685.     {% endif %}
  686. {% endblock %}