custom/plugins/EmovaWbTheme/src/Resources/views/storefront/component/product/listing.html.twig line 1

Open in your IDE?
  1. {% set currentPage = ((searchResult.criteria.offset + 1) / searchResult.criteria.limit )|round(0, 'ceil') %}
  2. {% set paginationConfig = { page: currentPage }|json_encode %}
  3. {% set activeName = page.header.navigation.active.customFields.custom_emova_category_title %}
  5. {% if disableEmptyFilter is not defined %}
  6.     {% set disableEmptyFilter = config('core.listing.disableEmptyFilterOptions') %}
  7. {% endif %}
  9. {% set listingPagination = {
  10.     sidebar: sidebar,
  11.     params: params,
  12.     dataUrl: dataUrl,
  13.     filterUrl: filterUrl,
  14.     disableEmptyFilter: disableEmptyFilter,
  15.     snippets: {
  16.         resetAllButtonText: 'listing.filterPanelResetAll'|trans|sw_sanitize
  17.     }
  18. } %}
  20. {% block product_listing %}
  21.     <div class="cms-element-product-listing-wrapper"
  22.          data-listing-pagination="true"
  23.          data-listing-pagination-options='{{ paginationConfig }}'
  24.          data-listing="true"
  25.          data-listing-options='{{ listingPagination|json_encode }}'>
  27.         {% block element_product_listing_wrapper_content %}
  28.             <div class="cms-element-product-listing">
  29.                 {% if searchResult.total > 0 %}
  30.                     {% block element_product_listing_pagination_nav_actions %}
  31.                         <div style="padding-top: 30px; text-align: center;" class="cms-element-product-listing-actions row justify-content-between">
  32.                             {# <div class="col-md-auto">
  33.                                 {% block element_product_listing_pagination_nav_top %}
  34.                                     {% sw_include '@Storefront/storefront/component/pagination.html.twig' with {
  35.                                         entities: searchResult,
  36.                                         criteria: searchResult.criteria
  37.                                     } %}
  38.                                 {% endblock %}
  39.                             </div> #}
  40.                             <div class="col-md-auto almarenaDisplayBold" style="color: white; font-size:40px; width:100% !important; margin-bottom:30px">
  41.                                 {% if activeName %}
  42.                                 <h1>
  43.                                     {{ activeName }}
  44.                                 </h1>
  45.                                 {% endif %}
  46.                                 <div hidden>
  47.                                     Unsere Wallboxen
  48.                                 </div>
  49.                             </div>
  50.                             <div class="col-md-auto" style="width:100% !important">
  51.                                 {% block element_product_listing_sorting %}
  52.                                     {% sw_include '@Storefront/storefront/component/sorting.html.twig' with {
  53.                                         current: searchResult.sorting,
  54.                                         sortings: searchResult.availableSortings
  55.                                     } %}
  56.                                 {% endblock %}
  57.                             </div>
  58.                         </div>
  59.                     {% endblock %}
  60.                 {% endif %}
  62.                 {% block element_product_listing_row %}
  63.                     <div class="row cms-listing-row js-listing-wrapper centerHorizontally">
  64.                         {% if searchResult.total > 0 %}
  65.                             {% block element_product_listing_col %}
  66.                                 {% for product in searchResult %}
  67.                                     <div class="cms-listing-col {{ listingColumns }}"
  68.                                         style="padding-right: 12px !important; padding-left: 12px !important;
  69.                                                margin-bottom: 24px !important;">
  70.                                         {% block element_product_listing_box %}
  71.                                             {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
  72.                                                 'layout': boxLayout,
  73.                                                 'displayMode': displayMode
  74.                                             } %}
  75.                                         {% endblock %}
  76.                                     </div>
  77.                                 {% endfor %}
  78.                             {% endblock %}
  79.                         {% else %}
  80.                             {% block element_product_listing_col_empty %}
  81.                                 <div class="cms-listing-col col-12">
  82.                                     {% block element_product_listing_col_empty_alert %}
  83.                                         {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  84.                                             type: 'info',
  85.                                             content: 'listing.emptyResultMessage'|trans|sw_sanitize
  86.                                         } %}
  87.                                     {% endblock %}
  88.                                 </div>
  89.                             {% endblock %}
  90.                         {% endif %}
  91.                     </div>
  92.                 {% endblock %}
  94.                 {% if searchResult.total > searchResult.limit %}
  95.                     {% block element_product_listing_pagination_nav_bottom %}
  96.                         {% sw_include '@Storefront/storefront/component/pagination.html.twig' with {
  97.                             entities: searchResult,
  98.                             criteria: searchResult.criteria,
  99.                             paginationLocation: 'bottom',
  100.                         } %}
  101.                     {% endblock %}
  102.                 {% endif %}
  103.             </div>
  104.         {% endblock %}
  105.     </div>
  106. {% endblock %}
  108. <style>
  109.   .centerHorizontally{
  110.         display: flex;
  111.         flex-direction: row;
  112.         flex-wrap: wrap;
  113.         justify-content: center;
  114.         align-items: center;
  115.     }
  116. </style>
  117. <script>
  118.     function openDetails(event, url){
  119.         if (!event.target.classList.contains('details-btn-arrow') && !event.target.closest('.details-btn-arrow')) {
  120.             window.location.href = url;
  121.         }
  122.     }
  123. </script>