templates/product/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  5.     {% do pimcore_head_title().set(product.codice ~ " - " ~ product.categories[0].name ~ " | Busetto") %}
  6.     {% do pimcore_head_meta().setDescription(metaDescription, 160) %}
  8.     {% set breadcrumbData = product.getCategoryBreadcrumb() %}
  9.     {% set breadcrumb = "" %}
  10.     {% set prelocal = "" %}
  11.     {% set precat = "" %}
  12.     {% if breadcrumbData is not empty %}
  13.         {% if app.request.locale == 'it' %}
  14.             {% set prelocal = "/it/prodotti/" %}
  15.             {% set precat = "/ Prodotti " %}
  16.         {% elseif app.request.locale == 'en' %}
  17.             {% set prelocal = "/en/products/" %}
  18.             {% set precat = "/ Products " %}
  19.         {% endif %}
  20.         {% set breadcrumb = precat ~ '/ <a href="' ~ prelocal ~ breadcrumbData.url ~ '">' ~ breadcrumbData.name ~ '</a> ' %}
  21.     {% endif %}
  23. <main role="main" class="single-product mt-100 pt-0 pt-lg-100">
  24.     <div class="fs-15 breadcrumbs mb-10 mx-10 mx-md-40 mx-lg-70">
  25.         <a href="/">{{ 'Home'|trans }}</a> {{ breadcrumb|raw }}/ {{ product.nome }}
  26.     </div>
  28.   {{ pimcore_areablock("areaBlock") }}
  30.   <div class="pb-20 mx-10 mx-md-40 mx-lg-70 ">
  31.     <div class="row gx-0 gx-lg-70">
  32.       <div class="col-12 col-xl-7">
  34.         <!--{# start swiper product details #}-->
  35.         <div class="d-flex flex-column flex-lg-row gallery-product">
  36.           <div class="col-12 col-lg-2 order-2 order-lg-1 my-30 my-lg-0">
  37.             <div class="swiper swiper-thumbs">
  38.               <div class="swiper-wrapper">
  39.                   {% if product.fotoPricipale is not empty %}
  40.                       <div class="swiper-slide thumb p-10" style="background-image:url({{ product.fotoPricipale.getThumbnail("product_thumbnail_gallery").getPath() }})">
  41.                           <!-- {{ product.fotoPricipale.getThumbnail("product_thumbnail_gallery").getHtml()|raw }} -->
  42.                       </div>
  43.                   {% endif %}
  44.                   {% if product.foto2 is not empty %}
  45.                     <div class="swiper-slide thumb p-5" style="background-image:url({{ product.foto2.getThumbnail("product_thumbnail_gallery").getPath() }})">
  46.                         <!-- {{ product.foto2.getThumbnail("product_thumbnail_gallery").getHtml()|raw }} -->
  47.                     </div>
  48.                   {% endif %}
  49.                   {% if product.foto3 is not empty %}
  50.                       <div class="swiper-slide thumb p-5" style="background-image:url({{ product.foto3.getThumbnail("product_thumbnail_gallery").getPath() }})">
  51.                           <!-- {{ product.foto3.getThumbnail("product_thumbnail_gallery").getHtml()|raw }} -->
  52.                       </div>
  53.                   {% endif %}
  54.                   {% if product.foto4 is not empty %}
  55.                       <div class="swiper-slide thumb p-5" style="background-image:url({{ product.foto4.getThumbnail("product_thumbnail_gallery").getPath() }})">
  56.                           <!-- {{ product.foto4.getThumbnail("product_thumbnail_gallery").getHtml()|raw }} -->
  57.                       </div>
  58.                   {% endif %}
  59.               </div>
  60.             </div>
  61.           </div>
  62.           <div class="ms-0 ms-lg-20 col-12 col-lg-10 order-1 order-lg-2 p-5 position-relative">
  63.               {% if product.url3d %}
  64.                   <div class="banner3d-container">
  65.                     <a href="{{ product.url3d }}" class="banner3d" target="_blank">
  66.                       <span>{{ 'TEXT3D'|trans|raw }}</span>
  67.                     </a>
  68.                   </div>
  69.               {% endif %}
  70.             <div class="swiper swiper-slider">
  71.               <div class="swiper-wrapper">
  72.                   {% if product.fotoPricipale is not empty %}
  73.                     <div class="swiper-slide">
  74.                       <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ product.fotoPricipale.thumbnail('product_main') }}" class="d-block d-lg-none">
  75.                         <div class=" position-absolute top-0 end-0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 17 17"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg></div>
  76.                       </a>
  77.                       {% if product.fotoPricipale.getMetadata('alt') is not null and product.fotoPricipale.getMetadata('alt') is not empty %}
  78.                           {{ product.fotoPricipale.getThumbnail("product_main").getHtml()|raw }}
  79.                       {% else %}
  80.                           {% set alt_image = "Busetto " ~ product.codice ~ " " ~ product.descrizione|split(". ")[0] ~ " 1"  %}
  81.                           {{ product.fotoPricipale.thumbnail("product_main").html({'alt': alt_image})|raw }}
  82.                       {% endif %}
  83.                     </div>
  84.                   {% endif %}
  85.                   {% if product.foto2 is not empty %}
  86.                       <div class="swiper-slide">
  87.                         <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ product.foto2.thumbnail('product_main') }}" class="d-block d-lg-none">
  88.                           <div class=" position-absolute top-0 end-0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 17 17"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg></div>
  89.                         </a>
  90.                         {% if product.foto2.getMetadata('alt') is not null and product.foto2.getMetadata('alt') is not empty %}
  91.                             {{ product.foto2.getThumbnail("product_main").getHtml()|raw }}
  92.                         {% else %}
  93.                             {% set alt_image = "Busetto " ~ product.codice ~ " " ~ product.descrizione|split(". ")[0] ~ " 2"  %}
  94.                             {{ product.foto2.thumbnail("product_main").html({'alt': alt_image})|raw }}
  95.                         {% endif %}
  96.                       </div>
  97.                   {% endif %}
  98.                   {% if product.foto3 is not empty %}
  99.                       <div class="swiper-slide">
  100.                         <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ product.foto3.thumbnail('product_main') }}" class="d-block d-lg-none">
  101.                           <div class=" position-absolute top-0 end-0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 17 17"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg></div>
  102.                         </a>
  103.                         {% if product.foto3.getMetadata('alt') is not null and product.foto3.getMetadata('alt') is not empty %}
  104.                             {{ product.foto3.getThumbnail("product_main").getHtml()|raw }}
  105.                         {% else %}
  106.                             {% set alt_image = "Busetto " ~ product.codice ~ " " ~ product.descrizione|split(". ")[0] ~ " 3"  %}
  107.                             {{ product.foto3.thumbnail("product_main").html({'alt': alt_image})|raw }}
  108.                         {% endif %}
  109.                       </div>
  110.                   {% endif %}
  111.                   {% if product.foto4 is not empty %}
  112.                       <div class="swiper-slide">
  113.                         <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ product.foto4.thumbnail('product_main') }}" class="d-block d-lg-none">
  114.                           <div class=" position-absolute top-0 end-0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 17 17"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg></div>
  115.                         </a>
  116.                         {% if product.foto4.getMetadata('alt') is not null and product.foto4.getMetadata('alt') is not empty %}
  117.                             {{ product.foto4.getThumbnail("product_main").getHtml()|raw }}
  118.                         {% else %}
  119.                             {% set alt_image = "Busetto " ~ product.codice ~ " " ~ product.descrizione|split(". ")[0] ~ " 4"  %}
  120.                             {{ product.foto4.thumbnail("product_main").html({'alt': alt_image})|raw }}
  121.                         {% endif %}
  122.                       </div>
  123.                   {% endif %}
  124.               </div>
  125.               <div class="swiper-pagination"></div>
  126.             </div>
  128.             <!-- Modale per l'immagine -->
  129.             <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
  130.                 <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
  131.                     <div class="modal-content rounded-0">
  132.                         <div class="modal-header border-0">
  133.                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  134.                         </div>
  135.                         <div class="modal-body" id="modalImageContainer">
  136.                           <!-- image container -->
  137.                         </div>
  138.                     </div>
  139.                 </div>
  140.             </div>
  144.           </div>
  145.         </div>
  146.         <!--{# end swiper product details #}-->
  148.       </div>
  149.       <div class="col-12 col-xl-5 mb-30">
  150.         {% include '/inc/social-share.html.twig' %}
  151.         <h1>{{ product.nome }}</h1>
  152.         <p class="m-0">{{ product.descrizione|raw }}</p>
  153.         {% if product.tag is not empty %}
  154.         <div class="tags d-flex gap-10 mt-10">
  155.           {% for tag in product.tag %}
  156.           <span class="tag border border-deep-gray px-10 rounded-4">{{ tag.name }}</span>
  157.           {% endfor %}
  158.         </div>
  159.         {% endif %}
  160.         <div class="downloads d-flex gap-50 my-80">
  161.           {# <a href="#" class="download"><i class="fa fa-download me-10"></i>Scarica scheda tecnica</a>
  162.           <a href="#" class="download"><i class="fa fa-download me-10"></i>Scarica catalogo materiali</a> #}
  163.         </div>
  164.         {% if product.famiglia is not empty %}
  165.         <h4>{{ 'Nella stessa collezione'|trans }}</h4>
  166.         <div class="category-products d-flex gap-20">
  167.           <div class="swiper swiper-slider pb-40">
  168.             <div class="swiper-wrapper">
  169.               {% for prodotto in product.famiglia %}
  170.               <div class="swiper-slide">
  171.                 <a href="{{ prodotto.url[0].slug }}" class="product text-center fs-14 col-6 col-md-3">
  172.                   <div class="image p-10">
  173.                       {% if prodotto.fotoPricipale is not empty %}
  174.                           <!--<img src="/assets/images/temp/chairs/s035.jpg" alt="s035" class="w-100 m-auto d-block pb-20">-->
  175.                           {{ prodotto.fotoPricipale.getThumbnail("product_thumbnail_family").getHtml()|raw }}
  176.                       {% else %}
  177.                           <img src="/busetto-placeholder.jpg" alt="" class="w-100 m-auto d-block pb-20">
  178.                       {% endif %}
  179.                   </div>
  180.                   <span class="fw-bold d-inline-block w-100 text-center">{{ prodotto.nome }}</span>
  181.                 </a>
  182.               </div>
  183.               {% endfor %}
  184.             </div>
  185.             <div class="swiper-pagination"></div>
  186.           </div>
  187.         </div>
  188.         {% endif %}
  189.       </div>
  190.     </div>
  191.     <ul class="nav nav-underline mb-3 justify-content-between justify-content-lg-start gap-lg-80 border-bottom border-light-gray" role="tablist" id="specs-tabs" style="position:relative; z-index: 1;">
  192.       <li class="nav-item" role="presentation">
  193.         <a class="h3 nav-link m-0 p-0 active" id="size-lnk" data-mdb-toggle="tab" href="#size-tab" role="tab"
  194.           aria-controls="size-tab" aria-selected="true">{{ 'Dimensioni'|trans }}</a>
  195.       </li>
  196.         {% if rivestimenti is not empty %}
  197.       <li class="nav-item" role="presentation">
  198.         <a class="h3 nav-link m-0 p-0" id="coatings-lnk" data-mdb-toggle="tab" href="#coatings-tab" role="tab"
  199.           aria-controls="coatings-tab" aria-selected="false" data-catids="{{ rivestimenti }}" data-loc="{{ app.request.locale }}">{{ 'Rivestimenti'|trans }}</a>
  200.       </li>
  201.         {% endif %}
  202.         {% if finiture is not empty %}
  203.       <li class="nav-item" role="presentation">
  204.         <a class="h3 nav-link m-0 p-0" id="finishes-lnk" data-mdb-toggle="tab" href="#finishes-tab" role="tab"
  205.           aria-controls="finishes-tab" aria-selected="false" data-catids="{{ finiture }}" data-loc="{{ app.request.locale }}">{{ 'Finiture'|trans }}</a>
  206.       </li>
  207.         {% endif %}
  208.     </ul>
  209.     <!-- Tabs navs -->
  211.     <!-- Tabs content -->
  212.     <div class="tab-content pb-40">
  213.       <div class="tab-pane fade show active" id="size-tab" role="tabpanel" aria-labelledby="size-lnk">
  214.         {% include 'product/dimensioni.html.twig' %}
  215.       </div>
  216.       <div class="tab-pane fade" id="coatings-tab" role="tabpanel" aria-labelledby="coatings-lnk">
  217.           {% include 'product/rivestimenti.html.twig' %}
  218.       </div>
  219.       <div class="tab-pane fade" id="finishes-tab" role="tabpanel" aria-labelledby="finishes-lnk">
  220.           {% include 'product/finiture.html.twig' %}
  221.       </div>
  222.     </div>
  223.     <!-- Tabs content -->
  225.     {% if product.correlati is not empty %}
  226.     <div class="row pt-40 pb-80 border-top related-products">
  227.       <h3 class="text-center">{{ 'Potrebbero interessarti'|trans }}</h3>
  228.       <div class="related-products d-flex gap-20">
  229.         <div class="swiper swiper-slider pb-40">
  230.           <div class="swiper-wrapper">
  231.             {% for prodotto in product.correlati %}
  232.             <div class="swiper-slide">
  233.               <a href="{{ prodotto.url[0].slug }}" class="product text-center fs-14 col-6 col-md-3 col-6 col-md-3">
  234.                 <div class="image p-10 p-md-30">
  235.                     {% if prodotto.fotoPricipale is not empty %}
  236.                         <!--<img src="/assets/images/temp/chairs/s035.jpg" alt="s035" class="w-100 m-auto d-block pb-20">-->
  237.                         {{ prodotto.fotoPricipale.getThumbnail("product_related").getHtml()|raw }}
  238.                     {% else %}
  239.                     <picture>
  240.                         <img src="/busetto-placeholder.jpg" alt="" class="w-100 m-auto d-block pb-20">
  241.                         </picture>
  242.                     {% endif %}
  243.                 </div>
  244.                 <span class="fw-bold d-inline-block w-100 text-center">{{ prodotto.nome }}</span>
  245.               </a>
  246.             </div>
  247.             {% endfor %}
  248.           </div>          
  249.             <div class="swiper-pagination"></div>
  250.         </div>
  251.       </div>
  252.     </div>
  253.     {% endif %}
  258.   </div>
  259. </main>
  261. <style>
  262. .zoom-container {
  263.     position: relative;
  264.     overflow: auto; /* Abilita lo scrolling */
  265.     width: 100%;
  266.     height: 100%;
  267.     touch-action: auto; /* Permette il pinch-to-zoom nativo */
  268. }
  270. .zoom-image {
  271.     display: flex;
  272.     justify-content:center;
  273.     align-items:center;
  274.     width: 100%;
  275.     height: 100%;
  276.     max-width: none;
  277.     max-height: none;
  278.     object-fit: contain;
  279.     cursor: grab;
  280.     transform: scale(1); 
  281.     transition: transform 0.2s ease;
  282. }
  283. </style>
  284. {% do pimcore_head_script().appendFile(swiper_js) %}    
  285. <script>
  286.   document.addEventListener("DOMContentLoaded", (event) => {
  287.   var thumbsSwiper = new Swiper('.gallery-product .swiper-thumbs', {
  288.     slidesPerView: '4',
  289.     direction: 'horizontal',
  290.     spaceBetween: 10,    
  291.     //preventClicks: false,
  292.     //preventClicksPropagation: false,
  293.     //simulateTouch: false,
  294.     pagination: {
  295.       el: '.swiper-pagination',
  296.       type: 'bullets',
  297.       clickable: true,
  298.     },
  299.     breakpoints: {
  300.       992: {
  301.         slidesPerView: 'auto',
  302.         direction: 'vertical',
  303.         spaceBetween: 20,
  304.       }
  305.     }
  306.   });
  307.   var slider = new Swiper('.gallery-product .swiper-slider', {
  308.     slidesPerView: 1,
  309.     spaceBetween: 0,
  310.     //preventClicks: false,
  311.     //preventClicksPropagation: false,
  312.     //simulateTouch: false,
  313.     thumbs: {
  314.       swiper: thumbsSwiper,
  315.     }
  316.   });
  318.   var categorySwiper = new Swiper('.category-products .swiper-slider', {
  319.     slidesPerView: 2,
  320.     spaceBetween: 20,
  321.     //preventClicks: false,
  322.     //preventClicksPropagation: false,
  323.     //simulateTouch: false,
  324.     pagination: {
  325.       el: '.swiper-pagination',
  326.       type: 'bullets',
  327.       clickable: true,
  328.     },
  329.     breakpoints: {
  330.       992: {
  331.         slidesPerView: 4,
  332.       }
  333.     }
  334.   });
  336.   var relatedSwiper = new Swiper('.related-products .swiper-slider', {
  337.     slidesPerView: 2,
  338.     spaceBetween: 20,
  339.     //preventClicks: false,
  340.     //preventClicksPropagation: false,
  341.     //simulateTouch: false,
  342.     pagination: {
  343.       el: '.swiper-pagination',
  344.       type: 'bullets',
  345.       clickable: true,
  346.     },
  347.     breakpoints: {
  348.       992: {
  349.         slidesPerView: 4,
  350.       }
  351.     }
  352.   });
  354.   const triggerTabList = document.querySelectorAll('#specs-tabs a');
  355.   triggerTabList.forEach(triggerEl => {
  356.     const tabTrigger = new bootstrap.Tab(triggerEl);
  357.     triggerEl.addEventListener('click', event => {
  358.       event.preventDefault();
  359.       tabTrigger.show();
  360.     });
  361.   });
  363.   // modal - image zoom
  364.   const modalImageContainer = document.getElementById('modalImageContainer');
  365.   document.querySelectorAll('.swiper-slide a[data-bs-toggle="modal"]').forEach(function (link) {
  366.     link.addEventListener('click', function () {
  367.       // Ottieni l'immagine dal data-attribute
  368.       const image = this.getAttribute('data-image');
  369.       const imageHtml = `<img src="${image}" alt="zoom immagine" class="zoom-image" />`;
  370.       if (imageHtml) {
  371.           // Aggiorna il contenuto del modale
  372.           modalImageContainer.innerHTML = '<div class="zoom-container">'+imageHtml+'</div>';
  373.       }
  374.     });
  375.   });
  376. });
  378. </script>
  379. {% endblock %}