<{if $pager}> <{assign var="pages" value=$pager->render()}> <{if $pages}> <{math assign="total_pages" equation="x/y" x=$pager_array.total y=$pager_array.max}>

<{t x=$get.p+1 y=$total_pages|ceil}>Page {x} of {y}<{/t}>

<{/if}> <{/if}> <{if $category->getName()}>

<{$category->getName()}>

<{/if}> <{if $category->getDescriptionA()}> <{if $settings.categories.enable_collapse_desription_a}> <{else}> <{/if}> <{/if}> <{if $category->getBlogPosts()}> <{include file="components/blog-grid.html" template=$category}> <{/if}> <{if !$get.p }> <{assign var="childCategories" value=$category->getChildren()}> <{if $childCategories}> <{/if}> <{/if}> <{if $category_layout === "category_preview"}>

<{foreach from=$childCategories item=$childCategory }>

• <{$childCategory->getName()}>

  <{t}>Se alle<{/t}> <{include file="components/svg.html" class="dropdown__svg" icon="chevron-right"}>
  <{assign var="products" value=$childCategory->getPopularProducts(3, 1000)}> <{assign var="count" value="3"}> <{if !$products}> <{assign var="products" value=$childCategory->getOnlineProducts($count)}> <{/if}> <{section name="i" loop=$products start=0 max=$count}>
  • <{include file="components/image.html" width="370" height="370" sizes="165,360,345,220,370" class="product-card__picture" product=$products[i] alpine=$alpine}>

    <{if $settings.product_card.enable_brand}> <{if $alpine}> <{else}> <{if $products[i]->getBrandName()}>

    <{$products[i]->getBrandName()|escape}>

    <{/if}> <{/if}> <{/if}>

    href="<{$products[i]->getRemoteUrl()}>"<{/if}> <{if $alpine}>:href="product.url"<{/if}> <{if $alpine}>x-text="product.name"<{/if}> > <{if ! $alpine}><{$products[i]->getName()}><{/if}>

    <{if $settings.product_card.enable_category}> <{if !$alpine && $products[i]->getMainCategory()}> <{assign var="productMainCategory" value=$products[i]->getMainCategory()}>

    <{$productMainCategory->getName()}>

    <{/if}> <{/if}>

    <{include file="components/price.html" show_currency=$settings.currency.show product=$products[i] show_from_prefix="true" class="product-card__price"}>
    <{assign var="metaValues" value=$products[i]->getMetaValues()}>
  <{/section}>
<{/foreach}>

<{else }> <{if $products}> <{if !$get.p }> <{assign var="popular_products" value=$category->getPopularProducts()}> <{if $settings.categories.enable_popular_products && ($popular_products|@count > 0 || $settings.integrations.enable_clerk)}>

<{t x=$category->getName()}>Popular items in {x}<{/t}>

<{/if}> <{/if}> <{if $products && $category->getBlogPosts()}>

<{t x=$category->getName()}>All items in {x}<{/t}>

<{/if}> <{if $get.atags || $get.brands || $get.categories || $get.sort }> <{assign var="hasInitialFilters" value=true}> <{else}> <{assign var="hasInitialFilters" value=false}> <{/if}> <{if $settings.categories.enable_filter}> <{include file="components/product-filter.html" template=$category}> <{/if}>

<{* Server-side rendered initial products *}> <{if ! $hasInitialFilters }> <{section name="i" loop=$products}>
• <{include file="components/product-card.html" product=$products[i]}>
<{/section}> <{/if}> <{* Client-side rendered products *}>

<{include file="components/page-blocks.html"}> <{if $pager}> <{assign var="pages" value=$pager->render()}> <{if $pages}> <{/if}> <{/if}> <{else}> <{if !$childCategories && !$category->getBlogPosts()}> <{/if}> <{/if}> <{/if}> <{if $settings.categories.enable_collapse_desription_b}> <{else}> <{/if}>