{% set selectedProducts = pimcore_relations('selectedProducts').getData() %}{% set selectedProperties = pimcore_relations('selectedProperties').getData() %}{% embed 'app/area-brick-layout.html.twig' %} {% block content %} {% if selectedProducts is empty %} {% if editmode %} {% embed 'app/editmodenotice.html.twig' %} {% block title %} Nog geen alternatieve producten geselecteerd. {% endblock %} {% block information %} Kies alternatieve producten middels het potloodje. {% endblock %} {% endembed %} {% endif %} {% else %} <section class="py-10 bg-blue-200 lg:py-20" x-data="{ tableOpen: false }"> <div class="overflow-hidden lg:container"> {% if editmode and selectedProperties is empty %} {% embed 'app/editmodenotice.html.twig' %} {% block title %} Nog geen producteneigenschappen geselecteerd. {% endblock %} {% block information %} Kies producteneigenschappen middels het potloodje {% endblock %} {% endembed %} {% endif %} <div class="grid grid-cols-12 gap-6"> <div class="col-span-12"> <h2 class="mb-4 text-2xl text-center md:text-3xl lg:text-4xl"> {% include 'areas/unique-selling-point-brick/partials/_title.html.twig' %} </h2> </div> </div> {# Here we set the maxinum amount of specs that are shown on initial page load. If there are more then this amount then those will be hidden, a button will then be shown #} {% set shownSpecsOnInitialLoad = 8 %} {% set showReadMoreSpecsButton = false %} <div class="px-0 overflow-x-auto lg:pb-6 lg:pr-6 "> <table class="w-full lg:border-separate text-md lg:text-base lg:border-slate-500 lg:border-spacing-2" > {# First, we generate the table header based on the selected properties. #} <thead class="bg-gray-50"> <tr> <th> <!-- title --> </th> {% for property in selectedProperties ?: [] %} <th scope="col" class="px-4 py-2 font-normal text-left text-gray-900 lg:px-6 lg:py-4 {{ loop.index > 2 ? 'hidden lg:table-cell' : '' }}"> {{ property.title ?: property.key }} </th> {% endfor %} <th class="hidden lg:table-cell"> <!-- info --> </th> <th class="hidden lg:table-cell"> <!-- button --> </th> <th> <!-- chevron --> </th> </tr> </thead> {# then, we will output the product-rows #} <tbody class="gap-6" x-data="{ rowOpen: false }"> {% for product in selectedProducts %} <tr x-description="Odd row" class="bg-white border-t-8 border-blue-200 lg:border-t-0" {% if loop.index >= shownSpecsOnInitialLoad %} :class="tableOpen ? '' : 'hidden'" {% endif %} > {# Output the product title as the first column in this row #} <td class="px-4 py-5 mb-4 font-bold leading-4 text-md lg:text-xl lg:px-6 lg:py-4 lg:rounded-l-md whitespace-nowrap"> <a href="{{ product.page.url | trimUrl }}"> <span class="hidden md:inline-block">{{ product.name }}</span> <span class="text-blue">{{ product.code ?? "" }}</span> </a> </td> {# then we will loop through all the selected properties... We always render a column for each selected property, we do this to maintain table-like formatting. In case a selected spec to highlight does not exist in a product we will simply show an empty column for that product :) #} {% set customCounter = 0 %} {% for property in selectedProperties ?: [] %} {% set found = false %} {% for spec in product.specifications|filter(s => s.specification_property.data.publicly_visible) %} {% set specificationObject = spec.specification_property.data %} {% if specificationObject.id == property.id %} {% set found = true %} {% set customCounter = customCounter + 1 %} {# Output the specification value and unit to this row #} <td class="px-4 py-4 leading-4 lg:px-6 lg:py-4 whitespace-nowrap {{ customCounter > 2 ? 'hidden lg:table-cell' : '' }}"> {{ spec.specification_value.data }} {{ specificationObject.unit }} </td> {# skip the rest of the spec-for-loop when entry is found #} {% break %} {% endif %} {% endfor %} {% if not found %} {% set customCounter = customCounter + 1 %} <td class="{{ customCounter > 2 ? 'hidden lg:table-cell' : '' }}"> <!-- empty --> </td> {% endif %} {% endfor %} <td class="hidden px-4 py-2 lg:px-6 lg:py-4 lg:table-cell lg:rounded-r-md"> {% include 'includes/partials/_rental-form.html.twig' with { buttonText: 'Offerte aanvragen'|trans, buttonClass: 'button button__green', trackButtonId: 'conversion_rentnow', requestUrl: data.request.url } %} </td> <td class="content-end px-4 py-2 text-right md:hidden lg:px-6 lg:py-4 group "> <div class="inline-flex items-center justify-center w-8 h-8 bg-gray-200 rounded-full cursor-pointer text-blue group-hover:bg-blue group-hover:text-white lg:hidden" :class="(rowOpen == {{loop.index}}) ? '-rotate-90' : 'rotate-90'" @click="(rowOpen == {{loop.index}}) ? rowOpen = false : rowOpen = {{loop.index}}" > <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16"><path fill="currentColor" fill-rule="evenodd" d="m2.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L2.406.343A1.206 1.206 0 0 0 .657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L6.731 8 .722 13.807a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/></svg> </div> </td> </tr> <tr class="bg-white border-2 rounded-md lg:hidden" :class="(rowOpen == {{loop.index}}) ? 'table-row' : 'hidden'" > <td colspan="4" class="px-4 pt-6 pb-6 text-sm"> {% for property in selectedProperties ?: [] %} {% if loop.index > 2 %} <div class="flex justify-between py-1"> <span>{{ property.title ?: property.key }}</span> <span class="text-right text-blue"> {% set customCounter = 0 %} {% set found = false %} {% for spec in product.specifications|filter(s => s.specification_property.data.publicly_visible) %} {% set specificationObject = spec.specification_property.data %} {% if specificationObject.id == property.id %} {% set found = true %} {% set customCounter = customCounter + 1 %} {# Output the specification value and unit to this row #} <div class=" {{ customCounter > 2 ? '' : '' }}"> {{ spec.specification_value.data }} {{ specificationObject.unit }} </div> {# skip the rest of the spec-for-loop when entry is found #} {% break %} {% endif %} {% endfor %} </span> </div> {% endif %} {% endfor %} <div class="lg:py-1.5 hidden lg:flex lg:justify-between "> <span>{{ 'Meer informatie'|trans }}</span> <span class="relative text-right text-blue" x-data="{ tooltipOpen: false }"> <span class="cursor-pointer" @click="tooltipOpen = !tooltipOpen" @click.outside="tooltipOpen = false" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#0072BB" fill-rule="evenodd" d="M8.036 5.235c.433 0 .747-.081.942-.244.196-.162.294-.418.294-.767 0-.358-.098-.618-.294-.78-.195-.163-.51-.244-.942-.244-.433 0-.747.081-.943.243-.195.163-.293.423-.293.78 0 .35.098.606.293.768.196.163.51.244.943.244Zm1.06 6.965V5.959H6.976V12.2h2.122ZM8 14.4A6.4 6.4 0 1 1 14.4 8 6.407 6.407 0 0 1 8 14.4ZM0 8a8 8 0 0 0 16 0 8.009 8.009 0 0 0-8-8 8 8 0 0 0-8 8Z"/></svg> </span> <div class="absolute right-0 z-10 w-64 p-4 bg-white rounded shadow-lg top-5" :class="tooltipOpen ? 'block' : 'hidden'" > <span class="text-sm leading-6 text-gray-900"> {{ "Onze specialisten zorgen voor een passende oplossing, vrijblijvend advies en afstemming met u."|trans }} </span> </div> </span> </div> <div class="mt-4"> {% include 'includes/partials/_rental-form.html.twig' with { buttonText: 'Offerte aanvragen'|trans, buttonClass: 'button button__green', trackButtonId: 'conversion_rentnow', requestUrl: data.request.url ?? null } %} <a href="{{ product.page.url | trimUrl }}" class="items-center justify-center !hidden lg:flex button button__secondary"> Meer informatie <span class="flex items-center justify-center w-6 h-6 ml-3 bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white"> <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path fill="currentColor" fill-rule="currentColor" d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"></path> </svg> </span> </a> </div> </td> </tr> {% set showReadMoreSpecsButton = loop.index > shownSpecsOnInitialLoad %} {% endfor %} </tbody> </table> </div> {# never show this button when printing (printmode), even though there could be more specs. #} {% if showReadMoreSpecsButton and printmode is not defined %} <div class="flex justify-center w-full mt-6 "> <button class="button button__secondary group" @click="tableOpen = !tableOpen" > <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 "> <span class="flex items-center justify-center w-full h-full "> <svg x-show="!tableOpen" class="w-3.5" 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"/> </svg> <svg x-show="tableOpen" class="w-3.5" 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"/> </svg> </span> </span> <span x-show="!tableOpen"> {{ ('Meer {{ productCategory }} tonen') | trans({'{{ productCategory }}': (productCategory.name ?: productCategory.key)|customLowercase }) }} </span> <span x-show="tableOpen"> {{ ('Minder {{ productCategory }} tonen') | trans({'{{ productCategory }}': (productCategory.name ?: productCategory.key)|customLowercase }) }} </span> </button> </div> {% endif %} </div> </section> {% endif %} {% endblock %}{% endembed %}