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

Open in your IDE?
  1. {% set contactEmpty = pimcore_block('contacts').isEmpty() %}
  3. {% if sliderClass is defined and sliderClass is not empty() %}
  4.     {% set sliderClassName = sliderClass %}
  5. {% else %}
  6.     {% set sliderClassName = 'related-products-swiper' %}
  7. {% endif %}
  9. {% embed 'app/area-brick-layout.html.twig' %}
  10.     {% block content %}
  11.         {% set productCategories = productCategories ?? pimcore_relations('productCategories').getElements() %}
  13.         <section class="{{ sectionClasses ?? '' }}">
  14.             <div class="{{ containerClasses ?? 'container py-10 md:py-20' }} overflow-hidden">
  16.                 {% if editmode and productCategories is empty %}
  17.                     {{ info("Nog geen product categorieen geselecteerd.")|raw }}
  18.                 {% endif %}
  20.                 {% if showTitle ?? true %}
  21.                     {% include 'includes/partials/text/_inline-icon-and-title.html.twig' with {
  22.                         'defaultTitle': defaultTitle ?? ""
  23.                     } %}
  24.                 {% endif %}
  26.                 <div class="{% if not contactEmpty %} flex {% endif %}">
  27.                     <div class="swiper {{ sliderClassName }} swiper-enable {% if not contactEmpty %} w-1/2 {% endif %}">
  28.                         <div class="swiper-wrapper pb-10">
  29.                             {% for productCategory in productCategories %}
  30.                                 <div class="swiper-slide">
  31.                                     {% include 'areas/product-category-cards-brick/partials/category-card.html.twig' %}
  32.                                 </div>
  33.                             {% endfor %}
  34.                         </div>
  36.                         <div class="w-full md:w-auto absolute bottom-0 right-0 z-10">
  37.                             <div class="grid justify-between md:justify-end grid-cols-2 items-center">
  38.                                 <div class="!w-auto related-product-swiper-pagination"></div>
  39.                                 <div class="flex justify-end">
  40.                                     <div class="gap-4 grid grid-cols-2">
  41.                                         <div
  42.                                                 class="related-product-swiper-button-prev">
  43.                                             <svg class="rotate-180" xmlns="http://www.w3.org/2000/svg"
  44.                                                  xmlns:xlink="http://www.w3.org/1999/xlink" width="23.5857104px"
  45.                                                  height="16.8675464px" viewBox="0 0 23.5857104 16.8675464"
  46.                                                  version="1.1">
  47.                                                 <g id="case-study" stroke="none" stroke-width="1" fill="none"
  48.                                                    fill-rule="evenodd">
  49.                                                     <g id="coolworld-project-case-study-vd-1504-v02"
  50.                                                        transform="translate(-1580.000000, -1967.550069)"
  51.                                                        fill="#0072BB">
  52.                                                         <g id="media"
  53.                                                            transform="translate(0.000000, 1270.000000)">
  54.                                                             <g id="Group-2"
  55.                                                                transform="translate(426.000000, 449.000000)">
  56.                                                                 <g id="components/navigation/mobile/carousel"
  57.                                                                    transform="translate(1014.000000, 245.000000)">
  58.                                                                     <g id="icons/ui/arrow-line-right"
  59.                                                                        transform="translate(140.000000, 3.000000)">
  60.                                                                         <path
  61.                                                                                 d="M22.6587309,7.6425728 L5.09460875,7.6425728 L5.09460875,7.6425728 L9.92142843,2.81683065 C10.4400119,2.29836292 10.4401058,1.4576668 9.92163804,0.939083306 C9.92160311,0.939048366 9.92156818,0.939013428 9.92153324,0.938978492 C9.40298689,0.420432142 8.56225714,0.420432142 8.0437108,0.938978492 C8.04368837,0.939000914 8.04366595,0.939023337 8.04364353,0.939045761 L0.70705612,8.27668449 C0.316700705,8.6672985 0.316700705,9.30038534 0.70705612,9.69099936 L8.04364353,17.0286381 C8.56215273,17.5472216 9.40288247,17.5472818 9.92146597,17.0287726 C9.9214884,17.0287502 9.92151082,17.0287278 9.92153324,17.0287054 C10.4400589,16.5101797 10.4400589,15.6694836 9.92153324,15.150958 C9.9214983,15.1509231 9.92146337,15.1508881 9.92142843,15.1508532 L5.09460875,10.3251111 L5.09460875,10.3251111 L22.6587309,10.3251111 C23.3994934,10.3251111 24,9.72460441 24,8.98384192 C24,8.24307944 23.3994934,7.6425728 22.6587309,7.6425728 Z"
  62.                                                                                 id="arrow-line-right"
  63.                                                                                 transform="translate(12.000000, 8.983842) scale(-1, 1) translate(-12.000000, -8.983842) "/>
  64.                                                                     </g>
  65.                                                                 </g>
  66.                                                             </g>
  67.                                                         </g>
  68.                                                     </g>
  69.                                                 </g>
  70.                                             </svg>
  71.                                         </div>
  72.                                         <div class="related-product-swiper-button-next">
  73.                                             <svg xmlns="http://www.w3.org/2000/svg"
  74.                                                  xmlns:xlink="http://www.w3.org/1999/xlink" width="23.5857104px"
  75.                                                  height="16.8675464px" viewBox="0 0 23.5857104 16.8675464"
  76.                                                  version="1.1">
  77.                                                 <g id="case-study" stroke="none" stroke-width="1" fill="none"
  78.                                                    fill-rule="evenodd">
  79.                                                     <g id="coolworld-project-case-study-vd-1504-v02"
  80.                                                        transform="translate(-1580.000000, -1967.550069)"
  81.                                                        fill="#0072BB">
  82.                                                         <g id="media"
  83.                                                            transform="translate(0.000000, 1270.000000)">
  84.                                                             <g id="Group-2"
  85.                                                                transform="translate(426.000000, 449.000000)">
  86.                                                                 <g id="components/navigation/mobile/carousel"
  87.                                                                    transform="translate(1014.000000, 245.000000)">
  88.                                                                     <g id="icons/ui/arrow-line-right"
  89.                                                                        transform="translate(140.000000, 3.000000)">
  90.                                                                         <path
  91.                                                                                 d="M22.6587309,7.6425728 L5.09460875,7.6425728 L5.09460875,7.6425728 L9.92142843,2.81683065 C10.4400119,2.29836292 10.4401058,1.4576668 9.92163804,0.939083306 C9.92160311,0.939048366 9.92156818,0.939013428 9.92153324,0.938978492 C9.40298689,0.420432142 8.56225714,0.420432142 8.0437108,0.938978492 C8.04368837,0.939000914 8.04366595,0.939023337 8.04364353,0.939045761 L0.70705612,8.27668449 C0.316700705,8.6672985 0.316700705,9.30038534 0.70705612,9.69099936 L8.04364353,17.0286381 C8.56215273,17.5472216 9.40288247,17.5472818 9.92146597,17.0287726 C9.9214884,17.0287502 9.92151082,17.0287278 9.92153324,17.0287054 C10.4400589,16.5101797 10.4400589,15.6694836 9.92153324,15.150958 C9.9214983,15.1509231 9.92146337,15.1508881 9.92142843,15.1508532 L5.09460875,10.3251111 L5.09460875,10.3251111 L22.6587309,10.3251111 C23.3994934,10.3251111 24,9.72460441 24,8.98384192 C24,8.24307944 23.3994934,7.6425728 22.6587309,7.6425728 Z"
  92.                                                                                 id="arrow-line-right"
  93.                                                                                 transform="translate(12.000000, 8.983842) scale(-1, 1) translate(-12.000000, -8.983842) "/>
  94.                                                                     </g>
  95.                                                                 </g>
  96.                                                             </g>
  97.                                                         </g>
  98.                                                     </g>
  99.                                                 </g>
  100.                                             </svg>
  101.                                         </div>
  102.                                     </div>
  103.                                 </div>
  104.                             </div>
  105.                         </div>
  106.                     </div>
  107.                     {% if editmode or not contactEmpty %}
  108.                         {# contact #}
  109.                         <div class="md:ml-20 bg-blue-300 rounded text-white p-8 h-max w-1/2">
  110.                             <b class="text-[24px] mb-4">{{ pimcore_input('contact-title') }}</b>
  112.                             <div class="flex flex-col gap-6 mt-4">
  113.                                 {% for i in pimcore_block('contacts').iterator %}
  114.                                     {% if editmode %}
  115.                                         {{ pimcore_image('contact-image') }}
  116.                                         {{ pimcore_input('contact-name') }}
  117.                                         {{ pimcore_input('contact-function') }}
  119.                                         {{ pimcore_link('contact-number') }}
  120.                                         {{ pimcore_link('contact-mail') }}
  121.                                     {% else %}
  122.                                         <div
  123.                                                 class="flex flex-col gap-4 md:gap-0 md:flex-row md:items-center justify-between">
  124.                                             <div class="flex flex-row gap-4 items-center">
  125.                                                 {% if not pimcore_image('contact-image').isEmpty() %}
  126.                                                     {{ pimcore_image('contact-image').thumbnail('contact-icon').html({
  127.                                                         imgAttributes: {width: '52', height: '52', class: 'w-full h-full'},
  128.                                                         pictureAttributes: {class: 'rounded-full overflow-hidden w-[52px] h-[52px]'}
  129.                                                     }) | raw }}
  130.                                                 {% endif %}
  131.                                                 <div class="flex flex-col">
  132.                                                     <b class="text-[20px]">{{ pimcore_input('contact-name').getData() | default('') }}</b>
  134.                                                     {{ pimcore_input('contact-function').getData() | default('') }}
  135.                                                 </div>
  136.                                             </div>
  138.                                             <div class="flex flex-row gap-4">
  139.                                                 {% if pimcore_link('contact-mail').getHref() | default() %}
  140.                                                     <a href="{{ pimcore_link('contact-mail').getHref() }}"
  141.                                                        target="_blank"
  142.                                                        class="flex font-bold text-blue hover:underline">
  143.                                                 <span
  144.                                                         class="flex items-center justify-center w-6 h-6 bg-white rounded-full shadow-md">
  145.                                                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12"><path
  146.                                                                 fill="currentColor" fill-rule="evenodd"
  147.                                                                 d="M1.4 9.8V3.877l5.316 2.362a.7.7 0 0 0 .568 0L12.6 3.877V9.8H1.4Zm11.2-8.4v.945L7 4.834 1.4 2.345V1.4h11.2ZM14 2.786V.7a.7.7 0 0 0-.7-.7H.7a.7.7 0 0 0-.7.7v9.8a.7.7 0 0 0 .7.7h12.6a.7.7 0 0 0 .7-.7V2.786Z"></path></svg>
  148.                                                 </span>
  149.                                                     </a>
  150.                                                 {% endif %}
  152.                                                 {% if pimcore_link('contact-number').getHref() | default() %}
  153.                                                     <a href="{{ pimcore_link('contact-number').getHref() }}"
  154.                                                        class="flex font-bold text-blue hover:underline">
  155.                                                 <span
  156.                                                         class="flex items-center justify-center w-6 h-6 bg-white rounded-full shadow-md">
  157.                                                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path
  158.                                                                 fill="currentColor" fill-rule="evenodd"
  159.                                                                 d="m13.47 9.12-2.8-.7a.703.703 0 0 0-.752.292L8.126 11.4A11.959 11.959 0 0 1 2.6 5.874l2.688-1.792a.7.7 0 0 0 .291-.752l-.7-2.8A.7.7 0 0 0 4.2 0H.7a.7.7 0 0 0-.7.7C.01 8.042 5.958 13.99 13.3 14a.7.7 0 0 0 .7-.7V9.8a.7.7 0 0 0-.53-.68Z"></path></svg>
  160.                                                 </span>
  161.                                                     </a>
  162.                                                 {% endif %}
  163.                                             </div>
  164.                                         </div>
  165.                                     {% endif %}
  167.                                     {% if loop.index == pimcore_block('contacts').getCount() - 1 %}
  168.                                         <hr class="bg-blue-200 opacity-50">
  169.                                     {% endif %}
  170.                                 {% endfor %}
  171.                             </div>
  172.                         </div>
  173.                     {% endif %}
  174.                 </div>
  175.             </div>
  176.         </section>
  177.     {% endblock %}
  178. {% endembed %}