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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/component/product/listing.html.twig' %}
  3. {% set currentPage = ((searchResult.criteria.offset + 1) / searchResult.criteria.limit )|round(0, 'ceil') %}
  4. {% set paginationConfig = { page: currentPage }|json_encode %}
  5. {% set productsPerPage = config('core.listing.productsPerPage') %}
  6. {% set visibleProducts = searchResult.limit > searchResult.total ? searchResult.total : searchResult.limit %}
  7. {% set loadMoreConfig = {
  8.   limit: searchResult.limit,
  9.   total: searchResult.total,
  10.   productsPerPage: productsPerPage
  11. } %}
  13. {% if disableEmptyFilter is not defined %}
  14.   {% set disableEmptyFilter = config('core.listing.disableEmptyFilterOptions') %}
  15. {% endif %}
  17. {% set listingPagination = {
  18.   sidebar: sidebar,
  19.   params: params,
  20.   dataUrl: dataUrl,
  21.   filterUrl: filterUrl,
  22.   disableEmptyFilter: disableEmptyFilter,
  23.   snippets: {
  24.     resetAllButtonText: 'listing.filterPanelResetAll'|trans|sw_sanitize
  25.   }
  26. } %}
  28. {% block product_listing %}
  29.   {% block element_product_listing_pagination_nav_actions %}
  30.     <div class="cms-element-product-listing-actions">
  31.       <div class="sorting-and-filter">
  32.         {% block element_product_listing_sorting %}
  33.           {% sw_include '@Storefront/storefront/component/sorting.html.twig' with {
  34.             current: searchResult.sorting,
  35.             sortings: searchResult.availableSortings
  36.           } %}
  37.         {% endblock %}
  38.       </div>
  40.       <div class="active-filters">
  41.         <h2 class="filter-panel-active-title">Ihre Filter</h2>
  42.         <div class="filter-panel-active-container"></div>
  43.       </div>
  44.     </div>
  45.   {% endblock %}
  47.   <div
  48.     class="cms-element-product-listing-wrapper"
  49.     data-listing-load-more="true"
  50.     data-listing-load-more-options='{{ loadMoreConfig|json_encode }}'
  51.     data-listing="true"
  52.     data-listing-options='{{ listingPagination|json_encode }}'
  53.   >
  54.     {% block element_product_listing_wrapper_content %}
  55.       <div class="cms-element-product-listing">
  57.         {% block element_product_listing_row %}
  58.           <div class="row cms-listing-row js-listing-wrapper">
  59.             {% if searchResult.total > 0 %}
  60.               {% block element_product_listing_col %}
  61.                 {% for product in searchResult %}
  62.                   {# In Shopware's default, classes {{ listingColumns }} are inserted here,
  63.                      which differ when a sidebar is shown (and may differ for product overview / wishlist /
  64.                      search results). For more flexibility we use a grid layout here. #}
  65.                   <div class="cms-listing-col">
  66.                     {% block element_product_listing_box %}
  67.                       {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
  68.                         'layout': boxLayout,
  69.                         'displayMode': displayMode
  70.                       } %}
  71.                     {% endblock %}
  72.                   </div>
  73.                 {% endfor %}
  74.               {% endblock %}
  75.             {% else %}
  76.               {% block element_product_listing_col_empty %}
  77.                 <div class="cms-listing-col col-12">
  78.                   {% block element_product_listing_col_empty_alert %}
  79.                     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  80.                       type: 'info',
  81.                       content: 'listing.emptyResultMessage'|trans|sw_sanitize
  82.                     } %}
  83.                   {% endblock %}
  84.                 </div>
  85.               {% endblock %}
  86.             {% endif %}
  87.           </div>
  88.         {% endblock %}
  90.         {% if searchResult.total > searchResult.limit %}
  91.           <div class="visible-products-progress">
  92.             <div class="progress">
  93.               <div
  94.                 class="progress-bar" role="progressbar"
  95.                 style="width: {{ 100 * (visibleProducts / searchResult.total) }}%"
  96.                 aria-valuenow="{{ visibleProducts }}"
  97.                 aria-valuemin="{{ productsPerPage }}"
  98.                 aria-valuemax="{{ searchResult.total }}"
  99.               >
  100.               </div>
  101.             </div>
  102.             <div class="progress-info">
  103.               {{ 'listing.visibleProductsInfo'|trans|replace({
  104.                 '%current%': visibleProducts,
  105.                 '%total%': searchResult.total,
  106.               }) }}
  107.             </div>
  108.             <wyn-button variant="secondary" class="progress-load-more-button js-load-more">
  109.               {{ 'listing.loadMoreProducts'|trans|sw_sanitize }}
  110.             </wyn-button>
  111.           </div>
  112.         {% endif %}
  113.       </div>
  114.     {% endblock %}
  115.   </div>
  116. {% endblock %}