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

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  5.     {% do pimcore_head_title().set(pageTitle) %}
  6.     {% do pimcore_head_meta().setDescription(pageDescription) %}
  8.     <main role="main" class="products mt-100 pt-0 pt-lg-100">
  9.         {{ render(controller('App\\Controller\\MenuController::breadcrumbsAction')) }}
  10.         <div class="pb-20 mx-10 mx-md-40 mx-lg-70 ">
  11.             <div class="row gx-0 gx-lg-70">
  12.                 <h1 class="d-block d-lg-none mb-0">{{ categorydo.name }}</h1>
  13.                 <div class="sidebar">
  14.                     <div class="sticky-lg-top pt-20">
  15.                         <div class="pb-0 pb-lg-20 mb-10">
  16.                             <form class="form-inline d-flex border border-black" role="search">
  17.                                 <input class="form-control me-5 border-0 search-input w-100 ps-10" id="fast-search" type="search" placeholder="{{ 'Search product code'|trans }}" aria-label="Search">
  18.                                 <button class="btn border-0 py-10 ps-5 pe-10 align-items-center fast-search-submit d-none" type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
  19.                             </form>
  20.                         </div>
  21.                         <style>
  22.                             #fast-search { margin-right:0!important; }
  23.                             #fast-search::placeholder { font-size: 12px!important; }
  24.                             #fast-search::-webkit-input-placeholder { font-size: 12px!important; }
  25.                             #fast-search::-moz-placeholder { font-size: 12px!important; }
  26.                         </style>
  27.                         <!-- start accordion -->
  28.                         <div class="accordion" id="mobileAccordion">
  29.                             <div class="accordion-item rounded-0 border-0">
  30.                                 <div class="accordion-header">
  31.                                     <button class="accordion-button rounded-0 bg-transparent shadow-none px-0 collapsed d-flex d-lg-none fs-25 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#filtersAccordion" aria-expanded="false" aria-controls="filtersAccordion">
  32.                                         {{ 'FILTERS'|trans }}
  33.                                     </button>
  34.                                 </div>
  35.                                 <div class="pb-0 pb-lg-20 mb-10 " id="filtersAccordion">
  36.                                     <form id="js_filterfield">
  37.                                         {% if term is defined %}
  38.                                         <input type="hidden" name="term" value="{{ term }}"/>
  39.                                         {% endif %}
  40.                                         {% if(filterDefinition.filters|length > 0) %}
  41.                                             {% for filter in filterDefinition.filters %}
  42.                                                 {% set filterMarkup = filterService.filterFrontend(filter, productListing, currentFilter) %}
  43.                                                 {{ filterMarkup | raw  }}
  44.                                             {% endfor %}
  45.                                         {% endif %}
  46.                                     </form>
  47.                                 </div>
  48.                             </div>
  49.                         </div>
  50.                         <!-- end accordion -->
  51.                     </div>
  52.                 </div>
  53.                 <div class="col-12 col-lg pt-20">
  54.                     <h1 class="d-none d-lg-block">{{ categorydo.name }}</h1>
  56.                     <div class="category-description mt-40">{{ intro|raw }}</div>
  57.                     <div class="filters-active d-flex gap-10"><a href="#" class="d-flex gap-5 align-items-center py-5 px-10 fs-15 border border-black">poltroncina <i class="fa-sharp fa-solid fa-xmark"></i></a><a href="#" class="d-flex gap-5 align-items-center py-5 px-10 fs-15 border border-black">moderno <i class="fa-sharp fa-solid fa-xmark"></i></a></div>
  58.                     
  59.                     <div class="num-products my-10 d-none">{{  results.count() }} {{ 'PRODUCTS'|trans }}</div>
  60.                     <div class="row gx-20">
  61.                         {% for product in results %}
  62.                             <div class="col-6 col-lg-4 col-xxl-3 col-xxl-5x single-product text-center position-relative mb-60" data-sku="{{ product.codice|lower }}">
  63.                                 <a href="{{ product.url[0].slug }}" class="product text-center d-block my-10">
  64.                                     <div class="image p-15">
  65.                                         {% if product.fotoPricipale is not empty %}
  66.                                             {{ product.fotoPricipale.getThumbnail("product_listing").getHtml()|raw }}
  67.                                         {% else %}
  68.                                             <img src="/busetto-placeholder.jpg" alt="" >
  69.                                         {% endif %}
  71.                                     </div>
  72.                                 </a>
  73.                                 <div class="d-flex justify-content-center align-items-center gap-20">
  74.                                 <span>{{ product.nome }}</span>
  75.                                 {% if product.url3d %}
  76.                                 <div class="banner3d-container">
  77.                                     <a href="{{ product.url3d }}" target="_blank" class="banner3d"></a>
  78.                                 </div>
  79.                                 {% endif %}
  80.                                 </div>
  81.                             </div>
  82.                         {% endfor %}
  83.                     </div>
  84.                     <div class="category-description mt-40">{{ description|raw }}</div>
  85.                 </div>
  86.             </div>
  87.         </div>
  89.     </main>
  90.     {% do pimcore_inline_script().appendScript("
  92.     $('#js_filterfield .custom-checkbox input, #js_filterfield .custom-radio input').on('change', function() {
  93.         $('#js_filterfield').submit();
  94.     });
  96.     function createActiveFilters(){
  97.         var sPageURL = decodeURIComponent(window.location.search.substring(1));
  98.         var array =[]
  99.         var sURLVariables = sPageURL.split('&');
  100.         $('.filters-active').empty();
  101.         for (var i = 0; i < sURLVariables.length; i++) {
  102.             var sParameterName = sURLVariables[i].split('=');
  103.             createFilter(sParameterName[0], sParameterName[1]);
  104.         }
  105.     }
  107.     function createFilter(type, value){
  108.         var type = type.replace('[]', '');
  109.         var id = type+value;
  110.         if($('#'+id).length){
  111.             var e = $('<a href=\"#\" class=\"d-flex gap-5 align-items-center py-5 px-10 fs-15 border border-black\" data-filterid=\"'+id+'\">'+ $('label[for=\"'+id+'\"').html() +' <i class=\"fa-sharp fa-solid fa-xmark\"></i></a>');
  112.             $('.filters-active').append(e);
  113.         }
  114.     }
  116.     $('body').on('click', '.filters-active > a', function(){
  117.         $('#'+$(this).attr('data-filterid')).prop('checked', false);
  118.         $('#js_filterfield').submit();
  119.     });
  121.     createActiveFilters();
  123.     $('.readMore').on('click', function(){
  124.         if($(this).hasClass('active')){
  125.             $(this).removeClass('active');
  126.             $(this).find('.open').css('display','block');
  127.             $(this).find('.close').css('display','none');
  128.             $('.moreText').slideUp();
  129.         } else {
  130.             $(this).addClass('active');
  131.             $(this).find('.open').css('display','none');
  132.             $(this).find('.close').css('display','block');
  133.             $('.moreText').slideDown();
  134.         }
  135.     });
  137.     ") %}
  139. {% endblock %}