{% extends base_layout() %}{% if category.oms is not empty and subcategory.oms is not empty %} {% if category.combinedCategoryName is not empty %} {% set categorieName = category.combinedCategoryName|capitalize %} {% else %} {% set categorieName = category.oms|capitalize %} {% endif %} {% set head_title = subcategory.oms ~ ' | ' ~ categorieName %}{% endif %}{% block content %} {% if category is defined %} <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> <div class="container"> <div class="row"> <div class="col-12 col-md-5 col-lg-4 mb-5"> <div class="area-col h-auto"> <div class="area-col-inner position-relative area-shape-responsive area-shape-default bg-light-grey bg-opacity-50 p-5 submenu my-3"> <h3 class="mb-3 text-secondary">{{ 'Filters'|trans }}</h3> <hr> <div class="ms-3"> {% if merken|length > 0 %} <div class="my-3"> <h4>{{ 'Merken'|trans }}</h4> <ul class="list-group"> {% for merk in merken %} <li class="form-check"> <input class="form-check-input me-1 filtermerk" type="checkbox" value="{% if merk == 'Overige merken' %}{% else %}{{ merk }}{% endif %}" id="flexCheck{{ loop.index }}"> <label class="form-check-label" for="flexCheck{{ loop.index }}"> {{ merk }} </label> </li> {% endfor %} </ul> </div> {% endif %} <div class="my-3"> <h4>{{ 'Stock Status'|trans }}</h4> <ul class="list-group"> <li class="form-check"> <input class="form-check-input filterstock" type="checkbox" value="2" id="stockCheck1"> <label class="form-check-label" for="stockCheck1"> <span class="stockgroen ms-1"> <i class="fas fa-xs fa-circle"></i> {{ 'Op voorraad'|trans }} </span> </label> </li> <li class="form-check"> <input class="form-check-input filterstock" type="checkbox" value="1" id="stockCheck2"> <label class="form-check-label" for="stockCheck2"> <span class="stockoranje ms-1"> <i class="fas fa-xs fa-circle"></i> {{ 'Bijna uitverkocht'|trans }} </span> </label> </li> <li class="form-check"> <input class="form-check-input filterstock" type="checkbox" value="0" id="stockCheck3"> <label class="form-check-label" for="stockCheck3"> <span class="stockrood ms-1"> <i class="fas fa-xs fa-circle"></i> {{ 'Uitverkocht'|trans }} </span> </label> </li> </ul> </div> <div class="my-3"> <h4>{{ 'Prijs'|trans }}</h4> <div class="form-check"> <input class="form-check-input filterprice" type="checkbox" value="down" id="flexCheckPriceDown"> <label class="form-check-label" for="flexCheckPriceDown"> {{ 'Laag - Hoog'|trans }} </label> </div> <div class="form-check"> <input class="form-check-input filterprice" type="checkbox" value="up" id="flexCheckPriceUp"> <label class="form-check-label" for="flexCheckPriceUp"> {{ 'Hoog - Laag'|trans }} </label> </div> </div> </div> <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <clipPath clipPathUnits="objectBoundingBox" id="shapeyellow"> <path d="M0.536,0.991 s-0.414,0.038,-0.47,-0.038 C0.013,0.879,-0.009,0.825,0.004,0.696 s0.013,-0.268,0.013,-0.376 C0.018,0.133,0.026,0.017,0.269,0.006 C0.512,-0.005,0.731,-0.001,0.854,0.023 c0.121,0.023,0.14,0.05,0.143,0.241 c0.003,0.192,0.017,0.613,-0.062,0.688 c-0.054,0.051,-0.125,0.042,-0.399,0.038"></path> </clipPath> </svg> </div> </div> <div class="area-col h-auto"> <div class="area-col-inner position-relative area-shape-responsive area-shape-default bg-light-grey bg-opacity-50 p-5 submenu"> <h3 class="mb-3 text-secondary">{{ 'Categorieën'|trans }}</h3> {% if subcategoryList is defined %} <ul class="list-unstyled"> {% for subcat in subcategoryList %} {% set detailLink = app_product_subgrouplink(category,subcat) %} <li class="mb-3"> <a href="{{ detailLink }}" class="position-relative {% if subcat.id == subcategory.id %}active{% endif %}">{{ subcat.oms|capitalize }} <span class="material-symbols-outlined inline-icon text-secondary">chevron_right</span></a> </li> {% endfor %} </ul> {% endif %} <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <clipPath clipPathUnits="objectBoundingBox" id="shapeyellow"> <path d="M0.536,0.991 s-0.414,0.038,-0.47,-0.038 C0.013,0.879,-0.009,0.825,0.004,0.696 s0.013,-0.268,0.013,-0.376 C0.018,0.133,0.026,0.017,0.269,0.006 C0.512,-0.005,0.731,-0.001,0.854,0.023 c0.121,0.023,0.14,0.05,0.143,0.241 c0.003,0.192,0.017,0.613,-0.062,0.688 c-0.054,0.051,-0.125,0.042,-0.399,0.038"></path> </clipPath> </svg> </div> </div> </div> <div class="col-12 col-md-7 col-lg-8"> <div class="row mb-5"> <div class="col-8 mb-3 pt-5 position-relative"> {% set categoryLink = app_product_grouplink(category) %} <h1> {% if category.combinedCategoryName is not empty %} {% set categorieName = category.combinedCategoryName|capitalize %} {% else %} {% set categorieName = category.oms|capitalize %} {% endif %} {{ categorieName }} </h1> <span class="position-absolute top-0 pt-3"> <a href="{% if check_websitesetting('product_document', 'document') %}{{ inotherlang('LocalizedDocument', pimcore_website_config('product_document')) }}{% endif %}">{{ 'Aanbod'|trans }}</a> / <a href="{{ categoryLink }}"> {% if category.combinedCategoryName is not empty %} {% set categorieName = category.combinedCategoryName|capitalize %} {% else %} {% set categorieName = category.oms|capitalize %} {% endif %} {{ categorieName }} </a> / <span class="text-primary">{{ subcategory.oms|capitalize }}</span> </span> </div> <p class="text-black">{{ category.infoProductGroup }}</p> <h2 class="text-primary">{{ subcategory.oms|capitalize }}</h2> <p class="text-black">{{ subcategory.infoProductSubGroup }}</p> </div> <div class="row g-5 mb-5 row-cols-2 row-cols-md-3 row-cols-lg-4 productoverview"> {% for product in productlist %} {% set detailLink = app_product_articlelink(category,subcategory,product) %} {% if product.promotion != true %} <div class="col"> <div class="media-body text-center"> <a href="{{ detailLink }}"> {% if product.getFotos() is defined %} {% if product.getFotos() %} <div class="position-relative"> <img src="{{ product.getFotos().getThumbnail('prod-thumb') }}" class="img-fluid"> </div> {% else %} <div> <img src="/static/img/noimage.png" class="img-fluid"> </div> {% endif %} {% endif %} <div class="fw-bold pt-3"> {{ product.oms }} </div> </a> <div class="d-inline-block"> {% if product.prijs is defined %} {% if product.prijs is defined %} {% if product.productAPE %} € {{ product.prijs|number_format(2, ',', ' ') }} / {{ product.APEeenheid | trans}} {% else %} € {{ product.prijs|number_format(2, ',', ' ') }} {% endif %} {% endif %} {% endif %} </div> <div class="d-inline-block"> {% if product.stock <= 0 %} <span class="stockrood ms-1"> <a href="#" data-bs-toggle="tooltip" data-bs-title="{{ 'momenteel niet voorradig'|trans }}" data-bs-placement="right"><i class="fas fa-xs fa-circle"></i></a> </span> {% elseif product.stock <= product.aantalVerkochtLaatsteMaand %} <span class="stockoranje ms-1"> <a href="#" data-bs-toggle="tooltip" data-bs-title="{{ 'beperkte voorraad'|trans }}" data-bs-placement="right"><i class="fas fa-xs fa-circle"></i></a></span> {% elseif product.stock > product.aantalVerkochtLaatsteMaand %} <span class="stockgroen ms-1"> <a href="#" data-bs-toggle="tooltip" data-bs-title="{{ 'voldoende vooraad'|trans }}" data-bs-placement="right"><i class="fas fa-xs fa-circle"></i></a></span> {% endif %} </div> {# <a href="{{ detailLink }}" class="btn btn-primary">{{ 'Meer lezen'|trans }}</a> #} </div> </div> {% else %} <div class="col"> <div class="media-body text-center"> <a href="{{ detailLink }}"> {% if product.getFotos() is defined %} {% if product.getFotos() %} <div class="position-relative"> <img src="{{ product.getFotos().getThumbnail('prod-thumb') }}" class="img-fluid"> </div> {% else %} <div> <img src="/static/img/noimage.png" class="img-fluid"> </div> {% endif %} {% endif %} <div class="fw-bold pt-3"> {{ product.oms }} </div> </a> <div class="d-inline-block"> {% if product.promoprijs is defined %} {% if product.promoprijs > 0 %} <div class="promoprijs"> <div class="d-inline-block"> {% if product.productAPE %} {% set APE = product.prijs * product.AantalPerEenheid %} {% set APEpromo = product.promoprijs * product.AantalPerEenheid %} <strike>€ {{ APE|number_format(2, ',', ' ') }}</strike> <span>€ {{ APEpromo|number_format(2, ',', ' ') }}</span> {% else %} <strike>€ {{ product.prijs|number_format(2, ',', ' ') }}</strike> <span>€ {{ product.promoprijs|number_format(2, ',', ' ') }}</span> {% endif %} </div> </div> {% else %} {% if product.productAPE %} {% set APE = product.prijs * product.AantalPerEenheid %} <br>€ {{ APE|number_format(2, ',', ' ') }} {% else %} <br>€ {{ product.prijs|number_format(2, ',', ' ') }} {% endif %} {% endif %} {% endif %} </div> <div class="d-inline-block"> {% if product.stock <= 0 %} <span class="stockrood ms-1"> <a href="#" data-bs-toggle="tooltip" data-bs-title="{{ 'momenteel niet voorradig'|trans }}" data-bs-placement="right"><i class="fas fa-xs fa-circle"></i></a> </span> {% elseif product.stock <= product.aantalVerkochtLaatsteMaand %} <span class="stockoranje ms-1"> <a href="#" data-bs-toggle="tooltip" data-bs-title="{{ 'beperkte voorraad'|trans }}" data-bs-placement="right"><i class="fas fa-xs fa-circle"></i></a></span> {% elseif product.stock > product.aantalVerkochtLaatsteMaand %} <span class="stockgroen ms-1"> <a href="#" data-bs-toggle="tooltip" data-bs-title="{{ 'voldoende vooraad'|trans }}" data-bs-placement="right"><i class="fas fa-xs fa-circle"></i></a></span> {% endif %} </div> {# <a href="{{ detailLink }}" class="btn btn-primary">{{ 'Meer lezen'|trans }}</a> #} </div> </div> {% endif %} {% endfor %} </div> <div class="row"> <div class="col-12 pagination"> {% include 'includes/pagination-product-ajax.html.twig' %} </div> </div> <div class="row mb-5"> <div class="col-12 text-center"> {% set categoryLink = app_product_grouplink(category) %} <a class="btn btn-outline-secondary" href="{% if check_websitesetting('product_document', 'document') %}{{ inotherlang('LocalizedDocument', pimcore_website_config('product_document')) }}{% endif %}"> <span class="material-symbols-outlined inline-icon">chevron_left</span> {{ 'Terug naar aanbod'|trans }}{# {{ category.oms }} #} </a> </div> </div> </div> </div> </div> {% endif %}{% endblock %}