- <div class="exSubcatSlider--holder{if (!isset($subcategorySliderBigBanner) || $subcategorySliderBigBanner == '')} hide-from-tablet{/if}">
- <div class="exSubcatSlider--title">
- {s name="exSubcategoriesSliderTitle"}Entdecken sie unser vielfältiges produktsortiment{/s}
- </div>
- <div class="product-slider emotion-ex-subcategories-slider"
- data-subcategories-slider="true"
- data-itemminwidth="280"
- data-autoslidespeed="5"
- data-animationspeed="500"
- data-infiniteSlide="false"
- >
- <span class="exSubcatSlider--label__more">{s name="exSubcategoriesLabelMore"}weitere Kategorien{/s}</span>
- <div id="exSubcategorySlider" class="product-slider--container{if $sCategoryContent.exLevel > 1} category-level--sub{else} category-level--main{/if}">
- {if $subcategoriesAmount == 1}
- <div class="product-slider--item">
- {* Product box will be placed here. *}
- <div class="product--box box--slider">
- <div class="box--content is--rounded">
- {foreach $sliderSubcategoriesCount as $category}
- <div class="ex-product-box ex-product-box-top">
- <a href="{url controller=cat sCategory=$category.id}"
- class="subcats--item">
- <div class="subcats--item-header">
- <strong class="subcats--item-title">{$category.name}</strong>
- <span class="subcats--item-amount">{$category.products} {s name='exProducts'}Produkte{/s}</span>
- </div>
- <div class="exSubcatSlider--image__svg">
- <img src="{$category.categoryImageSvgContent}">
- </div>
- <span class="arrow">
- {include file="frontend/_helpers/icon.tpl" icon="uncolorized--arrow-right-fa" class="uncolorized--arrow-right-fa"}
- </span>
- {if $abTestsVariables.mobileListing.activeVariant == 'ex_mobile_listing_new'}
- <div class="subcats--item-img">
- <img src="{$category.topSellerImg}" alt="{$category.name}">
- </div>
- {/if}
- {if $category.categoryMediaJpg}
- <img src="{$category.categoryMediaJpg}"
- class='subcats--item-hover'/>
- <div class="subcats--image__mobile" style="
- background-image: url({$category.categoryMediaJpg});
- "></div>
- {/if}
- </a>
- </div>
- {/foreach}
- <div class="ex-product-box ex-product-box-bottom">
- <a href="{url controller=cat sCategory=$category.id}" class="subcats--item">
- <div class="subcats--item-header">
- <strong class="subcats--item-title">{$category.name}</strong>
- <span class="subcats--item-amount">{$category.products} {s name='exProducts'}Produkte{/s}</span>
- </div>
- <div class="exSubcatSlider--image__svg">
- <img src="{$category.categoryImageSvgContent}">
- </div>
- <span class="arrow">
- {include file="frontend/_helpers/icon.tpl" icon="uncolorized--arrow-right-fa" class="uncolorized--arrow-right-fa"}
- </span>
- {if $category.categoryMediaJpg}
- <img src="{$category.categoryMediaJpg}"
- class='subcats--item-hover'/>
- <div class="subcats--image__mobile" style="
- background-image: url({$category.categoryMediaJpg});
- "></div>
- {/if}
- </a>
- </div>
- </div>
- </div>
- </div>
- {elseif $subcategoriesAmount == 2}
- <div class="product-slider--item">
- {* Product box will be placed here. *}
- <div class="product--box box--slider">
- <div class="box--content is--rounded">
- {foreach name=subcategoriesSlider from=$sliderSubcategoriesCount item=category}
- {if $smarty.foreach.subcategoriesSlider.first}
- <div class="ex-product-box ex-product-box-top">
- <a href="{url controller=cat sCategory=$category.id}"
- class="subcats--item">
- <div class="subcats--item-header">
- <strong class="subcats--item-title">{$category.name}</strong>
- <span class="subcats--item-amount">{$category.products} {s name='exProducts'}Produkte{/s}</span>
- </div>
- <div class="exSubcatSlider--image__svg">
- <img src="{$category.categoryImageSvgContent}">
- </div>
- <span class="arrow">
- {include file="frontend/_helpers/icon.tpl" icon="uncolorized--arrow-right-fa" class="uncolorized--arrow-right-fa"}
- </span>
- {if $abTestsVariables.mobileListing.activeVariant == 'ex_mobile_listing_new'}
- <div class="subcats--item-img">
- <img src="{$category.topSellerImg}" alt="{$category.name}">
- </div>
- {/if}
- {if $category.categoryMediaJpg}
- <img src="{$category.categoryMediaJpg}"
- class='subcats--item-hover'/>
- <div class="subcats--image__mobile" style="
- background-image: url({$category.categoryMediaJpg});
- "></div>
- {/if}
- </a>
- </div>
- {/if}
- {if $smarty.foreach.subcategoriesSlider.last}
- <div class="ex-product-box ex-product-box-bottom">
- <a href="{url controller=cat sCategory=$category.id}"
- class="subcats--item">
- <div class="subcats--item-header">
- <strong class="subcats--item-title">{$category.name}</strong>
- <span class="subcats--item-amount">{$category.products} {s name='exProducts'}Produkte{/s}</span>
- </div>
- <div class="exSubcatSlider--image__svg">
- <img src="{$category.categoryImageSvgContent}">
- </div>
- <span class="arrow">
- {include file="frontend/_helpers/icon.tpl" icon="uncolorized--arrow-right-fa" class="uncolorized--arrow-right-fa"}
- </span>
- {if $abTestsVariables.mobileListing.activeVariant == 'ex_mobile_listing_new'}
- <div class="subcats--item-img">
- <img src="{$category.topSellerImg}" alt="{$category.name}">
- </div>
- {/if}
- {if $category.categoryMediaJpg}
- <img src="{$category.categoryMediaJpg}"
- class='subcats--item-hover'/>
- <div class="subcats--image__mobile" style="
- background-image: url({$category.categoryMediaJpg});
- "></div>
- {/if}
- </a>
- </div>
- {/if}
- {/foreach}
- </div>
- </div>
- </div>
- {elseif $subcategoriesAmount > 2}
- {$index = 1}
- {foreach name=subcategoriesSlider from=$sliderSubcategoriesCount item=category}
- {if $index == 1}
- <div class="product-slider--item">
- {* Product box will be placed here. *}
- <div class="product--box box--slider">
- <div class="box--content is--rounded">
- <div class="ex-product-box ex-product-box-top">
- <a href="{url controller=cat sCategory=$category.id}"
- class="subcats--item">
- <div class="subcats--item-header">
- <strong class="subcats--item-title">{$category.name}</strong>
- <span class="subcats--item-amount">{$category.products} {s name='exProducts'}Produkte{/s}</span>
- </div>
- <div class="exSubcatSlider--image__svg">
- <img src="{$category.categoryImageSvgContent}">
- </div>
- <span class="arrow">
- {include file="frontend/_helpers/icon.tpl" icon="uncolorized--arrow-right-fa" class="uncolorized--arrow-right-fa"}
- </span>
- {if $abTestsVariables.mobileListing.activeVariant == 'ex_mobile_listing_new'}
- <div class="subcats--item-img">
- <img src="{$category.topSellerImg}" alt="{$category.name}">
- </div>
- {/if}
- {if $category.categoryMediaJpg}
- <img src="{$category.categoryMediaJpg}"
- class='subcats--item-hover'/>
- <div class="subcats--image__mobile" style="
- background-image: url({$category.categoryMediaJpg});
- "></div>
- {/if}
- </a>
- </div>
- {$index = 2}
- {elseif $index == 2}
- <div class="ex-product-box ex-product-box-bottom">
- <a href="{url controller=cat sCategory=$category.id}"
- class="subcats--item">
- <div class="subcats--item-header">
- <strong class="subcats--item-title">{$category.name}</strong>
- <span class="subcats--item-amount">{$category.products} {s name='exProducts'}Produkte{/s}</span>
- </div>
- <div class="exSubcatSlider--image__svg">
- <img src="{$category.categoryImageSvgContent}">
- </div>
- <span class="arrow">
- {include file="frontend/_helpers/icon.tpl" icon="uncolorized--arrow-right-fa" class="uncolorized--arrow-right-fa"}
- </span>
- {if $abTestsVariables.mobileListing.activeVariant == 'ex_mobile_listing_new'}
- <div class="subcats--item-img">
- <img src="{$category.topSellerImg}" alt="{$category.name}">
- </div>
- {/if}
- {if $category.categoryMediaJpg}
- <img src="{$category.categoryMediaJpg}"
- class='subcats--item-hover'/>
- <div class="subcats--image__mobile" style="
- background-image: url({$category.categoryMediaJpg});
- "></div>
- {/if}
- </a>
- </div>
- </div>
- </div>
- </div>
- {$index = 1}
- {/if}
- {/foreach}
- {if $parity == 1}
- <div class="product-slider--item">
- <div class="product--box box--slider">
- <div class="box--content is--rounded">
- {foreach $lastElement as $category}
- <div class="ex-product-box ex-product-box-top">
- <a href="{url controller=cat sCategory=$category.id}"
- class="subcats--item">
- <div class="subcats--item-header">
- <strong class="subcats--item-title">{$category.name}</strong>
- <span class="subcats--item-amount">{$category.products} {s name='exProducts'}Produkte{/s}</span>
- </div>
- <div class="exSubcatSlider--image__svg">
- <img src="{$category.categoryImageSvgContent}">
- </div>
- <span class="arrow">
- {include file="frontend/_helpers/icon.tpl" icon="uncolorized--arrow-right-fa" class="uncolorized--arrow-right-fa"}
- </span>
- {if $abTestsVariables.mobileListing.activeVariant == 'ex_mobile_listing_new'}
- <div class="subcats--item-img">
- <img src="{$category.topSellerImg}" alt="{$category.name}">
- </div>
- {/if}
- {if $category.categoryMediaJpg}
- <img src="{$category.categoryMediaJpg}"
- class='subcats--item-hover'/>
- <div class="subcats--image__mobile" style="
- background-image: url({$category.categoryMediaJpg});
- "></div>
- {/if}
- </a>
- </div>
- {/foreach}
- </div>
- </div>
- </div>
- {/if}
- {/if}
- </div>
- </div>
- </div>