{extends file='widgets/base/widget.tpl'}

{block name="et-widget-inline-styles"}
    {* Custom colors *}
    {if $et_ProductList.customColorsEnabled}
        <style>
            {if !empty($et_ProductList.colorBox)}
                #{$et_BaseWidget.cssId} .productbox { background-color: {$et_ProductList.colorBox}; }
            {/if}
            {if !empty($et_ProductList.colorFont)}
                #{$et_BaseWidget.cssId} .productbox { color: {$et_ProductList.colorFont}; }
            {/if}
            {if !empty($et_ProductList.colorSpecialPrice)}
                #{$et_BaseWidget.cssId} .special-price { color: {$et_ProductList.colorSpecialPrice}; }
            {/if}
            {if !empty($et_ProductList.colorButtonBackground)}
                #{$et_BaseWidget.cssId} .btn-primary { background-color: {$et_ProductList.colorButtonBackground}; }
            {/if}
            {if !empty($et_ProductList.colorButtonFont)}
                #{$et_BaseWidget.cssId} .btn-primary { color: {$et_ProductList.colorButtonFont}; }
            {/if}
            {if !empty($et_ProductList.colorButtonBorder)}
                #{$et_BaseWidget.cssId} .btn-primary { border-color: {$et_ProductList.colorButtonBorder}; }
            {/if}
            {if !empty($et_ProductList.colorCartButtonBackground)}
                #{$et_BaseWidget.cssId} .btn-cart { background-color: {$et_ProductList.colorCartButtonBackground}; }
            {/if}
            {if !empty($et_ProductList.colorCartButtonFont)}
                #{$et_BaseWidget.cssId} .btn-cart { color: {$et_ProductList.colorCartButtonFont}; }
            {/if}
            {if !empty($et_ProductList.colorCartButtonBorder)}
                 #{$et_BaseWidget.cssId} .btn-cart { border-color: {$et_ProductList.colorCartButtonBorder}; }
            {/if}
            {if !empty($et_ProductList.colorPaginationBackground)}
                #{$et_BaseWidget.cssId} .pagination { background-color: {$et_ProductList.colorPaginationBackground}; }
            {/if}
            {if !empty($et_ProductList.colorPaginationFont)}
                #{$et_BaseWidget.cssId} .pagination { color: {$et_ProductList.colorPaginationFont}; }
            {/if}
            {if !empty($et_ProductList.colorPaginationCurrentBackground)}
                #{$et_BaseWidget.cssId} .pagination .active { background-color: {$et_ProductList.colorPaginationCurrentBackground}; }
            {/if}
            {if !empty($et_ProductList.colorPaginationCurrentFont)}
                #{$et_BaseWidget.cssId} .pagination .active { color: {$et_ProductList.colorPaginationCurrentFont}; }
            {/if}
            {if !empty($et_ProductList.colorCategorySelectBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-category-tree .btn { background-color: {$et_ProductList.colorCategorySelectBackground}; }
                #{$et_BaseWidget.cssId} .et-categories-mega-main-category  { background-color: {$et_ProductList.colorCategorySelectBackground}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-category-tree .dropdown-menu { background-color: {$et_ProductList.colorCategorySelectBackground}; }
            {/if}
            {if !empty($et_ProductList.colorCategorySelectFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-category-tree .btn { color: {$et_ProductList.colorCategorySelectFont}; }
                #{$et_BaseWidget.cssId} .et-categories-mega-main-category { color: {$et_ProductList.colorCategorySelectFont}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-category-tree .dropdown-menu { color: {$et_ProductList.colorCategorySelectFont}; }
            {/if}
            {if !empty($et_ProductList.colorCategorySelectSubcategoriesBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-category-tree .subcategory-wrapper { background-color: {$et_ProductList.colorCategorySelectSubcategoriesBackground}; }
            {/if}
            {if !empty($et_ProductList.colorCategorySelectSubcategoriesFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-category-tree .subcategory-wrapper { color: {$et_ProductList.colorCategorySelectSubcategoriesFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-header { background-color: {$et_ProductList.colorFilterBackground}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-top-wrapper { background-color: {$et_ProductList.colorFilterBackground}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-left-wrapper { background-color: {$et_ProductList.colorFilterBackground}; }
            {/if}
            {if !empty($et_ProductList.colorFilterFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-header { color: {$et_ProductList.colorFilterFont}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-top-wrapper { color: {$et_ProductList.colorFilterFont}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-left-wrapper { color: {$et_ProductList.colorFilterFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterSelectBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .btn { background-color: {$et_ProductList.colorFilterSelectBackground}; }
            {/if}
            {if !empty($et_ProductList.colorFilterSelectFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .btn { color: {$et_ProductList.colorFilterSelectFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterSelectContentBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .dropdown-menu { background-color: {$et_ProductList.colorFilterSelectContentBackground}; }
            {/if}
            {if !empty($et_ProductList.colorFilterSelectContentFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .dropdown-menu { color: {$et_ProductList.colorFilterSelectContentFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterSelectBadgeBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .dropdown-menu .badge { background-color: {$et_ProductList.colorFilterSelectBadgeBackground}; }
            {/if}
            {if !empty($et_ProductList.colorFilterSelectBadgeFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .dropdown-menu .badge { color: {$et_ProductList.colorFilterSelectBadgeFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterActiveFiltersBackground)}
                #{$et_BaseWidget.cssId} .et-active-filter { background-color: {$et_ProductList.colorFilterActiveFiltersBackground}; }
            {/if}
            {if !empty($et_ProductList.colorFilterActiveFiltersFont)}
                #{$et_BaseWidget.cssId} .et-active-filter { color: {$et_ProductList.colorFilterActiveFiltersFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterActiveFiltersResetFont)}
                #{$et_BaseWidget.cssId} .et-active-filter-clear { color: {$et_ProductList.colorFilterActiveFiltersFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterHeadingBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-collapse { background-color: {$et_ProductList.colorFilterHeadingBackground}; }
            {/if}
            {if !empty($et_ProductList.colorFilterHeadingFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-collapse { color: {$et_ProductList.colorFilterHeadingFont}; }
            {/if}
            {if !empty($et_ProductList.colorFilterActiveBadgeBackground)}
                #{$et_BaseWidget.cssId} .et-active-filter .badge { background-color: {$et_ProductList.colorFilterActiveBadgeBackground}; }
            {/if}
            {if !empty($et_ProductList.colorFilterActiveBadgeFont)}
                #{$et_BaseWidget.cssId} .et-active-filter .badge { color: {$et_ProductList.colorFilterActiveBadgeFont}; }
            {/if}
            {if !empty($et_ProductList.colorMoreBackground)}
                #{$et_BaseWidget.cssId} .et-more-filters-trigger .btn {
                    background-color: {$et_ProductList.colorMoreBackground};
                    border-color: {$et_ProductList.colorMoreBackground};
                }
            {/if}
            {if !empty($et_ProductList.colorMoreFont)}
                #{$et_BaseWidget.cssId} .et-more-filters-trigger .btn { color: {$et_ProductList.colorMoreFont}; }
            {/if}
            {if !empty($et_ProductList.colorSortBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-sort .btn { background-color: {$et_ProductList.colorSortBackground}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-productsperpage .btn { background-color: {$et_ProductList.colorSortBackground}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-productsperpage .et-product-list-filter-nav-item { background-color: {$et_ProductList.colorSortBackground}; }
            {/if}
            {if !empty($et_ProductList.colorSortFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-sort .btn { color: {$et_ProductList.colorSortFont}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-productsperpage .btn { color: {$et_ProductList.colorSortFont}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-productsperpage .et-product-list-filter-nav-item { color: {$et_ProductList.colorSortFont}; }
            {/if}
            {if !empty($et_ProductList.colorSortActiveBackground)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-sort .active { background-color: {$et_ProductList.colorSortActiveBackground}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-productsperpage .active { background-color: {$et_ProductList.colorSortActiveBackground}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-productsperpage .et-product-list-filter-nav-item.active { background-color: {$et_ProductList.colorSortActiveBackground}; }
            {/if}
            {if !empty($et_ProductList.colorSortActiveFont)}
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-sort .active { color: {$et_ProductList.colorSortActiveFont}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-item .et-product-list-filter-productsperpage .active { color: {$et_ProductList.colorSortActiveFont}; }
                #{$et_BaseWidget.cssId} .et-product-list-filter-productsperpage .et-product-list-filter-nav-item.active { color: {$et_ProductList.colorSortActiveFont}; }
            {/if}
        </style>
    {/if}
{/block}

{block name="et-widget-container-inner"}
    {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
    {et_getDevice assign='et_device'}
    {$filterStyle = $et_ProductList.filterStyle}
    {if $et_device !== 'desktop'}
        {$filterStyle = $et_ProductList.filterStyleMobile}
    {/if}
    {$isEtAjaxFilter = !empty($smarty.request.etAjaxFilter)}

    {* DETERMINE DISPLAY OF THIS LIST *}
    {* Prio: -> Funktionsattribut -> Benutzereingabe -> ET360-Einstellung -> Core Default *}
    {$categoryFunctionAttributeDisplay = ''}
    {if !$shopIsAtLeast52}
        {if !empty($AktuelleKategorie->categoryFunctionAttributes['darstellung'])}
            {$categoryFunctionAttributeDisplay = $AktuelleKategorie->categoryFunctionAttributes['darstellung']}
        {/if}
    {else}
        {$categoryFunctionAttributeDisplay = $AktuelleKategorie->getCategoryFunctionAttribute('darstellung')}
    {/if}
    {if (!empty($categoryFunctionAttributeDisplay) && $categoryFunctionAttributeDisplay == 1)
    || (empty($categoryFunctionAttributeDisplay) && !empty($smarty.session.et_userSelectedProductListDisplayType) && $smarty.session.et_userSelectedProductListDisplayType == 1)
    || (empty($categoryFunctionAttributeDisplay) && empty($smarty.session.et_userSelectedProductListDisplayType) && !empty($et_ProductList.displayStyle) && $et_ProductList.displayStyle === 'list')
    || (empty($categoryFunctionAttributeDisplay) && empty($smarty.session.et_userSelectedProductListDisplayType) && empty($et_ProductList.displayStyle) && (!empty($oErweiterteDarstellung->nDarstellung) && $oErweiterteDarstellung->nDarstellung == 1))
    }
        {assign var=style value='list'}
        {assign var=colsPerRowXs value=$et_ProductList.listProductsPerRow.xs}
        {assign var=colsPerRowSm value=$et_ProductList.listProductsPerRow.sm}
        {assign var=colsPerRowMd value=$et_ProductList.listProductsPerRow.md}
        {assign var=colsPerRowLg value=$et_ProductList.listProductsPerRow.lg}
        {assign var=colsPerRowXl value=$et_ProductList.listProductsPerRow.xl}
    {else}
        {assign var=style value='gallery'}
        {assign var=colsPerRowXs value=$et_ProductList.galleryProductsPerRow.xs}
        {assign var=colsPerRowSm value=$et_ProductList.galleryProductsPerRow.sm}
        {assign var=colsPerRowMd value=$et_ProductList.galleryProductsPerRow.md}
        {assign var=colsPerRowLg value=$et_ProductList.galleryProductsPerRow.lg}
        {assign var=colsPerRowXl value=$et_ProductList.galleryProductsPerRow.xl}
    {/if}

    {block name='productlist-index-list-type'}
        <input type="hidden" id="product-list-type" value="{$style}">
    {/block}

    {* Default sliders by JTL, they are fallbacks if no results were in the actual result set and the corresponding Kategorieinhalt is only set if enabled in the shop admin. *}
    {if ($Suchergebnisse->getProducts() === null || count($Suchergebnisse->getProducts()) <= 0) && isset($KategorieInhalt) && !$isEtAjaxFilter}
        {if isset($KategorieInhalt->TopArtikel->elemente) && count($KategorieInhalt->TopArtikel->elemente) > 0 && $et_ProductList.showTopOnEmpty}
            {block name='productlist-header-include-product-slider-top'}
                {opcMountPoint id='opc_before_category_top'}
                {lang key='topOffer' assign='slidertitle'}
                {include file='snippets/product_slider.tpl' id='slider-top-products'
                productlist=$KategorieInhalt->TopArtikel->elemente title=$slidertitle lazyLoadImages=$et_BaseWidget.lazyLoadImages}
            {/block}
        {/if}

        {if isset($KategorieInhalt->BestsellerArtikel->elemente) && count($KategorieInhalt->BestsellerArtikel->elemente) > 0 && $et_ProductList.showBestsellerOnEmpty}
            {block name='productlist-header-include-product-slider-bestseller'}
                {opcMountPoint id='opc_before_category_bestseller'}
                {lang key='bestsellers'  assign='slidertitle'}
                {include file='snippets/product_slider.tpl' id='slider-bestseller-products'
                productlist=$KategorieInhalt->BestsellerArtikel->elemente title=$slidertitle lazyLoadImages=$et_BaseWidget.lazyLoadImages}
            {/block}
        {/if}
    {/if}
    {if $et_ProductList.filterPosition !== 'none' && ($Suchergebnisse->getProducts() !== null && count($Suchergebnisse->getProducts()) > 0 || $NaviFilter->getFilterCount() > 0) && !$isEtAjaxFilter}
        {block name="et-product-list-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_ProductList.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
    {/if}
    {block name="et-product-list-scroll-target"}
        {$autoScrollTarget = ''}
        {if isset($et_ProductList.autoScrollEnabled) && $et_ProductList.autoScrollEnabled}
            {$autoScrollTarget = '#products'}
            {if !empty($et_ProductList.products) && !$isEtAjaxFilter}
                <div id="products"></div>
            {/if}
        {/if}
    {/block}
    <div class="et-product-list-wrapper row et-product-list-filter-position-{$et_ProductList.filterPosition} et-product-list-filter-style-{$filterStyle} et-product-list-display-style-{$style} et-product-list-hover-style-{if $style === 'list'}{$et_ProductList.listHoverStyle}{else}{$et_ProductList.galleryHoverStyle}{/if}" data-et-products-total="{if $Suchergebnisse->getProducts() !== null && count($Suchergebnisse->getProducts()) > 0 || $NaviFilter->getFilterCount() > 0}{$Suchergebnisse->getProductCount()}{else}0{/if}"{if $et_ProductList.filterMode === 'click' || $et_ProductList.filterModeMobile === 'click'} data-et-ajax-filter{/if}>
        {if $et_ProductList.filterPosition !== 'none' && ($Suchergebnisse->getProducts() !== null && count($Suchergebnisse->getProducts()) > 0 || $NaviFilter->getFilterCount() > 0)}
            {block name="et-product-list-filter-wrapper"}
                {* This element is loaded into AJAX filtering and will be Replaced*}
                <div class="{block name="et-product-list-filter-wrapper-class"}col-12{if $et_ProductList.filterPosition === 'left'} col-lg-3{/if} et-product-list-filter-wrapper{/block}">
                    {opcMountPoint id='et_before_filters' inContainer=true}
                    {* FILTERS *}
                    {if $et_ProductList.filterPosition === 'top'}
                        {block name='et-product-list-filter-top-wrapper'}
                            <div class="et-product-list-filter-top-wrapper">
                                {include file='widgets/snippets/product_list_filter_top.tpl'
                                filtersPerRow=$et_ProductList.filtersPerRow
                                categoryTreePosition=$et_ProductList.categoryTreePosition
                                filtersActive=($NaviFilter->getFilterCount() > 0)
                                moreFiltersLimit=$et_ProductList.moreFiltersLimit
                                styleActive=$style
                                autoScrollTarget=$autoScrollTarget
                                hideUselessFilters=$et_ProductList.hideUselessFilters
                                categoryTreeActiveOnly=$et_ProductList.categoryTreeActiveOnly
                                categoryTreeMaxLevel=$et_ProductList.categoryTreeMaxLevel
                                categoryTreeMoreChildrenLimit=$et_ProductList.categoryTreeMoreChildrenLimit
                                lazyLoadImages=$et_BaseWidget.lazyLoadImages
				                filterMode=$et_ProductList.filterMode
				                filterModeMobile=$et_ProductList.filterModeMobile
                            	filterDisplayMobile=$et_ProductList.filterDisplayMobile
                            	filterModalPosition=$et_ProductList.filterModalPosition
                                filterOrder=$et_ProductList.filterOrder
                            	sortingDisplayMobile=$et_ProductList.sortingDisplayMobile
                            	sortingModalPosition=$et_ProductList.sortingModalPosition
                                isEtAjaxFilter=$isEtAjaxFilter}
                            </div>
                        {/block}

                        {block name='et-product-list-filter-total'}
                            <div class="et-product-list-filter-total">
                                {$Suchergebnisse->getProductCount()} {lang key="products" section="global"}
                            </div>
                        {/block}
                    {elseif $et_ProductList.filterPosition === 'left'}
                        {block name='et-product-list-filter-left-wrapper'}
                            <div class="et-product-list-filter-left-wrapper{if $et_ProductList.stickyLeft} et-sticky et-sticky-affix{/if}"{if $et_ProductList.stickyLeft} data-affix-to="#product-list" data-sticky-breakpoints='{block name='et-product-list-sticky-left-breakpoints-filter-left'}{block name='product-list-sticky-left-breakpoints'}{ "xs": false, "sm": false, "md": false, "lg": true, "xl": true }{/block}{/block}'{/if}>
                                {include file='widgets/snippets/product_list_filter_left.tpl'
                                filterStyle=$filterStyle
                                categoryTreePosition=$et_ProductList.categoryTreePosition
                                filtersActive=($NaviFilter->getFilterCount() > 0)
                                styleActive=$style
                                autoScrollTarget=$autoScrollTarget
                                hideUselessFilters=$et_ProductList.hideUselessFilters
                                categoryTreeActiveOnly=$et_ProductList.categoryTreeActiveOnly
                                categoryTreeMaxLevel=$et_ProductList.categoryTreeMaxLevel
                                categoryTreeMoreChildrenLimit=$et_ProductList.categoryTreeMoreChildrenLimit
                                lazyLoadImages=$et_BaseWidget.lazyLoadImages
				                filterMode=$et_ProductList.filterMode
				                filterModeMobile=$et_ProductList.filterModeMobile
                                filterDisplayMobile=$et_ProductList.filterDisplayMobile
                                filterModalPosition=$et_ProductList.filterModalPosition
                                filterOrder=$et_ProductList.filterOrder
                                sortingDisplayMobile=$et_ProductList.sortingDisplayMobile
                                sortingModalPosition=$et_ProductList.sortingModalPosition
                                isEtAjaxFilter=$isEtAjaxFilter}
                            </div>
                        {/block}
                    {/if}
                    {opcMountPoint id='et_after_filters' inContainer=true}
                </div>
                {if $et_ProductList.filterPosition === 'top' && $et_ProductList.categoryTreePosition === 'alwaysLeft' && !$isEtAjaxFilter}
                    {block name="et-product-list-category-tree-always-left-filter-top"}
                        {block name="et-product-list-category-tree-always-left"}
                            {* In this case the category is on the left while filters are on the top (= hybrid view) *}
                            <div class="{block name="et-product-list-category-tree-always-left-class"}d-none d-lg-block col-lg-3 et-product-list-filter-wrapper{/block}">
                                <div class="et-product-list-filter-left-wrapper{if $et_ProductList.stickyLeft} et-sticky et-sticky-affix{/if}"{if $et_ProductList.stickyLeft} data-affix-to="#product-list" data-sticky-breakpoints='{block name='et-product-list-sticky-left-breakpoints-filter-top'}{block name='product-list-sticky-left-breakpoints'}{ "xs": false, "sm": false, "md": false, "lg": true, "xl": true }{/block}{/block}'{/if}>
                                    <div class="row et-product-list-filter-left">
                                        <div class="col-12">
                                            {block name="et-product-list-filter-category-tree-before-filters"}
                                                <div class="et-product-list-filter-category-tree before-filters">
                                                    {include file='snippets/categories_mega.tpl'
                                                        autoScrollTarget=$autoScrollTarget
                                                        activeOnly=$et_ProductList.categoryTreeActiveOnly
                                                        maxLevel=$et_ProductList.categoryTreeMaxLevel
                                                        categoryTreeMoreChildrenLimit=$et_ProductList.categoryTreeMoreChildrenLimit
                                                    }
                                                </div>
                                            {/block}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {/block}
                    {/block}
                {/if}
            {/block}
        {elseif $et_ProductList.categoryTreePosition === 'alwaysLeft' && $Suchergebnisse->getProducts() !== null && count($Suchergebnisse->getProducts()) > 0 && !$isEtAjaxFilter}
            {* Make sure the category tree is always shown if it is displayed independently of filters *}
            {block name="et-product-list-category-tree-always-left-filter-none"}
                {block name="et-product-list-category-tree-always-left"}
                    <div class="{block name="et-product-list-category-tree-always-left-class"}d-none d-lg-block col-lg-3 et-product-list-filter-wrapper{/block}">
                        <div class="et-product-list-filter-left-wrapper{if $et_ProductList.stickyLeft} et-sticky et-sticky-affix{/if}"{if $et_ProductList.stickyLeft} data-affix-to="#product-list" data-sticky-breakpoints='{block name='et-product-list-sticky-left-breakpoints-filter-none'}{block name='product-list-sticky-left-breakpoints'}{ "xs": false, "sm": false, "md": false, "lg": true, "xl": true }{/block}{/block}'{/if}>
                            <div class="row et-product-list-filter-left">
                                <div class="col-12">
                                    {block name="et-product-list-filter-category-tree-before-filters"}
                                        <div class="et-product-list-filter-category-tree before-filters">
                                            {include file='snippets/categories_mega.tpl'
                                            autoScrollTarget=$autoScrollTarget
                                            activeOnly=$et_ProductList.categoryTreeActiveOnly
                                            maxLevel=$et_ProductList.categoryTreeMaxLevel
                                            categoryTreeMoreChildrenLimit=$et_ProductList.categoryTreeMoreChildrenLimit
                                            }
                                        </div>
                                    {/block}
                                </div>
                            </div>
                        </div>
                    </div>
                {/block}
            {/block}
        {/if}
        {if !$isEtAjaxFilter}
            {block name="et-product-list-products-wrapper"}
                <div class="{block name="et-product-list-products-wrapper-class"}col-12{if $et_ProductList.filterPosition === 'left' || $et_ProductList.categoryTreePosition === 'alwaysLeft'} col-lg-9{/if} et-product-list-products-wrapper{/block}">
                    {* PRODUCTS *}
                    {if !empty($Suchergebnisse->getError())}
                        {block name='productlist-index-alert'}
                            <div role="alert" class="alert alert-danger">
                                <div class="sr-only">x</div>
                                {$Suchergebnisse->getError()}
                            </div>
                        {/block}
                    {/if}
                    {if $NaviFilter->getFilterCount() > 0}
                        {$alertList->displayAlertByKey('noFilterResults')}
                    {/if}
                    {* PAGINATION BEFORE PRODUCT LIST *}
                    {if $et_ProductList.paginationPosition === 'before' || $et_ProductList.paginationPosition === 'both' || $et_ProductList.paginationMode === 'endless'}
                        {block name='et-productlist-pagination-before'}
                            {include file='widgets/snippets/product_list_pagination.tpl' endlessDirection='back' paginationMode=$et_ProductList.paginationMode endlessScrollAutoLoadCount=$et_ProductList.endlessScrollAutoLoadCount position='before' autoScrollTarget=$autoScrollTarget scrollAfterLoadTarget="#{$et_BaseWidget.cssId}"}
                        {/block}
                    {/if}
                    {block name='productlist-index-products'}
                        {if $Suchergebnisse->getProducts() !== null && count($Suchergebnisse->getProducts()) > 0 || isset($oBestseller_arr) && count($oBestseller_arr) > 0}
                            {opcMountPoint id='opc_before_products'}
                            {* NOTE: $et_ProductList.products is a merged array of oBestseller_arr and $Suchergebnisse->getProducts() *}
                            <div class="row product-list row-cols-{$colsPerRowXs} row-cols-sm-{$colsPerRowSm} row-cols-md-{$colsPerRowMd} row-cols-lg-{$colsPerRowLg} row-cols-xl-{$colsPerRowXl} layout-{$style}" data-products-per-row='{if $style === 'list'}{json_encode($et_ProductList.listProductsPerRow)}{else}{json_encode($et_ProductList.galleryProductsPerRow)}{/if}' id="product-list" itemprop="mainEntity" itemscope itemtype="https://schema.org/ItemList">
                                {foreach $et_ProductList.products as $Artikel}
                                    <div class="product-wrapper col"
                                        itemprop="itemListElement" itemscope itemtype="https://schema.org/Product"
                                    >
                                        {if $style === 'list'}
                                            {block name='productlist-index-include-item-list'}
                                                {include file='productlist/item_list.tpl'
                                                showRatings=$et_ProductList.listShowRatings
                                                showManufacturer=$et_ProductList.listShowManufacturer
                                                showAvailability=$et_ProductList.listShowAvailability
                                                showQuickview=$et_ProductList.listShowQuickview
                                                showBasket=$et_ProductList.listShowBasket
                                                showVariations=$et_ProductList.listShowVariations
                                                maxVariations=$et_ProductList.listMaxVariations
                                                maxVariationValues=$et_ProductList.listMaxVariationValues
                                                lazyLoadImages=$et_BaseWidget.lazyLoadImages
                                                tplscope='list'}
                                            {/block}
                                        {else}
                                            {block name='productlist-index-include-item-box'}
                                                {include file='productlist/item_box.tpl'
                                                showRatings=$et_ProductList.galleryShowRatings
                                                showManufacturer=$et_ProductList.galleryShowManufacturer
                                                showAvailability=$et_ProductList.galleryShowAvailability
                                                showQuickview=$et_ProductList.galleryShowQuickview
                                                showBasket=$et_ProductList.galleryShowBasket
                                                showVariations=$et_ProductList.galleryShowVariations
                                                maxVariations=$et_ProductList.galleryMaxVariations
                                                maxVariationValues=$et_ProductList.galleryMaxVariationValues
                                                hoverEffectEnabled=$et_ProductList.galleryHoverEffectEnabled|default:true
                                                lazyLoadImages=$et_BaseWidget.lazyLoadImages
                                                tplscope='gallery'}
                                            {/block}
                                        {/if}
                                    </div>
                                {/foreach}
                            </div>
                        {/if}
                    {/block}
                    {block name='et-productlist-advertising-boxes'}
                        {if $Suchergebnisse->getProducts() !== null && count($Suchergebnisse->getProducts()) > 0 || isset($oBestseller_arr) && count($oBestseller_arr) > 0}
                            {* Boxes are positioned as needed via JS *}
                            {foreach from=$et_ProductList.advertisingBoxes item='advertisingBox'}
                                {if empty($advertisingBox.minProductCount) || isset($et_ProductList.products) && count($et_ProductList.products) >= $advertisingBox.minProductCount}
                                    {if empty($advertisingBox.displayFilterView) || $advertisingBox.displayFilterView === 'all' || $advertisingBox.displayFilterView === $style}
                                    {* Note: We intentionally do not use the word ad/advertising here to prevent ad blockers from removing these while being overly zealous *}
                                    <div class="et-info-box et-info-box-display-mode-{$advertisingBox.displayMode}{if !empty($advertisingBox.boxColumnSpan.xs)} box-col-span-{$advertisingBox.boxColumnSpan.xs}{/if}{if !empty($advertisingBox.boxColumnSpan.sm)} box-col-span-sm-{$advertisingBox.boxColumnSpan.sm}{/if}{if !empty($advertisingBox.boxColumnSpan.md)} box-col-span-md-{$advertisingBox.boxColumnSpan.md}{/if}{if !empty($advertisingBox.boxColumnSpan.lg)} box-col-span-lg-{$advertisingBox.boxColumnSpan.lg}{/if}{if !empty($advertisingBox.boxColumnSpan.xl)} box-col-span-xl-{$advertisingBox.boxColumnSpan.xl}{/if} col{if !empty($advertisingBox.cssClass)} {$advertisingBox.cssClass}{/if}" data-target-position='{json_encode($advertisingBox.targetPosition)}' data-display-mode="{$advertisingBox.displayMode}">
                                        <div class="et-info-box-content">
                                            {if $advertisingBox.link !== null && !empty($advertisingBox.link.href)}
                                            <a href="{$advertisingBox.link.href}"{if !empty($advertisingBox.link.title)} title="{$advertisingBox.link.title}"{/if}{if $advertisingBox.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                                {/if}
                                                {if $advertisingBox.useCustomContent}
                                                    <div class="et-info-box-content-custom">
                                                        {$advertisingBox.content}
                                                    </div>
                                                {else}
                                                    <div class="et-info-box-content-image">
                                                        {if $advertisingBox.imageMode === 'breakpointImage'}
                                                            {include file='widgets/base/breakpoint_image.tpl' image=$advertisingBox.breakpointImage lazy=$et_BaseWidget.lazyLoadImages webp=true}
                                                        {elseif !empty($advertisingBox.image.src)}
                                                            {* Not using lazysizes here, it does not work properly for these images (probably because they are not initially visible?) and sometimes does not remove the loading class *}
                                                            {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($advertisingBox.image.srcWebP)
                                                                src="{$advertisingBox.image.src}"
                                                                alt="{$advertisingBox.image.alt}"
                                                                width={$advertisingBox.image.width}
                                                                height={$advertisingBox.image.height}
                                                                fluid=true
                                                            }
                                                        {/if}
                                                    </div>
                                                {/if}
                                                {if $advertisingBox.link !== null && !empty($advertisingBox.link.href)}
                                            </a>
                                            {/if}
                                        </div>
                                    </div>
                                    {/if}
                                {/if}
                            {/foreach}
                        {/if}
                    {/block}
                    {* PAGINATION AFTER PRODUCT LIST *}
                    {if $et_ProductList.paginationPosition === 'after' || $et_ProductList.paginationPosition === 'both' || $et_ProductList.paginationMode === 'endless'}
                        {block name='et-productlist-pagination-after'}
                            {include file='widgets/snippets/product_list_pagination.tpl' endlessDirection='forward' paginationMode=$et_ProductList.paginationMode endlessScrollAutoLoadCount=$et_ProductList.endlessScrollAutoLoadCount position='after' autoScrollTarget=$autoScrollTarget scrollAfterLoadTarget="#{$et_BaseWidget.cssId}"}
                        {/block}
                    {/if}
                </div>
            {/block}
        {/if}
    </div>
    {block name='productlist-index-include-productlist-footer'}
        {include file='productlist/footer.tpl'}
    {/block}
{/block}
