custom/plugins/DecomTheme/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 %}
  6. {% if disableEmptyFilter is not defined %}
  7.     {% set disableEmptyFilter = config('core.listing.disableEmptyFilterOptions') %}
  8. {% endif %}
  10. {% set listingPagination = {
  11.     sidebar: sidebar,
  12.     params: params,
  13.     dataUrl: dataUrl,
  14.     filterUrl: filterUrl,
  15.     disableEmptyFilter: disableEmptyFilter,
  16.     snippets: {
  17.         resetAllButtonText: 'listing.filterPanelResetAll'|trans|sw_sanitize
  18.     }
  19. } %}
  21. {% block product_listing %}
  22.     {% block product_listing_cats %}
  23.         {% set currentCategory = page.header.navigation.tree[ page.navigationId ] %}
  25.         {% if currentCategory.children|length > 1 %}
  27.             {% set sliderConfig = {
  28.                 
  29.             } %}
  31.             {% set baseSliderOptions = {
  32.                 slider: {
  33.                     navPosition: 'bottom',
  34.                     items: 4,
  35.                     speed: 500,
  36.                     loop: false,
  37.                     nav: false,
  38.                     gutter: 30,
  39.                     nav: false,
  40.                     autoHeight: false,
  41.                     startIndex: 1,
  42.                     responsive: {
  43.                         xs: {
  44.                             items: 1,    
  45.                             gutter: 0,                    
  46.                             nav: true,
  47.                         },
  48.                         sm: {
  49.                             items: 1,  
  50.                             gutter: 0,                      
  51.                             nav: true,
  52.                         },
  53.                         md: {
  54.                             items: 2,
  55.                             gutter: 20,
  56.                             nav: true,
  57.                         },
  58.                         lg: {
  59.                             items: 2,
  60.                             gutter: 20,
  61.                             nav: true,
  62.                         }
  63.                     }
  64.                 }
  65.             } %}
  66.             
  67.             <div class="category-children base-slider"
  68.                 data-base-slider="true"
  69.                 data-base-slider-options='{{ baseSliderOptions|json_encode }}'>
  70.                 <div class="base-slider-container"
  71.                     data-base-slider-container="true">
  73.                     {% for subCat in currentCategory.children|slice(0, 4) %}
  74.                         {% if subCat.category.media.url is defined %}
  75.                             <div class="base-slider-item">
  76.                                 <a href="{{ category_url( subCat.category ) }}" class="category-child">                    
  77.                                     <div class="category-image">
  78.                                         <img src="{{ subCat.category.media.url }}" alt="{{ subCat.category.name }}">
  79.                                     </div>                    
  80.                                     <div class="category-info">
  81.                                         <button class="btn btn-primary">
  82.                                             {{ subCat.category.translated.name }}
  83.                                         </button>                            
  84.                                     </div>
  85.                                 </a>
  86.                             </div>
  87.                         {% endif %}
  88.                     {% endfor %}
  89.                 </div>
  90.                 
  91.                 <div class="category-slider-controls-container">
  92.                     <div class="base-slider-controls"
  93.                         data-base-slider-controls="true">
  94.                         {% block element_category_slider_controls_items %}
  95.                             {% block element_category_slider_controls_items_arrows %}
  96.                                 <button class="base-slider-controls-prev category-slider-controls-prev{% if sliderConfig.navigationArrows.value == "outside" %} is-nav-prev-outside{% elseif sliderConfig.navigationArrows.value == "inside" %} is-nav-prev-inside{% endif %}">
  97.                                     {% block element_category_slider_controls_items_prev_icon %}
  98.                                         {% sw_icon 'arrow-head-left' %}
  99.                                     {% endblock %}
  100.                                 </button>
  101.                                 <button class="base-slider-controls-next category-slider-controls-next{% if sliderConfig.navigationArrows.value == "outside" %} is-nav-next-outside{% elseif sliderConfig.navigationArrows.value == "inside" %} is-nav-next-inside{% endif %}">
  102.                                     {% block element_category_slider_controls_items_next_icon %}
  103.                                         {% sw_icon 'arrow-head-right' %}
  104.                                     {% endblock %}
  105.                                 </button>
  106.                             {% endblock %}
  107.                         {% endblock %}
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.         {% endif %}
  113.     {% endblock %}
  114.     <div class="cms-element-product-listing-wrapper"
  115.          data-listing-pagination="true"
  116.          data-listing-pagination-options='{{ paginationConfig }}'
  117.          data-listing="true"
  118.          data-listing-options='{{ listingPagination|json_encode }}'>
  120.         {% block element_product_listing_wrapper_content %}
  121.             <div class="cms-element-product-listing">
  122.                 {% if searchResult.total > 0 %}
  123.                     {% block element_product_listing_pagination_nav_actions %}
  124.                         <div class="cms-element-product-listing-actions row justify-content-between">
  125.                             <div class="col-md-auto">
  126.                                 {% if searchResult.total != '' %}
  127.                                     <span class="listing-count">
  128.                                         {{ "checkout.itemCounter"|trans({'%count%': searchResult.total})|sw_sanitize }}
  129.                                     </span>
  130.                                 {% endif %}
  131.                             </div>
  133.                             <div class="col-md-auto">
  134.                                 {% block element_product_listing_sorting %}
  135.                                     {% sw_include '@Storefront/storefront/component/sorting.html.twig' with {
  136.                                         current: searchResult.sorting,
  137.                                         sortings: searchResult.availableSortings
  138.                                     } %}
  139.                                 {% endblock %}
  140.                             </div>
  141.                         </div>
  142.                     {% endblock %}
  143.                 {% endif %}
  145.                 {% block element_product_listing_row %}
  146.                     <div class="row cms-listing-row js-listing-wrapper">
  147.                         {% if searchResult.total > 0 %}
  148.                             {% block element_product_listing_col %}
  149.                                 {% for product in searchResult %}
  150.                                     <div class="cms-listing-col {{ listingColumns }}">
  151.                                         {% block element_product_listing_box %}
  152.                                             {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
  153.                                                 'layout': boxLayout,
  154.                                                 'displayMode': displayMode
  155.                                             } %}
  156.                                         {% endblock %}
  157.                                     </div>
  158.                                 {% endfor %}
  159.                             {% endblock %}
  160.                         {% else %}
  161.                             {% block element_product_listing_col_empty %}
  162.                                 <div class="cms-listing-col col-12">
  163.                                     {% block element_product_listing_col_empty_alert %}
  164.                                         {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  165.                                             type: 'info',
  166.                                             content: 'listing.emptyResultMessage'|trans|sw_sanitize
  167.                                         } %}
  168.                                     {% endblock %}
  169.                                 </div>
  170.                             {% endblock %}
  171.                         {% endif %}
  172.                     </div>
  173.                 {% endblock %}
  175.                 {% if searchResult.total > searchResult.limit %}
  176.                     {% block element_product_listing_pagination_nav_bottom %}
  177.                         {% sw_include '@Storefront/storefront/component/pagination.html.twig' with {
  178.                             entities: searchResult,
  179.                             criteria: searchResult.criteria
  180.                         } %}
  181.                     {% endblock %}
  182.                 {% endif %}
  183.             </div>
  184.         {% endblock %}
  185.     </div>
  186. {% endblock %}