templates/product/show.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/app.html.twig' %}
  3. {% block PAGE_CSS %}
  4. {% endblock %}
  6. {% block CONTENT_MID %}
  7.     <div class="bg-white">
  8.         <div class="pt-4 max-w-7xl mx-auto lg:flex items-center justify-between space-y-2 lg:space-y-0 lg:space-x-2 px-4 sm:px-6 lg:px-8">
  9.             <ol role="list" class="max-w-3xl flex items-center space-x-2">
  10.                 <li>
  11.                     <div class="flex items-center">
  12.                         <a href="{{ navStartNode }}/" class="mr-2 text-sm font-medium text-gray-900">Home</a>
  13.                         <svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-4 text-gray-300">
  14.                             <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
  15.                         </svg>
  16.                     </div>
  17.                 </li>
  19.                 <li>
  20.                     <div class="flex items-center">
  21.                         <a href="{{ navStartNode }}/" class="mr-2 text-sm font-medium text-gray-900">{{ 'Produkte' | trans }}</a>
  22.                         <svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-4 text-gray-300">
  23.                             <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
  24.                         </svg>
  25.                     </div>
  26.                 </li>
  28.                 <li class="text-sm">
  29.                     <a href="{{ product.slug is defined ? product.slug : '#' }}" aria-current="page" class="font-medium text-brand-600 hover:text-gray-600">{{ product.name is defined ? product.name : '' }}</a>
  30.                 </li>
  31.             </ol>
  32.         </div>
  34.         <div class="mx-auto max-w-2xl pb-16 px-4 sm:pb-24 sm:px-6 lg:max-w-7xl lg:px-8 pt-4 space-y-8">
  35.             <div class="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
  36.                 <!-- Image gallery -->
  37.                 <div class="flex flex-1 flex-col" x-data="{ showTab: 1 }">
  38.                     <!-- Image selector -->
  40.                     <div class="aspect-w-1 aspect-h-1 w-full bg-gray-100 rounded-lg">
  41.                         <!-- Tab panel, show/hide based on tab state. -->
  42.                         <div x-cloak x-show="showTab === 1" class="flex justify-center items-center" id="tabs-1-panel-1" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
  43.                             {{ (product.mainImage is not empty ? product.mainImage.thumbnail('productThumbnail').html : pimcore_asset_by_path('/System/missing.png').thumbnail('productThumbnail').html ) | raw }}
  45.                             {% if product.discontinued %}
  46.                                 <span class="absolute top-2 right-2 bg-brand-600 text-center text-white text-xs rounded-full px-2 py-1">Auslaufartikel</span>
  47.                             {% endif %}
  48.                         </div>
  50.                         {% for key, otherImage in product.otherImages %}
  51.                             <div x-cloak x-show="showTab === {{ key+2 }}" class="flex justify-center items-center" id="tabs-1-panel-{{ key+2 }}" aria-labelledby="tabs-1-tab-{{ key+2 }}" role="tabpanel" tabindex="0">
  52.                                 {{ otherImage.thumbnail('productThumbnail').html | raw }}
  54.                                 {% if product.discontinued %}
  55.                                     <span class="absolute top-2 right-2 bg-brand-600 text-center text-white text-xs rounded-full px-2 py-1">Auslaufartikel</span>
  56.                                 {% endif %}
  57.                             </div>
  58.                         {% endfor %}
  59.                         {% for key, detailImage in product.detailView %}
  60.                             <div x-cloak x-show="showTab === {{ key+50 }}" class="flex justify-center items-center" id="tabs-1-panel-{{ key+50 }}" aria-labelledby="tabs-1-tab-{{ key+50 }}" role="tabpanel" tabindex="0">
  61.                                 {{ detailImage.thumbnail('productThumbnail').html | raw }}
  63.                                 {% if product.discontinued %}
  64.                                     <span class="absolute top-2 right-2 bg-brand-600 text-center text-white text-xs rounded-full px-2 py-1">Auslaufartikel</span>
  65.                                 {% endif %}
  66.                             </div>
  67.                         {% endfor %}
  68.                     </div>
  70.                     <div class="mx-auto mt-6 w-full max-w-2xl lg:max-w-none relative"
  71.                          x-data="{start: true, end: false}">
  72.                         <div class="grid auto-cols-[25%] grid-flow-col gap-6 overflow-x-auto py-2"
  73.                              x-ref="slider" x-on:scroll.debounce="$refs.slider.scrollLeft == 0 ? start = true : start = false; Math.abs(($refs.slider.scrollWidth - $refs.slider.offsetWidth) - $refs.slider.scrollLeft) < 5 ? end = true : end = false;"
  74.                              aria-orientation="horizontal" role="tablist">
  75.                             <button x-on:click="showTab = 1" class="relative flex items-center justify-center h-32 bg-gray-100 hover:bg-gray-50 border-2 focus:outline-none rounded-md cursor-pointer select-none transition ease duration-300" :class="{'border-brand-500': showTab === 1, 'border-transparent': showTab !== 1}" aria-controls="tabs-1-panel-1" role="tab" type="button">
  76.                                 <span class="sr-only">Main Product Image</span>
  77.                                 <span class="absolute flex inset-0 overflow-hidden rounded-md">
  78.                                         {{ (product.mainImage is not empty ? product.mainImage.thumbnail('productThumbnail').html : pimcore_asset_by_path('/System/missing.png').thumbnail('productThumbnail').html ) | raw }}
  79.                                     </span>
  80.                             </button>
  82.                             {% for key, otherImage in product.otherImages %}
  83.                                 <button x-on:click="showTab = {{ key+2 }}" class="relative flex items-center justify-center h-32 bg-gray-100 hover:bg-gray-50 border-2 focus:outline-none rounded-md cursor-pointer select-none transition ease duration-300" :class="{'border-brand-500': showTab === {{ key+2 }}, 'border-transparent': showTab !== {{ key+2 }}}" aria-controls="tabs-1-panel-{{ key+2 }}" role="tab" type="button">
  84.                                     <span class="sr-only">Additional Product Image</span>
  85.                                     <span class="absolute flex inset-0 overflow-hidden rounded-md">
  86.                                         {{ otherImage.thumbnail('productThumbnail').html | raw }}
  87.                                     </span>
  88.                                 </button>
  89.                             {% endfor %}
  90.                             {% for key, detailImage in product.detailView %}
  91.                                 <button x-on:click="showTab = {{ key+50 }}" class="relative flex items-center justify-center h-32 bg-gray-100 hover:bg-gray-50 border-2 focus:outline-none rounded-md cursor-pointer select-none transition ease duration-300" :class="{'border-brand-500': showTab === {{ key+50 }}, 'border-transparent': showTab !== {{ key+50 }}}" aria-controls="tabs-1-panel-{{ key+50 }}" role="tab" type="button">
  92.                                     <span class="sr-only">Additional Product Image</span>
  93.                                     <span class="absolute flex inset-0 overflow-hidden rounded-md">
  94.                                         {{ detailImage.thumbnail('productThumbnail').html | raw }}
  95.                                     </span>
  96.                                 </button>
  97.                             {% endfor %}
  98.                         </div>
  99.                         {% if(1 + (product.otherImages|length) + (product.detailView|length) >= 4) %}
  100.                         <button class="absolute top-14 left-[-20px]" x-on:click="$refs.slider.scrollBy({left: $refs.slider.offsetWidth * -1, behavior: 'smooth'});" x-bind:class="start ? '' : 'slider__nav__button--active'">
  101.                             <span class="hidden sm:inline-flex justify-center items-center rounded-full w-10 h-10 bg-gray-100 group-hover:bg-brand/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
  102.                                 <svg class="w-5 h-5 text-brand sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
  103.                                 <span class="hidden">Previous</span>
  104.                             </span>
  105.                         </button>
  106.                         <button class="absolute top-14 right-[-20px]" x-on:click="$refs.slider.scrollBy({left: $refs.slider.offsetWidth, behavior: 'smooth'});" x-bind:class="end ? '' : 'slider__nav__button--active'">
  107.                             <span class="hidden sm:inline-flex justify-center items-center rounded-full w-10 h-10 bg-gray-100 group-hover:bg-brand/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
  108.                                 <svg class="w-5 h-5 sm:w-6 sm:h-6 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  109.                                 <span class="hidden">Next</span>
  110.                             </span>
  111.                         </button>
  112.                         {% endif %}
  114.                     </div>
  115.                 </div>
  117.                 <!-- Product info -->
  118.                 <div class="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0 space-y-6">
  119.                     <h1 class="text-3xl font-bold text-gray-900 tracking-tight">{{ product.name is defined ? product.name : '' }}</h1>
  120.                     {% if product.brandImage is not empty %}
  121.                         <img class="float-right max-h-16" src="{{ product.brandImage.thumbnail({'width': 128}).path }}">
  122.                     {% endif %}
  124.                     <div class="space-y-3">
  125.                         {% if product.manufacturer is not empty %}
  126.                         <div>
  127.                             <div class="flex items-center space-x-1.5 text-sm">
  128.                                 <p>{{ 'manufacturer'|trans }}:</p>
  129.                                 <p class="font-semibold">{{ product.manufacturer }}</p>
  130.                             </div>
  131.                         </div>
  132.                         {% endif %}
  134.                         <div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 md:gap-x-6 text-sm">
  135.                             {% if product.group is not empty %}
  136.                             <div class="flex items-center space-x-1.5">
  137.                                 <p>{{ 'product group' | trans }}:</p>
  139.                                 <div class="flex" style="max-width: 9rem">
  140.                                     <span class="text-white text-sm rounded-r-full pl-4 pr-8 py-1 w-fit" style="background-color: {{ product.group.color | slice(0,7) }};">{{ product.group.name }}</span>
  141.                                 </div>
  142.                             </div>
  143.                             {% endif %}
  144.                             {% if product.code is not empty %}
  145.                             <div class="flex items-center space-x-1.5">
  146.                                 <p>{{ 'general.filter.code' | trans }}:</p>
  147.                                 <p class="font-semibold">{{ product.code }}</p>
  148.                             </div>
  149.                             {% endif %}
  150.                             {% if product.availableColors is not empty %}
  151.                             <div class="flex items-center space-x-1.5">
  152.                                 <p>{{ 'color' | trans }}:</p>
  153.                                 <p class="font-semibold">{{ product.availableColors|map(feature => feature)|join(', ') | raw }}</p>
  154.                             </div>
  155.                             {% endif %}
  156.                         </div>
  157.                     </div>
  158.                     {% if product.normPictograms|length > 0 %}
  159.                         <div>
  160.                             <div class="grid lg:grid-cols-4 grid-cols-2 gap-4">
  161.                                 {% for pictogram in product.normPictograms %}
  162.                                     <div class="flex flex-col items-center">
  163.                                         <img width="48" src="{{ pictogram.pictogram.thumbnail('icon-64x64').path }}">
  164.                                         <span class="text-xs text-gray-500 text-center font-bold">{{ pictogram.normName|raw }}</span>
  165.                                         <span class="text-xs text-gray-500 text-center">{{ pictogram.additionalInfo }}</span>
  166.                                     </div>
  167.                                 {% endfor %}
  168.                             </div>
  169.                             <p class="text-gray-500 text-sm mt-1">Weitere Informationen finden Sie <a class="text-brand" href="https://hugo-josten.de/service/wissenswertes/359-normenuebersicht">hier</a></p>
  170.                         </div>
  171.                     {% endif %}
  172.                     <div class="space-y-1">
  173.                         <h2 class="text-lg font-semibold text-gray-900">{{ 'description' | trans }}</h2>
  174.                         <div class="prose prose-base text-gray-500">
  175.                             <p class="leading-6">
  176.                                 {{ product.shortDescription | raw }}
  177.                             </p>
  178.                         </div>
  179.                     </div>
  180.                 </div>
  181.             </div>
  182.             <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
  183.                 <div class="space-y-6">
  184.                     <dl class="p-6 bg-gray-50 rounded-lg space-y-4">
  185.                         <h2 class="text-lg font-semibold text-gray-900">{{ 'description' | trans }}</h2>
  186.                         <div class="space-y-2 text-sm">
  187.                             {% for property in [
  188.                                 "manufacturer",
  189.                                 "group",
  190.                                 "code",
  191.                                 "availableColorsWithCode",
  192.                                 "clothingType",
  193.                                 "sizeRange",
  194.                                 "specialities",
  195.                                 "ceMark",
  196.                                 "norms",
  197.                                 "procedureEN_ISO",
  198.                                 "codeEN_ISO",
  199.                                 "typeEN_ISO",
  200.                                 "safetyClassEN_ISO",
  201.                                 "discontinued",
  202.                             ] %}
  204.                                 {% if product[property]|length > 0 %}
  205.                                     <div class="grid grid-cols-2 gap-4">
  206.                                         <dt class="font-semibold">{{ ('general.filter.' ~ property) | trans }}</dt>
  207.                                         {% if property == "group" %}
  208.                                             <dd class="mt-1 sm:mt-0">{{ product.group.name }}</dd>
  209.                                         {% elseif product[property] is iterable %}
  210.                                             <dd class="mt-1 sm:mt-0">{{ product[property]|map(feature => feature)|join('<br>') | raw }}</dd>
  211.                                         {% else %}
  212.                                             <dd class="mt-1 sm:mt-0">{{ product[property] }}</dd>
  213.                                         {% endif %}
  214.                                     </div>
  215.                                 {% endif %}
  216.                             {% endfor %}
  217.                         </div>
  218.                     </dl>
  219.                     {% if product.productMaterial %}
  220.                     <dl class="p-6 bg-gray-50 rounded-lg space-y-4">
  221.                         <h2 class="text-lg font-semibold text-gray-900">{{ 'Material' | trans }}</h2>
  222.                         <div class="space-y-2 text-sm">
  223.                             {% for property in [
  224.                                 "strength",
  225.                                 "fabricQuality",
  226.                                 "cotton",
  227.                                 "polyester",
  228.                                 "polyamid",
  229.                                 "polyacryl",
  230.                                 "elasthan",
  231.                                 "guidelines",
  232.                                 "protex",
  233.                                 "bio_cotton",
  234.                                 "cotton_carbon",
  235.                                 "pan",
  236.                                 "recycled_polyester",
  237.                                 "carbon",
  238.                             ] %}
  240.                                 {% if product.productMaterial[property]|length > 0 and product.productMaterial[property] > 0 %}
  241.                                     <div class="grid grid-cols-2 gap-4">
  242.                                         <dt class="font-semibold">{{ ('general.filter.' ~ property) | trans }}</dt>
  243.                                         {% if product.productMaterial[property] is iterable %}
  244.                                             <dd class="mt-1 sm:mt-0">{{ product.productMaterial[property]|map(feature => feature)|join('<br>') | raw }}</dd>
  245.                                         {% else %}
  246.                                             <dd class="mt-1 sm:mt-0">{{ product.productMaterial[property] }}</dd>
  247.                                         {% endif %}
  248.                                     </div>
  249.                                 {% endif %}
  250.                             {% endfor %}
  251.                         </div>
  252.                     </dl>
  253.                     {% endif %}
  254.                 </div>
  256.                 <div class="space-y-6">
  257.                     {% if product.productDatasheet|length > 0 or
  258.                         product.mainImage|length > 0 or
  259.                         product.otherImages|length > 0 or
  260.                         product.detailView|length > 0 %}
  261.                     <div class="p-6 bg-gray-50 rounded-lg space-y-4">
  262.                         <h2 class="text-lg font-semibold text-gray-900">{{ 'download media' | lower | trans }}</h2>
  263.                         {% if product.productDatasheet|length > 0 %}
  264.                             <div class="space-y-1">
  265.                                 <p class="text-sm font-semibold">{{ 'productdatasheet' | lower | trans }}:</p>
  266.                                 <ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
  267.                                     <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
  268.                                         <div class="flex w-0 flex-1 items-center">
  269.                                             <!-- Heroicon name: mini/paper-clip -->
  270.                                             <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  271.                                                 <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
  272.                                             </svg>
  273.                                             <span class="ml-2 w-0 flex-1 truncate">{{ product.productDatasheet.filename }}</span>
  274.                                         </div>
  275.                                         <div class="ml-4 flex-shrink-0">
  276.                                             <a href="{{ product.productDatasheet.fullpath }}" target="_blank" class="font-medium text-brand-600 hover:text-brand-500">Download</a>
  277.                                         </div>
  278.                                     </li>
  279.                                 </ul>
  280.                             </div>
  281.                         {% endif %}
  282.                         {% if product.sizeTable|length > 0 %}
  283.                             <div class="space-y-1">
  284.                                 <p class="text-sm font-semibold">{{ 'Größentabelle' | trans }}:</p>
  285.                                 <ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
  286.                                     <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
  287.                                         <div class="flex w-0 flex-1 items-center">
  288.                                             <!-- Heroicon name: mini/paper-clip -->
  289.                                             <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  290.                                                 <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
  291.                                             </svg>
  292.                                             <span class="ml-2 w-0 flex-1 truncate">{{ product.sizeTable.filename }}</span>
  293.                                         </div>
  294.                                         <div class="ml-4 flex-shrink-0">
  295.                                             <a href="{{ product.sizeTable.fullpath }}" target="_blank" class="font-medium text-brand-600 hover:text-brand-500">Download</a>
  296.                                         </div>
  297.                                     </li>
  298.                                 </ul>
  299.                             </div>
  300.                         {% endif %}
  301.                         {% if product.mainImage|length > 0 or
  302.                             product.otherImages|length > 0 or
  303.                             product.detailView|length > 0
  304.                         %}
  305.                             <div class="space-y-1">
  306.                                 <p class="text-sm font-semibold">{{ 'productImages' | lower | trans }}:</p>
  307.                                 <ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
  308.                                     <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm relative group">
  309.                                         <div class="flex w-0 flex-1 items-center">
  310.                                             <!-- Heroicon name: mini/paper-clip -->
  311.                                             <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  312.                                                 <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
  313.                                             </svg>
  314.                                             <span class="ml-2 w-0 flex-1 truncate">{{ basename(product.mainImage.thumbnail('high-1920px').path)|replace({'%20': '_', ' ': '_'}) }}</span>
  315.                                         </div>
  316.                                         <div class="absolute w-64 h-64 bg-gray-100 p-6 shadow-lg left-[calc(-16rem-20px)] rounded-md hidden group-hover:block">
  317.                                             {{ product.mainImage.thumbnail('productThumbnail').html|raw }}
  318.                                             <svg class="absolute text-gray-100 h-8 right-0 mr-[-33px] top-[calc(50%-19px)]" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve">
  319.                                                 <polygon style="fill: currentColor;" points="0,0 127.5,127.5 0,255"/>
  320.                                             </svg>
  321.                                         </div>
  322.                                         <div class="ml-4 flex-shrink-0">
  323.                                             <a href="{{ product.mainImage.thumbnail('high-1920px').path }}" download="{{ basename(product.mainImage.thumbnail('high-1920px').path)|replace({'%20': '_', ' ': '_'}) }}" target="_blank" class="font-medium text-brand-600 hover:text-brand-500">Download</a>
  324.                                         </div>
  325.                                     </li>
  326.                                     {% for otherImage in product.otherImages %}
  327.                                         <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm relative group">
  328.                                             <div class="flex w-0 flex-1 items-center">
  329.                                                 <!-- Heroicon name: mini/paper-clip -->
  330.                                                 <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  331.                                                     <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
  332.                                                 </svg>
  333.                                                 <span class="ml-2 w-0 flex-1 truncate">{{ basename(otherImage.thumbnail('high-1920px').path)|replace({'%20': '_', ' ': '_'}) }}</span>
  334.                                             </div>
  335.                                             <div class="absolute w-64 h-64 bg-gray-100 p-6 shadow-lg left-[calc(-16rem-20px)] rounded-md hidden group-hover:block">
  336.                                                 {{ otherImage.thumbnail('productThumbnail').html|raw }}
  337.                                                     <svg class="absolute text-gray-100 h-8 right-0 mr-[-33px] top-[calc(50%-19px)]" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve">
  338.                                                     <polygon style="fill: currentColor;" points="0,0 127.5,127.5 0,255"/>
  339.                                                 </svg>
  340.                                             </div>
  341.                                             <div class="ml-4 flex-shrink-0">
  342.                                                 <a href="{{ otherImage.thumbnail('high-1920px').path }}" download="{{ basename(otherImage.thumbnail('high-1920px').path)|replace({'%20': '_', ' ': '_'}) }}" target="_blank" class="font-medium text-brand-600 hover:text-brand-500">Download</a>
  343.                                             </div>
  344.                                         </li>
  345.                                     {% endfor %}
  346.                                     {% for detailImage in product.detailView %}
  347.                                         <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm relative group">
  348.                                             <div class="flex w-0 flex-1 items-center">
  349.                                                 <!-- Heroicon name: mini/paper-clip -->
  350.                                                 <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  351.                                                     <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
  352.                                                 </svg>
  353.                                                 <span class="ml-2 w-0 flex-1 truncate">{{ basename(detailImage.thumbnail('high-1920px').path)|replace({'%20': '_', ' ': '_'}) }}</span>
  354.                                             </div>
  355.                                             <div class="absolute w-64 h-64 bg-gray-100 p-6 shadow-lg left-[calc(-16rem-20px)] rounded-md hidden group-hover:block">
  356.                                                 {{ detailImage.thumbnail('productThumbnail').html|raw }}
  357.                                                 <svg class="absolute text-gray-100 h-8 right-0 mr-[-33px] top-[calc(50%-19px)]" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve">
  358.                                                     <polygon style="fill: currentColor;" points="0,0 127.5,127.5 0,255"/>
  359.                                                 </svg>
  360.                                             </div>
  361.                                             <div class="ml-4 flex-shrink-0">
  362.                                                 <a href="{{ detailImage.thumbnail('high-1920px').path }}" download="{{ basename(detailImage.thumbnail('high-1920px').path)|replace({'%20': '_', ' ': '_'}) }}" target="_blank" class="font-medium text-brand-600 hover:text-brand-500">Download</a>
  363.                                             </div>
  364.                                         </li>
  365.                                     {% endfor %}
  366.                                 </ul>
  367.                             </div>
  368.                         {% endif %}
  369.                         {% if product.applicationImages|length > 0 %}
  370.                             <div class="space-y-1">
  371.                                 <p class="text-sm font-semibold">{{ 'applicationImages' | lower | trans }}:</p>
  372.                                 <ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
  373.                                     {% for applicationImage in product.applicationImages %}
  374.                                         <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm relative group">
  375.                                             <div class="flex w-0 flex-1 items-center">
  376.                                                 <!-- Heroicon name: mini/paper-clip -->
  377.                                                 <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  378.                                                     <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
  379.                                                 </svg>
  380.                                                 <span class="ml-2 w-0 flex-1 truncate">{{ basename(applicationImage.thumbnail('high-1920px').path) }}</span>
  381.                                             </div>
  382.                                             <div class="absolute w-64 h-64 bg-gray-100 p-6 shadow-lg left-[calc(-16rem-20px)] rounded-md hidden group-hover:block">
  383.                                                 {{ applicationImage.thumbnail('productThumbnail').html|raw }}
  384.                                                 <svg class="absolute text-gray-100 h-8 right-0 mr-[-33px] top-[calc(50%-19px)]" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve">
  385.                                                     <polygon style="fill: currentColor;" points="0,0 127.5,127.5 0,255"/>
  386.                                                 </svg>
  387.                                             </div>
  388.                                             <div class="ml-4 flex-shrink-0">
  389.                                                 <a href="{{ applicationImage.thumbnail('high-1920px').path }}" download="{{ basename(applicationImage.thumbnail('high-1920px').path) }}" target="_blank" class="font-medium text-brand-600 hover:text-brand-500">Download</a>
  390.                                             </div>
  391.                                         </li>
  392.                                     {% endfor %}
  393.                                 </ul>
  394.                             </div>
  395.                         {% endif %}
  396.                     </div>
  397.                     {% endif %}
  398.                     {% if product.relatedProducts|length > 0 %}
  399.                     <div class="p-6 bg-gray-50 rounded-lg space-y-4">
  400.                         <h2 class="text-lg font-semibold text-gray-900">{{ 'Zugehörige Produkte' | trans }}</h2>
  401.                         <div class="space-y-1">
  402.                             <div class="divide-y divide-gray-200 rounded-md border border-gray-200 text-sm">
  403.                                 {% for relatedProduct in product.relatedProducts %}
  404.                                 <a href="{{ app_product_detaillink(relatedProduct) }}" class="grid grid-cols-2 items-center hover:bg-gray-100 cursor-pointer">
  405.                                     <div>
  406.                                         {{ (relatedProduct.mainImage is not empty ? relatedProduct.mainImage.thumbnail('productThumbnail').html : pimcore_asset_by_path('/System/missing.png').thumbnail('productThumbnail').html ) | raw }}
  407.                                     </div>
  408.                                     <div>
  409.                                         <div class="font-semibold">{{ relatedProduct.name }}</div>
  410.                                         <div class="">{{ relatedProduct.code }}</div>
  411.                                     </div>
  412.                                 </a>
  413.                                 {% endfor %}
  414.                             </div>
  415.                         </div>
  416.                     </div>
  417.                     {% endif %}
  418.                 </div>
  419.             </div>
  420.         </div>
  421.     </div>
  422. {% endblock %}
  424. {% block PAGE_JS %}
  425.     <div id="promo-box" class="bg-brand-600 px-8 py-12 rounded shadow-md fixed top-1/3 right-0 hidden">
  426.         <button id="close-button" class="absolute top-0 right-0 p-2 text-white opacity-100" type="button" aria-label="Close">
  427.             <span aria-hidden="true">&times;</span>
  428.         </button>
  429.         <div class="text-white">
  430.             <span class=" text-xl ">Wir veredeln mit</span><br>
  431.             <span class="text-2xl font-bold">Ihrem Logo!</span><br>
  432.         </div>
  433.         <br>
  434.         <div>
  435.             <a href="https://hugo-josten.de/service/beratung" class="text-white font-bold">
  436.                 Erfahren Sie mehr
  437.             </a>
  438.         </div>
  439.         <div class="h-4"></div>
  440.     </div>
  442.     <div id="promo-icon" class="fixed top-1/3 right-0 p-2 bg-brand-600 text-white rounded-l cursor-pointer hidden">
  443.         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  444.             <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
  445.         </svg>
  446.     </div>
  448.     <script>
  449.         document.addEventListener('DOMContentLoaded', function() {
  450.             const promoBox = document.getElementById('promo-box');
  451.             const promoIcon = document.getElementById('promo-icon');
  452.             const closeButton = document.getElementById('close-button');
  454.             // Check if the promo box should be hidden
  455.             if (localStorage.getItem('promoBoxClosed') !== 'true') {
  456.                 promoBox.classList.remove('hidden');
  457.             }else{
  458.                 promoIcon.classList.remove('hidden');
  459.             }
  461.             // Add click event to the close button
  462.             closeButton.addEventListener('click', function() {
  463.                 promoBox.classList.add('hidden');
  464.                 promoIcon.classList.remove('hidden');
  465.                 localStorage.setItem('promoBoxClosed', 'true');
  466.             });
  468.             promoIcon.addEventListener('click', function() {
  469.                 promoIcon.classList.add('hidden');
  470.                 promoBox.classList.remove('hidden');
  471.                 localStorage.setItem('promoBoxClosed', 'false');
  472.             });
  473.         });
  474.     </script>
  475. {% endblock %}