templates/products-detail.html.twig line 1

Open in your IDE?
  1. {% extends 'layout.html.twig' %}
  3. {% block content %}
  5.     {% include 'includes/breadcrumb.html.twig' %}
  7.     {% set category = product.categories is iterable ? product.categories|first : false %}
  9.     <section class="section-filter">
  10.         <div class="container-fluid">
  11.             <div class="row align-items-center">
  12.                 <div class="col-auto">
  13.                     {% if category %}
  14.                         <p class="h1">{{ category.name }}</p>
  15.                     {% endif %}
  16.                 </div>
  18.                 {#
  19.                 <div class="col-auto ms-auto">
  20.                     <select name="" id="" class="form-select">
  21.                         <option value="">Toon als thumbnails</option>
  22.                     </select>
  23.                 </div>
  25.                 <div class="col-auto">
  26.                     <select name="" id="" class="form-select">
  27.                         <option value="">Sorteer op productgroep</option>
  28.                     </select>
  29.                 </div>
  31.                 <div class="col-auto">
  32.                     <select name="" id="" class="form-select">
  33.                         <option value="">Toon aantal (9)</option>
  34.                     </select>
  35.                 </div>
  36.                 #}
  37.             </div><!--/ .row -->
  38.         </div><!--/ .container -->
  39.     </section>
  41.     <section class="section-products">
  42.         <div class="container-fluid">
  43.             <div class="container-inner">
  44.                 <div class="row">
  45.                     <div class="col-auto">
  46.                         <h1 class="h2 mb-1">{{ product.name }}</h1>
  48.                         {% if product.onOrder %}
  49.                             <span class="badge bg-danger">{{ 'Op bestelling!'|trans }}</span>
  50.                         {% endif %}
  52.                         <p class="text-primary mb-5">{{ 'Code'|trans }}: {{ product.code }} — {{ 'Merk'|trans }}: {{ product.brand }} {% if product.categoryTypes %} — {{ 'Categorietype'|trans }}: {{ product.categoryTypes|map(t => t.name)|join(', ') }}{% endif %}</p>
  53.                     </div>
  55.                     <div class="col-auto ms-auto">
  56.                         <favorite-button
  57.                             product-id="{{ product.id }}"
  58.                             :is-current-favorite="{{ product.id in favoriteIds ? 'true' : 'false' }}"
  59.                         ></favorite-button>
  60.                     </div>
  62.                     <favorite-modal></favorite-modal>
  63.                 </div>
  66.                 <div class="row">
  67.                     <div class="col-lg-3">
  68.                         {% if product.images %}
  69.                         {% set imageList = product.images|json_decode %}
  71.                         <div class="product-detail-images">
  72.                             <!-- swiper -->
  73.                             <div id="detail-slider" class="swiper swiper--detail">
  74.                                 <div class="swiper-wrapper">
  75.                                         {% for photo in imageList %}
  76.                                             <div class="swiper-slide">
  77.                                                 <a href="{{ photo.lightboxImage }}" class="product-lightbox"
  78.                                                    data-glightbox="type: image">
  79.                                                     <img class="img-fluid" src="{{ photo.thumbnailImage }}" alt="">
  80.                                                 </a>
  81.                                             </div>
  82.                                         {% endfor %}
  83.                                 </div>
  85.                                 <div class="swiper-button-prev"></div>
  86.                                 <div class="swiper-button-next"></div>
  87.                             </div><!--/ .swiper -->
  89.                             <!-- swiper -->
  90.                             <div class="swiper swiper--detail-thumbs" id="detail-thumbs-slider">
  91.                                 <div class="swiper-wrapper">
  92.                                     {% for photo in imageList %}
  94.                                         <div class="swiper-slide">
  95.                                             <img class="img-fluid" src="{{ photo.thumbnailImage }}" alt="">
  96.                                         </div>
  97.                                     {% endfor %}
  98.                                 </div>
  99.                             </div><!--/ .swiper -->
  100.                         </div>
  101.                         {% else %}
  103.                             <div class="img-wrapper placeholder-img">
  104.                                 <img src="{{ asset('/img/placeholder.png') }}" alt="" class="img-fluid w-100">
  105.                             </div>
  106.                         {% endif %}
  108.                         {% if product.productsheet %}
  109.                             <div class="row">
  110.                                     <div class="productsheet">
  111.                                         <a class="btn btn-hyperlink icon-link" href="{{ product.productsheet }}" target="_blank">
  112.                                             {{ 'Bekijk productfiche'|trans }}
  113.                                             <i class="icon-link-ext"></i>
  114.                                         </a>
  115.                                     </div>
  116.                             </div><!--/ .row -->
  117.                         {% endif %}
  118.                     </div>
  120.                     <div class="col-lg-8 offset-lg-1">
  121.                         <div class="row">
  122.                             <div class="col-auto">
  123.                                 <div class="product-detail-price">
  124.                                     {% if not product.OSPrice.getAmount.isZero %}
  125.                                         <div class="price {% if
  126.                                             product.promoDate1 and product.promoDate2 and
  127.                                             date(product.promoDate1) < date() and date(product.promoDate2) > date() %}
  128.                                 price--promo
  129.                             {% endif %}">{{ product.OSPrice }}<small class="price-unit">/{{ product.unit }}</small>
  130.                                         </div>
  131.                                         {% if( product.discount ) %}
  132.                                             {% if( product.OSPrice != product.OSDefaultPrice ) %}
  133.                                                 <p class="old-price">{{ product.OSDefaultPrice }}</p>
  134.                                             {% endif %}
  135.                                             <div class="promo">-{{ product.discount }}%</div>
  136.                                         {% endif %}
  138.                                     {% endif %}
  139.                                     {% if
  140.                                         product.promoDate1 and product.promoDate2 and
  141.                                         date(product.promoDate1) < date() and date(product.promoDate2) > date() %}
  142.                                         {# Show promo price even when prices should not show #}
  143.                                         {% if product.OSPrice.getAmount.isZero %}
  144.                                             {% if product.promoPrice %}
  145.                                                 <div class="price price--promo">{{ product.promoPrice | currency }}
  146.                                                     <small class="price-unit">/{{ product.unit }}</small></div>
  147.                                             {% endif %}
  148.                                             {% if( product.promoPercentage ) %}
  149.                                                 <div class="promo">-{{ product.promoPercentage }}%</div>
  150.                                             {% endif %}
  151.                                         {% endif %}
  153.                                         <p class="date">
  154.                                             ({{ 'Promotie vanaf'|trans }} {{ product.promoDate1|date('d/m/Y') }} {{ 'tot'|trans }} {{ product.promoDate2|date('d/m/Y') }}
  155.                                             )</p>
  156.                                     {% endif %}
  157.                                 </div>
  158.                             </div>
  160.                             <div class="col-auto ms-auto">
  161.                                 <add-to-cart
  162.                                     product-id="{{ product.id }}"
  163.                                     unit="{{ product.unit }}"
  164.                                     minimum-unit="{{ 0 + product.unitMinimum }}"
  165.                                     amount-in-cart="{{ cartItems[product.id] ?? 0 }}"
  166.                                 ></add-to-cart>
  167.                             </div>
  168.                         </div><!--/ .row -->
  170.                         {% if product.onOrder %}
  171.                             {% set orderMessage = product_order_message(product) %}
  172.                             {% if orderMessage %}
  173.                                 <div class="alert alert-warning d-flex align-items-start" role="alert">
  174.                                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" class="flex-shrink-0 me-2 mt-1" aria-hidden="true">
  175.                                         <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.286.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  176.                                     </svg>
  177.                                     <span style="white-space: pre-wrap;">{{ orderMessage }}</span>
  178.                                 </div>
  179.                             {% endif %}
  180.                         {% endif %}
  182.                         {% set default_tab = null %}
  184.                         <ul class="nav nav--tabs" id="nav-tab" role="tablist">
  185.                             {% if product.ingredients %}
  186.                                 {% set default_tab = 1 %}
  187.                                 <li class="nav-item">
  188.                                     <button class="nav-link {{ default_tab == 1 ? 'active' : '' }}" id="nav-tab-1"
  189.                                             data-bs-toggle="tab" data-bs-target="#tab-1" role="tab"
  190.                                             aria-selected="true">{{ 'Ingrediënten'|trans }}</button>
  191.                                 </li>
  192.                             {% endif %}
  194.                             {% if product.description %}
  195.                                 {% set default_tab = default_tab ? default_tab : 2 %}
  196.                                 <li class="nav-item">
  197.                                     <button class="nav-link {{ default_tab == 2 ? 'active': '' }}" id="nav-tab-2"
  198.                                             data-bs-toggle="tab" data-bs-target="#tab-2" role="tab"
  199.                                             aria-selected="true">{{ 'Omschrijving'|trans }}</button>
  200.                                 </li>
  201.                             {% endif %}
  203.                             {% if product.nutrients %}
  204.                                 {% set default_tab = default_tab ? default_tab : 3 %}
  205.                                 <li class="nav-item">
  206.                                     <button class="nav-link {{ default_tab == 3 ? 'active' : '' }}" id="nav-tab-3"
  207.                                             data-bs-toggle="tab" data-bs-target="#tab-3" role="tab"
  208.                                             aria-selected="false">{{ 'Voedingswaarde'|trans }}</button>
  209.                                 </li>
  210.                             {% endif %}
  212.                             {% if allergens and (allergens|length) > 0 %}
  213.                                 {% set default_tab = default_tab ? default_tab : 4 %}
  214.                                 <li class="nav-item">
  215.                                     <button class="nav-link {{ default_tab == 4 ? 'active' : '' }}" id="nav-tab-4"
  216.                                             data-bs-toggle="tab" data-bs-target="#tab-4" role="tab"
  217.                                             aria-selected="false">{{ 'Wettelijke allergenen'|trans }}</button>
  218.                                 </li>
  219.                             {% endif %}
  221.                             {% if product.psinfoodDocuments %}
  222.                                 {% set default_tab = default_tab ? default_tab : 5 %}
  223.                                 <li class="nav-item">
  224.                                     <button class="nav-link {{ default_tab == 5 ? 'active' : '' }}" id="nav-tab-5"
  225.                                             data-bs-toggle="tab" data-bs-target="#tab-5" role="tab"
  226.                                             aria-selected="false">{{ 'Documenten'|trans }}</button>
  227.                                 </li>
  228.                             {% endif %}
  229.                         </ul>
  231.                         <div class="tab-content" id="tab-content">
  232.                             {% if product.ingredients %}
  233.                                 <div class="tab-pane fade {{ default_tab == 1 ? 'show active' : '' }}" id="tab-1"
  234.                                      aria-labelledby="nav-tab-1" role="tabpanel">
  235.                                     {{ product.ingredients }}
  236.                                 </div>
  237.                             {% endif %}
  239.                             {% if product.description %}
  240.                                 <div class="tab-pane fade {{ default_tab == 2 ? 'show active' : '' }}" id="tab-2"
  241.                                      aria-labelledby="nav-tab-2" role="tabpanel">
  242.                                     {{ product.description|raw|nl2br }}
  243.                                 </div>
  244.                             {% endif %}
  246.                             {% if product.nutrients %}
  247.                                 <div class="tab-pane fade {{ default_tab == 3 ? 'show active' : '' }}" id="tab-3"
  248.                                      aria-labelledby="nav-tab-3" role="tabpanel">
  249.                                     <table class="table">
  250.                                         {% for nutrient in product.nutrients|json_decode %}
  251.                                             <tr>
  252.                                                 <td>{{ nutrient.name }}:</td>
  253.                                                 <td class="text-end">{{ nutrient.value }} {{ nutrient.unit }}</td>
  254.                                             </tr>
  255.                                         {% endfor %}
  256.                                     </table>
  257.                                 </div>
  258.                             {% endif %}
  260.                             {% if allergens %}
  261.                                 <div class="tab-pane fade {{ default_tab == 4 ? 'show active' : '' }}" id="tab-4"
  262.                                      aria-labelledby="nav-tab-4" role="tabpanel">
  263.                                     {% set counter = 0 %}
  265.                                     {% for allergen_type in allergens %}
  266.                                         {% if allergen_type and allergen_type.fields|length %}
  267.                                             {% set counter = counter + 1 %}
  268.                                             <p><strong>{{ allergen_type['title'] }}:</strong></p>
  270.                                             <ul class="ingredients">
  271.                                                 {% for allergen in allergen_type.fields %}
  272.                                                     <li>{{ allergen }}</li>
  273.                                                 {% endfor %}
  274.                                             </ul>
  275.                                         {% endif %}
  276.                                     {% endfor %}
  278.                                     {% if counter == 0 %}
  279.                                         <p>{{ 'Geen allergeeninformatie beschikbaar voor dit product'|trans }}</p>
  280.                                     {% endif %}
  281.                                 </div>
  282.                             {% endif %}
  284.                             {% if product.psinfoodDocuments %}
  285.                                 <div class="tab-pane fade {{ default_tab == 5 ? 'show active' : '' }}" id="tab-5"
  286.                                      aria-labelledby="nav-tab-5" role="tabpanel">
  287.                                     <ul class="ingredients">
  288.                                         {% for document in product.psinfoodDocuments|json_decode %}
  289.                                             <li>
  290.                                                 <a href="{{ document.downloadurl }}">
  291.                                                     {{ document.labelname.value }}
  292.                                                     {% if document.title.value is same as('string') %}
  293.                                                         {{ document.title.value }}
  294.                                                     {% endif %}
  295.                                                 </a>
  296.                                             </li>
  297.                                         {% endfor %}
  298.                                     </ul>
  299.                                 </div>
  300.                             {% endif %}
  301.                         </div>
  302.                     </div>
  303.                 </div><!--/ .row -->
  304.             </div>
  305.         </div><!--/ .container-fluid -->
  306.     </section>
  308. {% endblock %}