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 %}
  34.     {% set defaultPrice = app_product_default_price(product) %}
  35.     {% set attributesRows = app_product_attributes_rows(product, data) %}
  36.     {% set typesRows = app_product_types_rows(product, data) %}
  37.     {% set documents = app_product_documents(product) %}
  38.     {% set link = product.getDetailUrl({'document': document, 'prefix':app.request.locale}) %}
  39.     {% set title = product.getName() %}
  40.     {% set empresa = pimcore_website_config('empresa') %}
  41.     {% set titlePostFix = empresa.getTitle() %}
  42.     {% do pimcore_head_title().set(title ~ ' :: ' ~ titlePostFix) %}
  43.     {% if product.getSeodescription is not empty %}
  44.         {% do pimcore_head_meta().appendName('description', product.getSeodescription()) %}
  45.     {% endif %}
  46.     {% do pimcore_head_link({rel: 'canonical', href: app.request.schemeAndHttpHost ~ link }) %}
  47.                 <!--Breadcrumbs-->
  48.             {% set lang = app.request.getLocale() %}
  49.             <input type="hidden" class="lang" lang="{{ lang }}">
  50.                 <div class="breadcrumbs-wrapper text-uppercase">
  51.                     <div class="container">
  52.                         <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>
  53.                     </div>
  54.                 </div>
  55.                 <!--End Breadcrumbs-->
  57.                 <!--Main Content-->
  58.                 <div class="container">
  59.                     <!--Product Content-->
  60.                     <div class="product-single">
  61.                         <div class="row">
  62.                             <div class="col-lg-6 col-md-6 col-sm-12 col-12">
  63.                                 {% set image = product.getFirstImageAsset() %}
  64.                                 {% set hasVariantKits = product.hasVariantKits() %}
  65.                                 <div class="product-details-img product-details-img-indaba product-horizontal-style clearfix mb-3 mb-md-0">
  66.                                     <div class="zoompro-wrap product-zoom-right product-zoom-right-indaba w-100 p-0">
  67.                                         {% if image is not null %}
  69.                                         <div class="kit-icon-container-product {% if not kit and not hasVariantKits %} d-none {% endif%}" id="previewKitIcon">
  70.                                             <img src="{{ asset(pimcore_asset_by_path('/iconos/kit-icon.png').thumbnail('IconKit')) }}">
  71.                                         </div>
  73.                                         <div class="zoompro-span img-father"><img class="img-product" id="zoompro" {# class="zoompro" #} src="{{ image.thumbnail('ProductImages') }}" data-zoom-image="" alt="product" /></div>
  74.                                         {% endif %}
  75.                                     </div>
  76.                                 </div>
  77.                             </div>
  79.                             <div class="col-lg-6 col-md-6 col-sm-12 col-12 product-info-container">
  80.                                 <!-- Product Info -->
  81.                                 <div class="product-single__meta">
  82.                                     {% if product.getName is not empty %}
  83.                                         <h1 class="product-single__title">{{ product.getName }}</h1>
  84.                                     {% endif %}
  85.                                     <!-- Product Info -->
  86.                                     {% if is_authenticated %}
  87.                                     <div class="prInfoRow product-info mt-2 d-flex-wrap">
  88.                                         <p class="product-sku fs-6" style="display: {{ (haveVariants) ? 'none' : '' }};">SKU: <span class="variant-sku">{{ SKU}}</span></p>
  89.                                     </div>
  90.                                     {% endif %}
  91.                                     <!-- End Product Info -->
  92.                                     <!-- Product Price -->
  93.                                     {% if is_authenticated %}
  94.                                         <div class="product-single__price pb-1">
  95.                                             <p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
  96.                                             <span class="visually-hidden">Regular price</span>
  97.                                             <span class="product-price__sale--single">
  98.                                                 {% set originalPrice = haveDiscount ? defaultPriceWithDiscount.original_price : defaultPrice %}
  99.                                                 {% set endPrice = haveDiscount ? defaultPriceWithDiscount.end_price : defaultPrice %}
  100.                                                 {% set discountAmount = defaultPriceWithDiscount.original_price - defaultPriceWithDiscount.end_price %}
  101.                                                 {% set displayClass = haveDiscount ? '' : 'd-none' %}
  102.                                                 {% set displayClassPercent = defaultPriceWithDiscount.discount != '.00' ? '': 'd-none' %}
  103.                                                  <span class="product-price-old-price {{ displayClass }}">
  104.                                                     {{ app_helper_price_format_spain(originalPrice) }}€
  105.                                                 </span>
  106.                                                 <span class="product-price__price product-price__sale">
  107.                                                     {{ app_helper_price_format_spain(endPrice) }}€
  108.                                                 </span>
  109.                                                  <span class="discount-badge {{ displayClass }}">
  110.                                                         <span class="devider me-2">|</span>
  111.                                                         <span>{{ 'Descuento' | trans }}:</span>
  112.                                                         <span class="product-single__save-amount">
  113.                                                             <span class="money">{{ app_helper_price_format_spain(discountAmount) }}€</span>
  114.                                                         </span>
  115.                                                         <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>
  116.                                                     </span>
  117.                                             </span>
  118.                                         </div>
  119.                                         <!-- End Product Price -->
  120.                                     {% else %}
  121.                                         {# if product have propspeed brand hide price #}
  122.                                         {% if product.marca == 15663 %}
  123.                                             <div class="product-single__price pb-1">
  124.                                                 <span class="visually-hidden"></span>
  125.                                                 <span class="product-price__price product-price__sale"></span>
  126.                                             </div>
  127.                                         {% else %}
  128.                                             <div class="product-single__price pb-1">
  129.                                                     <p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
  130.                                                 <span class="visually-hidden">Regular price</span>
  131.                                                 <span class="product-price__price product-price__sale">
  132.                                                         {{ app_helper_price_format_spain(defaultPrice) }}€
  133.                                                     </span>
  134.                                             </div>
  135.                                         {% endif %}
  136.                                     {% endif %}
  137.                                 </div>
  138.                                 <!-- End Product Info -->
  139.                                 {% set longDescription = product.getLongdescription() %}
  140.                                 {% set shortDescription = product.getShortdescription() %}
  141.                                 {% set description = shortDescription is not empty ? shortDescription : longDescription %}
  143.                                 <div class="product-single__description rte">
  144.                                     {% if description matches '/<[^>]+>/' %}
  145.                                         <div class="mb-2 fs-6">
  146.                                             {% for paragraph in description | split('</p>') %}
  147.                                                 {% if paragraph | trim %}
  148.                                                     {{ paragraph | trim | raw }}</p>
  149.                                                 {% endif %}
  150.                                             {% endfor %}
  151.                                         </div>
  152.                                     {% else %}
  153.                                         <p class="mb-2 fs-6">{{ description | nl2br | raw }}</p>
  154.                                     {% endif %}
  155.                                     <div id="featuresContainer" class="{{ (kit and is_authenticated) ? '': 'd-none'}}">
  156.                                         {% if kit and is_authenticated%}
  157.                                             {% set kitTotalPrice = endPrice %}
  158.                                             <div class="border rounded-1 p-3">
  159.                                                 <div class="kit-icon-container">
  160.                                                     <img src="{{ asset(pimcore_asset_by_path('/iconos/kit-icon.png').thumbnail('IconKit')) }}">
  161.                                                 </div>
  163.                                                 <div class="row">
  164.                                                     <div class="col-9">
  165.                                                         <h3 class="mb-4" style="color: #e95144; margin-right: 30px;">{{ 'product_detail.content.kit_product_disclaimer_translations'| trans }}</h3>
  166.                                                         {% for kitProduct in kit %}
  168.                                                                 {% set defaultPriceWithDiscount = app_product_default_price_with_discount(kitProduct, userIdSage) %}
  169.                                                                 {% set haveDiscount = defaultPriceWithDiscount.original_price != defaultPriceWithDiscount.end_price  and defaultPriceWithDiscount.error is null and defaultPriceWithDiscount.end_price is not null %}
  170.                                                                 {% set defaultPrice = app_product_default_price(kitProduct) %}
  172.                                                             <div class="row" style="margin-left: 20px">
  173.                                                                 <div class="col-3">
  174.                                                                 {% set imagekit = kitProduct.getFirstImageAsset() %}
  175.                                                                 <div class="product-details-img product-details-img-indaba product-horizontal-style clearfix mb-3 mb-md-0">
  176.                                                                     <div class="zoompro-wrap product-zoom-right product-zoom-right-indaba w-100 p-0">
  177.                                                                         {% if imagekit is not null %}
  178.                                                                             <div class="zoompro-span"><img class="img-product" id="zoompro"  style="max-width: 120px" {# class="zoompro" #} src="{{ imagekit.thumbnail('ProductImages') }}" data-zoom-image="" alt="product" /></div>
  179.                                                                         {% endif %}
  180.                                                                     </div>
  181.                                                                 </div>
  182.                                                             </div>
  183.                                                                 <div class="col-9 product-info-container">
  184.                                                                 <div class="product-single__meta" style="margin-bottom: 0">
  185.                                                                 {% if kitProduct.getName is not empty %}
  186.                                                                     <h1 class="product-single__title">{{ kitProduct.getName }}</h1>
  187.                                                                 {% endif %}
  188.                                                                 <!-- Product Info -->
  189.                                                                 <div class="prInfoRow product-info mt-2 d-flex-wrap">
  190.                                                                     <p class="product-sku fs-6">SKU: <span class="variant-sku">{{ SKU}}</span></p>
  191.                                                                 </div>
  192.                                                                 <!-- End Product Info -->
  193.                                                                 <!-- Product Price -->
  194.                                                                 {% if is_authenticated %}
  195.                                                                     <div class="product-single__price pb-1">
  196.                                                                         <p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
  197.                                                                         <span class="visually-hidden">Regular price</span>
  198.                                                                         <span class="product-price__sale--single">
  199.                                                                 {% set originalPrice = haveDiscount ? defaultPriceWithDiscount.original_price : defaultPrice %}
  200.                                                                             {% set productKitEndPrice = haveDiscount ? defaultPriceWithDiscount.end_price : defaultPrice %}
  201.                                                                             {% set discountAmount = defaultPriceWithDiscount.original_price - defaultPriceWithDiscount.end_price %}
  202.                                                                             {% set displayClass = haveDiscount ? '' : 'd-none' %}
  203.                                                                             {% set displayClassPercent = defaultPriceWithDiscount.discount != '.00' ? '': 'd-none' %}
  204.                                                                             {% set kitTotalPrice = kitTotalPrice + productKitEndPrice %}
  205.                                                                  <span class="product-price-old-price {{ displayClass }}">
  206.                                                                     {{ app_helper_price_format_spain(originalPrice) }}€
  207.                                                                 </span>
  208.                                                                 <span class="product-price__price product-price__sale">
  209.                                                                     {{ app_helper_price_format_spain(productKitEndPrice) }}€
  210.                                                                 </span>
  211.                                                                  <span class="discount-badge {{ displayClass }}">
  212.                                                                         <span class="devider me-2">|</span>
  213.                                                                         <span>{{ 'Descuento' | trans }}:</span>
  214.                                                                         <span class="product-single__save-amount">
  215.                                                                             <span class="money">{{ app_helper_price_format_spain(discountAmount) }}€</span>
  216.                                                                         </span>
  217.                                                                         <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>
  218.                                                                     </span>
  219.                                                             </span>
  220.                                                                     </div>
  221.                                                                     <!-- End Product Price -->
  222.                                                                 {% else %}
  223.                                                                     {# if product have propspeed brand hide price #}
  224.                                                                     {% if kitProduct.marca == 15663 %}
  225.                                                                         <div class="product-single__price pb-1">
  226.                                                                             <span class="visually-hidden"></span>
  227.                                                                             <span class="product-price__price product-price__sale"></span>
  228.                                                                         </div>
  229.                                                                     {% else %}
  230.                                                                         <div class="product-single__price pb-1">
  231.                                                                             <p class="spacing fs-6 fw-bold" style="display: {{ (haveVariants) ? 'inline' : 'none' }};">{{ lang == 'en' ? 'FROM: ' : 'DESDE: ' }}</p>
  232.                                                                             <span class="visually-hidden">Regular price</span>
  233.                                                                             <span class="product-price__price product-price__sale">
  234.                                                                         {{ app_helper_price_format_spain(defaultPrice) }}€
  235.                                                                     </span>
  236.                                                                         </div>
  237.                                                                     {% endif %}
  238.                                                                 {% endif %}
  239.                                                             </div>
  240.                                                             </div>
  241.                                                             </div>
  242.                                                         {% endfor %}
  243.                                                         <div class="fs-5 mt-4 text-end">
  244.                                                             {{ 'product_detail.content.product_total_price_translations' | trans | upper }}:
  245.                                                             <span style="color: #e95144;">{{ app_helper_price_format_spain(kitTotalPrice) }}€</span>
  246.                                                         </div>
  247.                                                     </div>
  248.                                                 </div>
  249.                                             </div>
  250.                                         {% endif %}
  251.                                     </div>
  252.                                     <ul class="checkmarkList {{ (kit and is_authenticated) ? 'd-none': ''}}" id="parentFeatures">
  253.                                         {% if attributesRows | length > 0 or typesRows | length > 0 %}
  254.                                             <table class="table table-striped">
  255.                                                 {% for row in attributesRows %}
  256.                                                     {{ row | raw }}
  257.                                                 {% endfor %}
  258.                                                 {% for row in typesRows %}
  259.                                                     {{ row | raw }}
  260.                                                 {% endfor %}
  261.                                             </table>
  262.                                         {% endif %}
  263.                                     </ul>
  264.                                 </div>
  265.                                 <!-- Product Form -->
  266.                                 <form method="post" action="#" class="product-form form-bordered hidedropdown">
  267.                                     <!-- Product Action -->
  268.                                     <div class="product-action w-100 clearfix">
  269.                                         {% if is_authenticated %}
  270.                                             <div class="product-form__item--quantity d-flex-center mb-2">
  271.                                                 <div class="qtyField d-none" id="{{ productID }}">
  272.                                                     <a class="qtyBtn minus" href="javascript:void(0);"><i class="icon an an-minus-r" aria-hidden="true"></i></a>
  273.                                                     <input type="text" name="quantity" value="1" class="product-form__input qty rounded-0">
  274.                                                     <a class="qtyBtn plus" href="javascript:void(0);"><i class="icon an an-plus-r" aria-hidden="true"></i></a>
  275.                                                 </div>
  276.                                                 <div class="pro-stockLbl d-flex">
  277.                                                     <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>
  278.                                                     <span class=" stockLbl outstock infostock fs-6 d-none ms-3" title="Click para ver info"><i class="icon an an-times-cil"></i>
  279.                                                         <span>{{ 'product_detail.content.not_available' | trans }}</span>
  280.                                                     </span>
  281.                                                     <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>
  282.                                                     <span><i class="an an-info-cil fa-beat icon-info infostock ms-1 d-none" style="color: #0a53be"></i></span>
  283.                                                     <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>
  284.                                                 </div>
  285.                                             </div>
  286.                                             <div class="pro-stockLbl info-stock-container">
  287.                                                 <span class="stock-warehouse stock-animation mb-3 {{ haveVariants ? 'd-none':'' }}">{{'product.detail-stock_by_warehouse' | trans}}</span>
  288.                                                 <div class="stock-info-container"></div>
  289.                                             </div>
  290.                                         {% endif %}
  291.                                         {% if haveVariants %}
  292.                                             <div class="product-form__item--submit">
  293.                                                 <a href="#sizechart" class="sizelink link-underline text-uppercase ms-auto text-decoration-none">
  294.                                                     <i class="icon an an-ruler d-none"></i>
  295.                                                     <button id="btnTableVariants" type="submit" name="add" class="btn rounded btn-outline-primary product-form__cart-submit">
  296.                                                             <span>{{ 'product_detail.content.variants_table_header_translations' |trans }}</span>
  297.                                                     </button>
  298.                                                 </a>
  299.                                             </div>
  300.                                         {% endif %}
  302.                                         <div class="product-form__item--buyit clearfix add-item-cart d-none" id="">
  303.                                             <button type="button" class="btn rounded proceed-to-checkout" id="addToCartBtn">
  304.                                                 {% if lang == 'en' %}
  305.                                                     <span>Add to Cart</span>
  306.                                                 {% else %}
  307.                                                     <span>Agregar al carrito</span>
  308.                                                 {% endif %}
  309.                                             </button>
  310.                                         </div>
  312.                                     </div>
  313.                                     <!-- End Product Action -->
  314.                                 </form>
  315.                                 <!-- End Product Form -->
  316.                             </div>
  317.                         </div>
  318.                     </div>
  320.                     {# Product Bundle Button #}
  321.                     {% if  is_authenticated %}
  322.                     <!-- Modal -->
  323.                     <div class="modal fade" id="relatedProducts-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  324.                         <div class="modal-dialog modal-lg">
  325.                             <div class="modal-content">
  326.                                 <div class="modal-body">
  327.                                     {% set dataRelatedProducts = [] %}
  328.                                     {% set variantsRelatedProducts = [] %}
  329.                                     {% set showCapacityColumn = false %}
  330.                                     {% set showColorColumn = false %}
  332.                                     {% for relatedProduct in relatedProducts %}
  333.                                         {% set dataRelatedProducts = app_product_generate_data(relatedProduct) %}
  334.                                         {% set variantsRelatedProducts = variantsRelatedProducts|merge(dataRelatedProducts.variants) %}
  336.                                         {% if dataRelatedProducts.attributes['capacidad'] is defined and dataRelatedProducts.attributes['capacidad'].value is not empty %}
  337.                                             {% set showCapacityColumn = true %}
  338.                                         {% endif %}
  340.                                         {% if dataRelatedProducts.attributes['color'] is defined and dataRelatedProducts.attributes['color'].value is not empty %}
  341.                                             {% set showColorColumn = true %}
  342.                                         {% endif %}
  343.                                     {% endfor %}
  345.                                     {% if relatedProducts | length > 0 %}
  346.                                         <table class="table table-bordered border-primary product-related-table">
  347.                                             <thead>
  348.                                             <tr>
  349.                                                 <th class="text-center align-middle">{{ 'nombre' | trans }}</th>
  350.                                                 <th class="text-center align-middle">{{ 'imagen' | trans }}</th>
  352.                                                 {% if showCapacityColumn %}
  353.                                                     <th class="text-center align-middle">{{ 'capacidad' | trans }}</th>
  354.                                                 {% endif %}
  356.                                                 {% if showColorColumn %}
  357.                                                     <th class="text-center align-middle">{{ 'Color' | trans }}</th>
  358.                                                 {% endif %}
  360.                                                 <th class="text-center align-middle">{{ 'importe' | trans }}</th>
  361.                                                 <th class="text-center align-middle">{{ 'accion' | trans }}</th>
  362.                                             </tr>
  363.                                             </thead>
  364.                                             <tbody>
  365.                                             {% for variantRelatedProduct in variantsRelatedProducts %}
  366.                                                 {% set imageVariant = variantRelatedProduct.getFirstImageAsset() %}
  367.                                                 {% set endPrice = variantRelatedProduct.price %}
  368.                                                 {% set variantAttributes = app_product_generate_data(variantRelatedProduct).attributes %}
  370.                                                 <tr>
  371.                                                     <td class="text-center align-middle">{{ variantRelatedProduct.name }}</td>
  372.                                                     <td class="text-center align-middle">
  373.                                                         <img class="img-product" id="zoompro" width="50px" height="50px"
  374.                                                              src="{{ imageVariant.thumbnail('ProductImages') }}" alt="product" />
  375.                                                     </td>
  377.                                                     {% if showCapacityColumn %}
  378.                                                         <td class="text-center align-middle">
  379.                                                             {% set capacidadValue = variantAttributes['capacidad'].value %}
  380.                                                             {% if capacidadValue is not empty %}
  381.                                                                 {{ capacidadValue|first|raw }}
  382.                                                             {% endif %}
  383.                                                         </td>
  384.                                                     {% endif %}
  386.                                                     {% if showColorColumn %}
  387.                                                         <td class="text-center align-middle">
  388.                                                             {{ variantAttributes['color'].value | default('') }}
  389.                                                         </td>
  390.                                                     {% endif %}
  392.                                                     <td class="text-center align-middle">{{ app_helper_price_format_spain(endPrice) }}€</td>
  393.                                                     <td class="text-center align-middle">
  394.                                                         <button class="btn btn-primary rounded btn-add-product deselected"
  395.                                                                 id="{{ variantRelatedProduct.id }}">
  396.                                                             {{ 'seleccionar' | trans }}
  397.                                                         </button>
  398.                                                     </td>
  399.                                                 </tr>
  400.                                             {% endfor %}
  401.                                             </tbody>
  402.                                         </table>
  403.                                     {% endif %}
  404.                                 </div>
  405.                                 <div class="modal-footer">
  406.                                     <button type="button" class="btn btn-secondary rounded close-modal-of-related-products" data-bs-dismiss="modal">{{ 'no-gracias' | trans }}</button>
  407.                                     <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>
  408.                                 </div>
  409.                             </div>
  410.                         </div>
  411.                     </div>
  412.                     {% endif %}
  413.                     {# Product Bundle Button #}
  414.                     <!--Product Tabs-->
  415.                     {% include 'Shop/includes/documentsbuttons.html.twig' %}
  416.                     <!--End Product Tabs-->
  417.                 </div>
  418.                 <!--End Container-->
  419.     {% if relatedProducts | length > 0 %}
  420.         <!--You May Also Like Products-->
  421.         <section class="section product-slider pb-2">
  422.             <div class="container">
  423.                 <div class="row">
  424.                     <div class="section-header col-12">
  425.                         <h2 class="text-transform-none">{{ 'product_detail.content.title_related_products_translations' |trans }}</h2>
  426.                     </div>
  427.                 </div>
  428.                 {% include 'Shop/includes/relatedproducts.html.twig' %}
  429.             </div>
  430.         </section>
  431.         <!--End You May Also Like Products-->
  432.     {% endif %}
  434.     <!--Recently Viewed Products-->
  435.     {% if lastVisitedProducts | length > 1 %}
  436.         {% include 'Shop/includes/recentlyViewedProducts.html.twig' %}
  437.     {% endif %}
  438.     <!--End Recently Viewed Products-->
  440.     <!--Size Chart-->
  441.     {% include 'Shop/includes/articletable2.html.twig' %}
  442.     <!--End Size Chart-->
  444.     <!--Scoll Top-->
  445.     <span id="site-scroll"><i class="icon an an-chevron-up"></i></span>
  446.     <!--End Scoll Top-->
  448. {% endblock %}
  450. {% block PAGE_JS %}
  451.     {% set is_authenticated = is_granted('IS_AUTHENTICATED_FULLY') %}
  452.     {% set data = app_product_generate_data(product) %}
  453.     {% set variants = data.variants %}
  454. {#    {% set tableAttributes = app_product_variants_attributes(data) %}#}
  455.     {% set haveProductErrors = 0 %}
  456.     {# CHECK IF THE PRODUCT HAVE ERRORS #}
  457.     {% if is_authenticated %}
  458.         {% set haveProductErrors = app_product_haveError(product) %}
  459.         {# This is just so that js understand the boolean value   #}
  460.         {% if haveProductErrors %}
  461.             {% set haveProductErrors = 1 %}
  462.         {% else %}
  463.             {% set haveProductErrors = 0 %}
  464.         {% endif %}
  465.     {% endif %}
  467.     {% set companyMail = company.mail %}
  469.     {% if ( ( data.variants | length ) > 1 )  %}
  470.         {% set haveVariants =  1 %}
  471.     {% else %}
  472.         {% set haveVariants = 0 %}
  473.     {% endif %}
  476.     {% if is_authenticated %}
  478.         <script>
  479.             let title = '{{ 'titleTranslation' |trans}}'
  480.             let content = '{{ 'contentTranslation' |trans}}'
  481.             let buttonText ='{{ 'buttonTextTranslation' |trans}}'
  482.         </script>
  484.         <script>
  485.             let haveVariants = {{ haveVariants }};
  487.             $(document).ready(function () {
  489.                 let haveProductErrors = {{ haveProductErrors }} ;
  491.                 if (haveProductErrors) {
  492.                     Swal.fire({
  493.                         icon: 'warning',
  494.                         title: 'Oops...',
  495.                         showCancelButton: true,
  496.                         confirmButtonColor: '#106eea',
  497.                         cancelButtonColor: '#38b000',
  498.                         confirmButtonText: 'Entendido!',
  499.                         cancelButtonText: 'Contactar',
  500.                         html: 'La información del producto se esta actualizando, cualquier duda puede comunicarse a soporte.'
  501.                     })
  502.                     //Hide SKU, price, quantity, and add to cart button
  503.                     $('.product-price__price').hide();
  504.                     $('.product-form').hide();
  505.                     $('.proceed-to-checkout').hide();
  506.                     $('.product-sku').hide()
  507.                 }
  509.                 $('.swal2-cancel').click(function () {
  510.                     var email = '{{ companyMail }}';
  511.                     var subject = 'Soporte';
  512.                     var emailBody = 'Hi';
  513.                     window.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
  514.                 })
  516.                 // If the product doesn't have variants
  517.                 if (haveVariants === 0) {
  518.                     let qtyButton = $('.qtyField');
  519.                     //ID of the product
  520.                     let productID = qtyButton.attr('id');
  521.                     // Selected value of the quantity button
  522.                     let qtyValue = $('.product-form__input').val();
  524.                     // Display add to cart button
  525.                     $('.product-form__item--buyit').removeClass('d-none');
  526.                     // Display the quantity button
  527.                     qtyButton.removeClass('d-none');
  528.                     $('.product-form__item--buyit').attr('id',productID);
  530.                     getStockAjax(productID, qtyValue);
  531.                 }
  533.                 // Keep a reference to the button that was selected
  534.                 let selectedButton = null;
  536.                 function getPriceFormatSpain(price) {
  537.                     return parseFloat(price).toLocaleString('es-ES', {
  538.                         minimumFractionDigits: 2,
  539.                         maximumFractionDigits: 2
  540.                     });
  541.                 }
  543.                 $('table tbody').on('click', '.btn-ver-datatable', function() {
  544.                     let idVariant = $(this).attr('id');
  545.                     let qtyValue = $('.product-form__input').val();
  546.                     let qtyButton = $('.qtyField');
  547.                     let warehouseText = $('.stock-warehouse.stock-animation')
  548.                     $('.proceed-to-checkout').css('font-weight','600');
  549.                     $('.product-form__cart-submit').css('opacity','0.5');
  550.                     $('.spacing').removeClass('d-inline');
  551.                     $('.spacing').addClass('d-none');
  552.                     $('.product-form__item--buyit').removeClass('d-none');
  553.                     $('.product-form__item--buyit').attr('id',idVariant);
  555.                     $('.mfp-close').click();
  557.                     // If there is a selected button, reset its state
  558.                     if (selectedButton) {
  559.                         selectedButton.text('VER');
  560.                         selectedButton.css('filter', 'brightness(100%)');
  561.                     }
  563.                     // Change the text and style of the clicked button and save it as the selected button
  564.                     $(this).text('Seleccionado');
  565.                     $(this).css('font-weight','bold');         // Make the font bold
  566.                     $(this).css('filter','brightness(100%)');
  568.                     selectedButton = $(this);
  570.                     // This return info of variant selected
  571.                     $.ajax({
  572.                         method: 'POST',
  573.                         url: '/ajax_variant_info',
  574.                         datatype: 'json',
  575.                         data: {
  576.                             id: idVariant,
  577.                         },
  578.                         success: function (data) {
  579.                             newImageAjax(idVariant);
  581.                             // Display the quantity button
  582.                             qtyButton.removeClass('d-none');
  583.                             warehouseText.removeClass('d-none')
  584.                             // Put the id of the variant in qtyField element
  585.                             qtyButton.attr('id', idVariant);
  586.                             // Display SKU of the variant product
  587.                             $('.variant-sku').html(data.bsnCode);
  588.                             $('.product-sku').show();
  590.                             // Check if the product has discount
  591.                             const { original_price, end_price, error, discount } = data.priceWithDiscount;
  592.                             if (original_price !== end_price && error === null) {
  593.                                 // Set old price
  594.                                 $('.product-price-old-price')
  595.                                     .text(getPriceFormatSpain(original_price) + '€')
  596.                                     .removeClass('d-none');
  597.                                 $('.discount-badge').removeClass('d-none');
  599.                                 // Set new price
  600.                                 const truncatedPrice = parseFloat(end_price).toFixed(2);
  601.                                 $('.product-price__sale').text(getPriceFormatSpain(truncatedPrice) + '€');
  603.                                 // Set discount
  604.                                 const discountAmount = original_price - end_price;
  605.                                 $('.money').text(getPriceFormatSpain(discountAmount.toFixed(2)) + '€');
  607.                                 if (discount !== '.00') {
  608.                                     $('.percentage').text(getPriceFormatSpain(discount));
  609.                                     $('.percentage-span').removeClass('d-none');
  610.                                 } else {
  611.                                     $('.percentage-span').addClass('d-none');
  612.                                 }
  613.                             } else {
  614.                                 // If there is no discount or there is an error
  615.                                 $('.product-price__sale').html(data.price + '€');
  616.                                 $('.product-price-old-price').addClass('d-none');
  617.                                 $('.discount-badge').addClass('d-none');
  618.                             }
  619.                             // Update stock information
  620.                             getStock(data.stock, qtyValue, data.deliveryTime);
  621.                         },
  622.                         error: function () {
  623.                             alert('ERROR: Unable to fetch variant information.');
  624.                         }
  625.                     });
  627.                     //This returns the product kits of a variant
  628.                     $.ajax({
  629.                         method: 'POST',
  630.                         url: '/ajax_variant_kit',
  631.                         datatype: 'json',
  632.                         data: {
  633.                             id: idVariant,
  634.                         },
  636.                         success: function (data) {
  638.                             const featuresContainer = document.getElementById('featuresContainer')
  639.                             const parentFeatures = document.getElementById('parentFeatures')
  640.                             const previewKitIcon = document.getElementById('previewKitIcon')
  641.                             const descriptionIL = document.querySelector('.descriptionIL')
  642.                             const featuresIL = document.querySelector('.featuresIL')
  643.                             const features = document.querySelector('.features')
  644.                             featuresContainer.innerHTML = data
  646.                             if(data){
  647.                                 featuresContainer.classList.remove('d-none')
  648.                                 previewKitIcon.classList.remove('d-none')
  649.                                 featuresIL.classList.remove('d-none')
  650.                                 features.classList.remove('d-none')
  651.                                 parentFeatures.classList.add('d-none')
  652.                                 featuresIL.click()
  653.                             } else {
  654.                                 featuresContainer.classList.add('d-none')
  655.                                 previewKitIcon.classList.add('d-none')
  656.                                 parentFeatures.classList.remove('d-none')
  657.                                 featuresIL.classList.add('d-none')
  658.                                 features.classList.add('d-none')
  659.                                 descriptionIL.click()
  660.                             }
  661.                         },
  662.                         error: function () {
  663.                             alert('ERROR: Unable to fetch variant information.');
  664.                         }
  665.                     });
  667.                 });
  669.                 function newImageAjax(idVariant){
  670.                     // This return info of variant selected
  671.                     $.ajax({
  672.                         method: 'POST',
  673.                         url: '/ajax_productDetail_new_asset',
  674.                         datatype: 'html',
  675.                         data: {
  676.                             id: idVariant,
  677.                         },
  678.                         success: function (data) {
  679.                             $('.img-father').html(data);
  680.                         },
  681.                         error: function () {
  682.                             alert('ERROR');
  683.                         }
  684.                     });
  685.                 }
  687.                 let timer = false;
  688.                 // Detect clicks on plus and minus buttons
  689.                 $('.qtyBtn').click(function () {
  690.                     let qtyField = $(this).closest('.qtyField');
  691.                     let productID = qtyField.attr('id');
  692.                     let qtyValue = parseInt(qtyField.find('.product-form__input').val(), 10);
  694.                     // Ensure qtyValue is a valid number and greater than or equal to 1 before making request
  695.                     if (!isNaN(qtyValue) && qtyValue >= 1) {
  696.                         clearTimeout(timer);
  697.                         timer = setTimeout(getStockAjax, 300, productID, qtyValue);
  698.                     }
  699.                 });
  701.                 // Detect changes in the input field and allow only numeric values
  702.                 $('.product-form__input').on('input', function () {
  703.                     let qtyField = $(this).closest('.qtyField');
  704.                     let productID = qtyField.attr('id');
  705.                     let qtyValue = $(this).val();
  707.                     // Allow only numeric input
  708.                     qtyValue = qtyValue.replace(/\D/g, '');  // Remove any non-numeric characters
  709.                     $(this).val(qtyValue);  // Update the input field with the cleaned value
  711.                     // Parse the value as an integer (but allow empty input while typing)
  712.                     if (qtyValue !== "") {
  713.                         qtyValue = parseInt(qtyValue, 10);
  715.                         // Ensure the value is greater than or equal to 1 before making the request
  716.                         if (!isNaN(qtyValue) && qtyValue >= 1) {
  717.                             clearTimeout(timer);
  718.                             timer = setTimeout(getStockAjax, 300, productID, qtyValue);
  719.                         }
  720.                     }
  721.                 });
  724.                 function getStockAjax(productID, qtyValue) {
  725.                     $.ajax({
  726.                         method: 'POST',
  727.                         url: '/ajax_productDetail_getStock',
  728.                         datatype: 'json',
  729.                         data: {
  730.                             id: productID
  731.                         },
  732.                         success: function (data) {
  733.                             getStock(data.stock, qtyValue, data.deliveryTime);
  734.                         },
  735.                         error: function () {
  736.                             alert('ERROR');
  737.                         }
  738.                     });
  739.                 }
  742.                 $('.infostock').click(function () {
  743.                     // Obtén el idioma del usuario de la variable lang
  744.                     const lang = $('.lang').attr('lang');
  746.                     Swal.fire({
  747.                         icon: 'info',
  748.                         title: title,
  749.                         confirmButtonColor: '#106eea',
  750.                         confirmButtonText: buttonText,
  751.                         html: content
  752.                     });
  753.                 });
  756.                 function getStock(stock, qtyField, deliveryTime) {
  757.                     $('.preorder.nostock').addClass('d-none');
  758.                     $('.stockText').text(stock.total + ' {{ 'En stock' | trans }}');
  759.                     $('.instock').addClass('d-none');
  760.                     $('.outstock').addClass('d-none');
  761.                     $('.differenceText').text('{{ 'Por entregar' |trans }}');
  762.                     $('.deliveryTime').addClass('d-none');
  763.                     $('.icon-info').addClass('d-none');
  764.                     const lang = $('.lang').attr('lang');
  766.                     let diferrence = ((stock.total - qtyField) * -1);
  768.                     let warehouseHtml = '';
  770.                     if (stock.warehouse[3] !== undefined || stock.warehouse[5] !== undefined) {
  771.                         warehouseHtml += '<div class="stock-info-table card p-2 position-absolute">';
  772.                         warehouseHtml += '<div class="header text-center mb-2">{{ 'Stock available in' | trans }}:</div>';
  774.                         if (stock.warehouse[3] !== undefined) {
  775.                             warehouseHtml += '<div class="row no-gutters first-row">';
  776.                             warehouseHtml += '<div class="col-6 bg-primary text-white">{{ 'warehouse_barcelona' | trans }}</div>';
  777.                             warehouseHtml += '<div class="col-6 bg-white text-dark">' + stock.warehouse[3] + '</div>';
  778.                             warehouseHtml += '</div>';
  779.                         }
  781.                         if (stock.warehouse[5] !== undefined) {
  782.                             warehouseHtml += '<div class="row no-gutters last-row">';
  783.                             warehouseHtml += '<div class="col-6 bg-primary text-white">{{ 'warehouse_palma' | trans}}</div>';
  784.                             warehouseHtml += '<div class="col-6 bg-white text-dark">' + stock.warehouse[5] + '</div>';
  785.                             warehouseHtml += '</div>';
  786.                         }
  788.                         warehouseHtml += '</div>';
  789.                     }
  791.                     $('.stock-info-container').html(warehouseHtml);
  793.                     const stockContainer = document.querySelector('.stock-animation');
  794.                     const stockTable = document.querySelector('.stock-info-table');
  796.                     stockContainer.addEventListener('mouseover', function() {
  797.                         stockTable.style.display = 'flex';
  798.                     });
  800.                     stockContainer.addEventListener('mouseout', function() {
  801.                         stockTable.style.display = 'none';
  802.                     });
  804.                     if (stock.total > 0) {
  805.                         if (qtyField > 0) {
  806.                             if (qtyField <= stock.total) {
  807.                                 $('.instock').removeClass('d-none');
  808.                             } else {
  809.                                 $('.instock').removeClass('d-none');
  810.                                 $('.stockText').text(stock.total + ' {{ 'En stock' | trans }}');
  811.                                 $('.preorder.nostock').removeClass('d-none');
  812.                                 $('.differenceText').text(diferrence + ' {{ 'Por entregar' | trans }}');
  813.                                 $('.icon-info').removeClass('d-none');
  814.                                 if (deliveryTime) {
  815.                                     $('.deliveryTime').removeClass('d-none');
  816.                                     $('.deliveryTimeText').text(deliveryTime + ' {{ 'En llegar' | trans }}');
  817.                                 } else {
  818.                                     console.log('No hay info en el PIM');
  819.                                 }
  820.                             }
  821.                         } else {
  822.                             $('.instock').removeClass('d-none');
  823.                         }
  824.                     } else {
  825.                         if (deliveryTime) {
  826.                             $('.deliveryTime').removeClass('d-none');
  827.                             $('.deliveryTimeText').text(deliveryTime + (lang === 'en' ? ' To arrive' : ' En llegar'));
  828.                         } else {
  829.                             console.log('No hay info en el PIM');
  830.                         }
  831.                         $('.outstock').removeClass('d-none');
  832.                     }
  833.                 }
  834.             });
  837.             //PRODUCT BUNDLE
  838.             let buttons = document.getElementsByClassName("btn-add-product");
  840.             let idsArray = [];
  842.             for (let i = 0; i < buttons.length; i++) {
  843.                 buttons[i].addEventListener("click", function() {
  844.                     let id = this.getAttribute("id");
  846.                     let index = idsArray.indexOf(id);
  847.                     if (index !== -1) {
  848.                         idsArray.splice(index, 1);
  849.                         this.classList.remove("selected");
  850.                         this.classList.add("deselected");
  851.                         this.textContent = "Seleccionar";
  852.                     } else {
  853.                         idsArray.push(id);
  854.                         this.classList.add("selected");
  855.                         this.classList.remove("deselected");
  856.                         this.textContent = "Seleccionado";
  857.                     }
  859.                     if ( Array.isArray(idsArray) && idsArray.length){
  860.                         $('.add-ids-of-products').removeAttr('disabled');
  861.                     } else {
  862.                         $('.add-ids-of-products').attr('disabled', true);
  863.                     }
  865.                 });
  866.             }
  868.             $('.add-ids-of-products').click(function() {
  869.                 let productsIds = JSON.stringify(idsArray); // Convert the array to a JSON string
  870.                 let mainProductId = $('.add-item-cart').attr('id');
  871.                 let mainProductQtyValue = $('.product-form__input').val();
  873.                 // Show minicart immediately with current content
  874.                 $('#minicart-drawer').modal('show');
  875.                 
  876.                 // Show loading modal immediately
  877.                 setTimeout(() => {
  878.                     showLoadingModal();
  879.                 }, 200);
  881.                 $.ajax({
  882.                     url: '/add-to-cart-products-array-ajax',
  883.                     type: 'POST',
  884.                     dataType: 'JSON',
  885.                     data: {
  886.                         mainProductId : mainProductId,
  887.                         mainProductQtyValue : mainProductQtyValue,
  888.                         ids: productsIds
  889.                     }, // Pass the data as an object with a key-value pair
  890.                     success: function(data, status) {
  891.                         if(data.success === true) {
  892.                             $('.add-ids-of-products').addClass('opacity-50')
  893.                             $('.site-cart-count').text(data.itemsOnCart);
  894.                             $.ajax({
  895.                                 url: '/' + $('html').attr('lang') + '/shopping-header-cart',
  896.                                 type: 'POST',
  897.                                 dataType: 'html',
  898.                                 data: [],
  899.                                 success: function (cartData) {
  900.                                     $('#cart-drawer').html(cartData);
  901.                                 },
  902.                                 complete: function() {
  903.                                     Swal.close();
  904.                                 }
  905.                             });
  906.                         } else {
  907.                             alert(data.error);
  908.                             Swal.close();
  909.                         }
  910.                     },
  911.                     error: function(xhr, desc, err) {
  912.                         console.log("error");
  913.                         Swal.close();
  914.                     }
  915.                 });
  916.             });
  919.         </script>
  920.     {% endif %}
  922.     <script>
  923.         let relatedProducts = '{{ 'related-products' | trans | raw }}';
  924.         let relatedProductsDescription = '{{ 'related-products-description' | trans | raw }}';
  925.     </script>
  926.     <script src="{{ asset('assets/js/shared/loading-modal.js') }}"></script>
  927.     <script src="{{ asset('assets/js/shop/product-detail.js') }}"></script>
  929.     {#  if product not have Errors load the Datatable  #}
  930.     {% if not haveProductErrors %}
  931.         <script src="{{ asset('../assets/js/dataTables/TableProduct.js') }}"></script>
  932.     {% endif %}
  934. {% endblock %}