templates/product/partials/_product-specifications.html.twig line 1

Open in your IDE?
  1. <section class="relative py-10 md:py-20">
  2.     <div class="absolute top-0 w-full h-40 bg-blue-200 -z-10">
  3.         <!-- empty -->
  4.     </div>
  5.     <div class="container grid grid-cols-12 gap-8">
  6.         <div class="order-2 col-span-12 md:order-1 md:col-span-6">
  8.             {% if product.schematics is defined %}
  9.                 {% for image in product.schematics %}
  10.                     {% if image is not null %}
  11.                         <div class="mb-8">
  12.                             {{ image.thumbnail('default').html({
  13.                                 pictureAttributes: {
  14.                                     class: 'block object-cover object-center overflow-hidden rounded-md',
  15.                                 }
  16.                             }) | raw }}
  17.                         </div>
  18.                         {# We only display 1 image according to design, even though the product can have multiple scematics #}
  19.                         {# TODO make it a swiper oid? #}
  20.                         {% break %}
  21.                     {% endif %}
  22.                 {% endfor %}
  23.             {% endif %}
  25.             {% if printmode is not defined %}
  26.                 <div class="text-white rounded-md md:p-10 bg-blue">
  27.                     <h3 class="p-4 text-xl md:text-2xl md:p-0 md:mb-8">{{ "Downloads"|trans }}</h3>
  28.                     <div class="border-t border-white border-opacity-30">
  29.                         {% if linkToSpecificationSheet is defined %}
  30.                             <div class="flex items-center px-4 py-3 border-b border-white md:px-0 border-opacity-30">
  31.                                 <span class="mr-4">
  32.                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17"><path fill="#FFF" fill-rule="evenodd" d="M16 12.5v3.2a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1-.8-.8v-3.2h1.6v2.4h12.8v-2.4H16Zm-8 0a.797.797 0 0 0 .566-.234l3.2-3.2-1.132-1.132L8.8 9.77V.5H7.2v9.269L5.366 7.934 4.234 9.066l3.2 3.2c.15.15.354.234.566.234Z"/></svg>
  33.                                 </span>
  34.                                 <span class="font-bold md:text-lg grow">
  35.                                     {{ "Productsheet"|trans }}
  36.                                 </span>
  37.                                 <a href="{{ linkToSpecificationSheet | trimUrl }}" target="_blank" class="underline">
  38.                                     {{ "Downloaden"|trans }}
  39.                                 </a>
  40.                             </div>
  41.                         {% endif %}
  42.                     </div>
  43.                 </div>
  44.             {% endif %}
  45.         </div>
  46.         {% if product.specifications is defined %}
  47.             <div class="order-1 col-span-12 md:order-2 md:col-span-6">
  48.                 <div
  49.                     class="pt-6 pb-5 bg-gray-200 rounded-md md:pt-10 md:px-10"
  50.                     x-data="{ specificationsOpen: false }"
  51.                 >
  52.                     <h3 class="px-4 text-2xl font-bold md:px-0 md:text-4xl mb-9">
  53.                         {{ "Technische Specificaties"|trans }}
  54.                     </h3>
  56.                     {#
  57.                     Here we set the maxinum amount of specs that are shown on initial page load.
  58.                     If there are more then this amount then those will be hidden, a button will then be shown
  59.                     #}
  60.                     {% set shownSpecsOnInitialLoad = (printmode is defined) ? 8 : 9 %}
  61.                     {% set showReadMoreSpecsButton = false %}
  63.                     {% for spec in product.specifications|filter(s => s.specification_property.data.publicly_visible) %}
  64.                         {% set specificationObject = spec.specification_property.data %}
  66.                             {% if (loop.index < shownSpecsOnInitialLoad) %}
  67.                                 <div
  68.                                     class="flex justify-between px-4 md:px-8 py-4 md:rounded-md {{ cycle(['', 'bg-white'], loop.index) }}">
  69.                                         <span>{{ specificationObject.title }}</span>
  70.                                         <span>{{ spec.specification_value.data }} {{ specificationObject.unit }}</span>
  71.                                 </div>
  72.                             {% else %}
  73.                                 <div
  74.                                     class="justify-between px-4 md:px-8 py-4 md:rounded-md {{ cycle(['', 'bg-white'], loop.index) }} "
  75.                                     :class="specificationsOpen ? 'flex' : 'hidden'"
  76.                                     >
  77.                                         <span>{{ specificationObject.title }}</span>
  78.                                         <span>{{ spec.specification_value.data }} {{ specificationObject.unit }}</span>
  79.                                 </div>
  80.                             {% endif %}
  82.                         {% set showReadMoreSpecsButton = loop.index > shownSpecsOnInitialLoad %}
  83.                     {% endfor %}
  85.                     {# never show this button when printing (printmode), even though there could be more specs. #}
  86.                     {% if showReadMoreSpecsButton and printmode is not defined %}
  87.                         <div class="flex justify-center w-full mt-6">
  88.                             <button class="button button__secondary group"
  89.                                 @click="specificationsOpen = !specificationsOpen"
  90.                                 >
  91.                                     <span class="flex w-6 h-6 mr-3 transition-all bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white ">
  92.                                         <span class="flex items-center justify-center w-full h-full ">
  93.                                             <svg
  94.                                                 x-show="!specificationsOpen"
  95.                                                 class="w-3.5 shrink-0"
  96.                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="nonzero" d="M6.68 0h.024a.929.929 0 0 1 .916.915l.07 4.994 4.994.07a.93.93 0 0 1 .916.916.878.878 0 0 1-.866.89h-.024l-4.995-.07.07 4.995a.878.878 0 0 1-.89.89.93.93 0 0 1-.915-.916L5.91 7.69.914 7.62A.93.93 0 0 1 0 6.704a.878.878 0 0 1 .89-.89l4.994.07L5.814.89A.878.878 0 0 1 6.68 0Z"/>
  97.                                             </svg>
  98.                                             <svg
  99.                                                 x-show="specificationsOpen"
  100.                                                 class="w-3.5 shrink-0"
  101.                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 3"><path fill="currentColor" fill-rule="nonzero" d="M12.684.979a.929.929 0 0 1 .916.916.878.878 0 0 1-.866.89h-.024L.915 2.62A.929.929 0 0 1 0 1.704a.878.878 0 0 1 .89-.89l11.794.165Z"/>
  102.                                             </svg>
  103.                                         </span>
  104.                                     </span>
  105.                                     <span x-show="!specificationsOpen">{{ "Alle technische specificaties tonen"|trans }}</span>
  106.                                     <span x-show="specificationsOpen">{{ "Minder specificaties tonen"|trans }}</span>
  107.                             </button>
  108.                         </div>
  109.                     {% endif %}
  110.                 </div>
  111.             </div>
  112.         {% endif %}
  113.     </div>
  114. </section>