templates/page/product/list.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_title %}
  4.     {{ 'storefront.title'|resolve|striptags }} | Produkte
  5. {% endblock %}
  7. {% block head_custom_stylesheets %}
  8.     {{ encore_entry_link_tags('hero-header') }}
  9.     {{ encore_entry_link_tags('product-card') }}
  10. {% endblock head_custom_stylesheets %}
  12. {% block content %}
  13.     {% if category and category.headerImage %}
  14.         <div class="hero-header" style="background-image: url(/images/{{ category.headerImage }});">
  15.             <div class="hero-header-inner">
  16.                 <div class="container-3xl">
  17.                     <div class="row">
  18.                         <div class="col-12">
  19.                             <h1 class="hero-headline mb-5 text-white">{{ 'product.list.page.headline'|resolve }}</h1>
  20.                         </div>
  21.                     </div>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.     {% else %}
  26.         <div class="container-3xl mb-0 mt-5 mt-sm-5">
  27.             <div class="row">
  28.                 <div class="col-12">
  29.                     <h1 class="ornament-with-child">{{ 'product.list.page.headline'|resolve }}</h1>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     {% endif %}
  35.     <div class="container-3xl my-5">
  36.         <div class="row">
  37.             <div class="col-12">
  38.             {{ 'product.list.page.description'|resolve }}
  39.             </div>
  40.         </div>
  41.     </div>
  43.     <div class="product-cards container-3xl my-3 mb-sm-6">
  44.         <div class="row g-4 match-height-product" data-match-height-group="product-group">
  45.             {% if tenant.categories|length > 0 %}
  46.                 {% for product in tenant.products|filter(product => category in product.categories) %}
  47.                     {% set productConfig = product.config|json_decode %}
  48.                     <div class="col-12 col-md-6">
  49.                         <div data-match-height="product" class="product position-relative d-flex flex-column justify-content-between h-100 p-3 p-sm-5 bg-lightgrey">
  50.                             <div class="row">
  51.                                 <div class="col-12 col-sm-{{ product.listImage ? '8' : '12' }} order-2 order-sm-1">
  52.                                     <h4 class="mb-4">{{ product.name }}</h4>
  53.                                     <div>
  54.                                         <p class="line-clamp clamp-4">{{ product.shortDescription }}</p>
  55.                                         <ul id="product-config">
  56.                                             {% if productConfig.kim_addresses_included %}
  57.                                                 <li>
  58.                                                     {{ productConfig.kim_addresses.quantity }}x KIM Adressen
  59.                                                 </li>
  60.                                             {% endif %}
  61.                                             {% if productConfig.hardware_included %}
  62.                                                 {% for hardware in productConfig.hardware %}
  63.                                                     {% if hardware.quantity > 0 %}
  64.                                                         <li>
  65.                                                             {{ hardware.quantity }}x {{ hardware.hardware|resolve }}
  66.                                                         </li>
  67.                                                     {% endif %}
  68.                                                 {% endfor %}
  69.                                             {% endif %}
  70.                                         </ul>
  71.                                     </div>
  72.                                 </div>
  73.                                 {% if product.listImage %}
  74.                                     <div class="col-12 col-sm-4 order-1 order-sm-2 mb-4">
  75.                                         <img class="w-100" src="/images/{{ product.listImage }}" alt="{{ product.name }}">
  76.                                     </div>
  77.                                 {% endif %}
  78.                             </div>
  79.                             <a href="{{ path('product_details', {productId: product.id}) }}" class="d-flex justify-content-end align-items-center text-decoration-none fw-bold my-3 mt-sm-0"><span class="me-2">Mehr erfahren </span><i class="fas fa-arrow-right"></i></a>
  80.                         </div>
  81.                     </div>
  82.                 {% endfor %}
  83.             {% else %}
  84.                 {% for product in tenant.products %}
  85.                     {% set productConfig = product.config|json_decode %}
  86.                     <div class="col-xs-12 col-md-6 mb-3">
  87.                         <div class="product position-relative d-flex flex-column justify-content-between h-100 p-3 p-sm-5 bg-lightgrey">
  88.                             <div class="row">
  89.                                 <div class="col-xs-12 col-sm-{{ product.listImage ? '8' : '12' }} order-2 order-sm-1">
  90.                                     <h4 class="mb-4">{{ product.name }}</h4>
  91.                                     <div>
  92.                                         <p>{{ product.shortDescription }}</p>
  93.                                         <ul>
  94.                                             {% if productConfig.kim_addresses_included %}
  95.                                                 <li>
  96.                                                     {{ productConfig.kim_addresses.quantity }} KIM Adressen
  97.                                                 </li>
  98.                                             {% endif %}
  99.                                             {% if productConfig.hardware_included %}
  100.                                                 {% for hardware in productConfig.hardware %}
  101.                                                     <li>
  102.                                                         {{ hardware.quantity }} {{ hardware.hardware }}
  103.                                                     </li>
  104.                                                 {% endfor %}
  105.                                             {% endif %}
  106.                                         </ul>
  107.                                     </div>
  108.                                 </div>
  109.                                 {% if product.listImage %}
  110.                                     <div class="col-xs-12 col-sm-4 order-1 order-sm-2 mb-4">
  111.                                         <img class="w-100" src="/images/{{ product.listImage }}" alt="{{ product.name }}">
  112.                                     </div>
  113.                                 {% endif %}
  114.                             </div>
  115.                             <a href="{{ path('product_details', {productId: product.id}) }}" class="d-flex justify-content-end align-items-center text-decoration-none fw-bold"><span class="me-2">Mehr erfahren </span><i class="fas fa-arrow-right"></i></a>
  116.                         </div>
  117.                     </div>
  118.                 {% endfor %}
  119.             {% endif %}
  120.         </div>
  121.     </div>
  122. {% endblock %}