templates/areas/product-trending-brick/view.html.twig line 1

Open in your IDE?
  1. {% embed 'app/area-brick-layout.html.twig' %}
  2.     {% block content %}
  4.         {% set productCategories = productCategories ?? pimcore_relations('productCategories').getElements() %}
  6.         {% if  editmode or productCategories is not empty %}
  7.             <section class="py-10 lg:pb-20">
  8.                 <div class="container">
  9.                     <div>
  10.                         <h2 class="mb-10 text-2xl md:text-4xl ">{{ 'Onze hardlopers' | trans }}</h2>
  11.                     </div>
  12.                     {% if editmode and productCategories is empty %}
  13.                         {{ info("Nog geen producten geselecteerd.")|raw }}
  14.                     {% endif %}
  15.                     <div class="!px-5 !-mx-5 sm:!px-0 sm:!mx-auto swiper product-swiper">
  16.                         <div class="swiper-wrapper">
  17.                             {% for productCategory in productCategories %}
  18.                                 <a
  19.                                     {% if productCategory.page() %}
  20.                                         href="{{ productCategory.page().url | trimUrl }}"
  21.                                     {% endif %}
  22.                                     class="!h-auto flex flex-col overflow-hidden transition rounded-md group swiper-slide hover:drop-shadow-xl"
  23.                                 >
  24.                                     {% if editmode and productCategory.page().url is not defined %}
  25.                                         {% embed 'app/editmodenotice.html.twig' %}
  26.                                             {% block title %} Er is nog geen pagina ingesteld voor dit product. {% endblock %}
  27.                                         {% endembed %}
  28.                                     {% endif %}
  29.                                     <div class="relative text-center">
  30.                                         {% if productCategory.renderThumbnail is defined %}
  31.                                             {{ productCategory.renderThumbnail('product-category-thumbnail', {
  32.                                                     'imgAttributes': {
  33.                                                         'class': 'w-full',
  34.                                                     },
  35.                                                     'pictureAttributes': {
  36.                                                         'class': 'block w-full'
  37.                                                     }
  38.                                                 })|raw }}
  39.                                         {% endif %}
  40.                                     </div>
  41.                                     <div class="flex flex-col justify-between flex-grow gap-0 bg-white">
  42.                                         <div class="px-6 pt-6 pb-7">
  43.                                             <h3 class="mb-3 text-lg font-bold md:text-xl group-hover:text-blue">{{ productCategory.name ?: productCategory.key }}</h3>
  44.                                             <div class="!text-gray-800 line-clamp-3">{{ productCategory.seo_heading_3 }}</div>
  45.                                         </div>
  46.                                         <div class="px-6 pb-8">
  47.                                             <button class="!p-0 button button__secondary button--align-left group">
  48.                                                 <span class="block">{{ 'Bekijk producten' | trans }}</span>
  49.                                                 <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">
  50.                                                     <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg"
  51.                                                             viewBox="0 0 16 16">
  52.                                                         <path fill="currentColor" fill-rule="currentColor"
  53.                                                                 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>
  54.                                                     </svg>
  55.                                                 </span>
  56.                                             </button>
  57.                                         </div>
  58.                                     </div>
  59.                                 </a>
  60.                             {% endfor %}
  61.                         </div>
  62.                         <div class="flex items-center justify-between gap-6 mt-6 lg:justify-end">
  63.                             <div class="flex items-center !w-auto custom-swiper-pagination"></div>
  64.                             <div class="flex gap-2.5 items-center text-blue">
  65.                                 <div class="arrow-swiper-button-prev">
  66.                                     <svg width="24px" height="18px" xmlns="http://www.w3.org/2000/svg"><g id="&gt;-Klimaatbeheersing-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" ><g id="coolworld-product-category-vd-375-v02.3" transform="translate(-296 -3452)" fill="currentColor"><g id="Group-4" transform="translate(0 3333)"><g id="components/navigation/mobile/carousel" transform="translate(21 116)"><g id="icons/ui/arrow-line-right-copy" transform="translate(275 3)"><path d="M22.659 7.643H5.095L9.92 2.817A1.328 1.328 0 1 0 8.044.939L.707 8.277a1 1 0 0 0 0 1.414l7.337 7.338a1.328 1.328 0 0 0 1.878-1.878l-4.827-4.826h17.564a1.341 1.341 0 0 0 0-2.682Z" id="arrow-line-left" transform="matrix(1 0 0 -1 0 17.968)"/></g></g></g></g></g></svg>
  67.                                 </div>
  68.                                 <div class="arrow-swiper-button-next">
  69.                                     <svg width="24px" height="18px" xmlns="http://www.w3.org/2000/svg"><g id="&gt;-Klimaatbeheersing-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="coolworld-product-category-vd-375-v02.3" transform="translate(-332 -3452)" fill="currentColor"><g id="Group-4" transform="translate(0 3333)"><g id="components/navigation/mobile/carousel" transform="translate(21 116)"><g id="icons/ui/arrow-line-right" transform="translate(311 3)"><path d="M22.659 7.643H5.095L9.92 2.817A1.328 1.328 0 1 0 8.044.939L.707 8.277a1 1 0 0 0 0 1.414l7.337 7.338a1.328 1.328 0 0 0 1.878-1.878l-4.827-4.826h17.564a1.341 1.341 0 0 0 0-2.682Z" id="arrow-line-right" transform="matrix(-1 0 0 1 24 0)"/></g></g></g></g></g></svg>
  70.                                 </div>
  71.                             </div>
  72.                         </div>
  73.                     </div>
  74.                 </div>
  75.             </section>
  76.         {% endif %}
  77.     {% endblock %}
  78. {% endembed %}