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.         <div class="filter-panel-active-title">
  42.           {{ 'wyn-theme.listing.filterActiveTitle'|trans|sw_sanitize }}
  43.         </div>
  44.         <div class="filter-panel-active-container"></div>
  45.       </div>
  46.     </div>
  47.   {% endblock %}
  49.   <div
  50.     class="cms-element-product-listing-wrapper"
  51.     data-listing-load-more="true"
  52.     data-listing-load-more-options='{{ loadMoreConfig|json_encode }}'
  53.     data-listing="true"
  54.     data-listing-options='{{ listingPagination|json_encode }}'
  55.   >
  56.     {% block element_product_listing_wrapper_content %}
  57.       <div class="cms-element-product-listing">
  59.         {% block element_product_listing_row %}
  60.           <div class="row cms-listing-row js-listing-wrapper {% if searchResult.total == 0 %}cms-listing-row--empty{% endif %}">
  61.             {% if searchResult.total > 0 %}
  62.               {% block element_product_listing_col %}
  63.                 {% for product in searchResult %}
  64.                   {# In Shopware's default, classes {{ listingColumns }} are inserted here,
  65.                      which differ when a sidebar is shown (and may differ for product overview / wishlist /
  66.                      search results). For more flexibility we use a grid layout here. #}
  67.                   <div class="cms-listing-col">
  68.                     {% block element_product_listing_box %}
  69.                       {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
  70.                         'layout': boxLayout,
  71.                         'displayMode': displayMode
  72.                       } %}
  73.                     {% endblock %}
  74.                   </div>
  75.                 {% endfor %}
  76.               {% endblock %}
  77.             {% else %}
  78.               {% block element_product_listing_col_empty %}
  79.                 <div class="cms-listing-col col-12">
  80.                   {% block element_product_listing_col_empty_alert %}
  81.                     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  82.                       type: 'info',
  83.                       content: 'listing.emptyResultMessage'|trans|sw_sanitize
  84.                     } %}
  85.                   {% endblock %}
  86.                 </div>
  87.               {% endblock %}
  88.             {% endif %}
  89.           </div>
  90.         {% endblock %}
  92.         {% if searchResult.total > searchResult.limit %}
  93.           <div class="visible-products-progress">
  94.             <div class="progress">
  95.               <div
  96.                 class="progress-bar" role="progressbar"
  97.                 style="width: {{ 100 * (visibleProducts / searchResult.total) }}%"
  98.                 aria-valuenow="{{ visibleProducts }}"
  99.                 aria-valuemin="{{ productsPerPage }}"
  100.                 aria-valuemax="{{ searchResult.total }}"
  101.               >
  102.               </div>
  103.             </div>
  104.             <div class="progress-info">
  105.               {{ 'wyn-theme.listing.visibleProductsInfo'|trans|replace({
  106.                 '%current%': visibleProducts,
  107.                 '%total%': searchResult.total,
  108.               }) }}
  109.             </div>
  110.             <wyn-button variant="secondary" class="progress-load-more-button js-load-more">
  111.               {{ 'wyn-theme.listing.loadMoreProducts'|trans|sw_sanitize }}
  112.             </wyn-button>
  113.           </div>
  114.         {% endif %}
  115.       </div>
  116.     {% endblock %}
  117.   </div>
  118. {% endblock %}