tiamak
358 lines
17 KiB
Smarty
358 lines
17 KiB
Smarty
{function name=advCategoryTree nodes=[]}
|
||
{if $nodes|count}
|
||
<ul class="adv-megamenu__category-tree">
|
||
{foreach from=$nodes item=categoryNode}
|
||
<li>
|
||
<a href="{$categoryNode.url|escape:'htmlall':'UTF-8'}">{$categoryNode.title|escape:'htmlall':'UTF-8'}</a>
|
||
{if $categoryNode.children|count}
|
||
{advCategoryTree nodes=$categoryNode.children}
|
||
{/if}
|
||
</li>
|
||
{/foreach}
|
||
</ul>
|
||
{/if}
|
||
{/function}
|
||
|
||
{function name=advPanelTree nodes=[]}
|
||
{if $nodes|count}
|
||
<ul class="adv-megamenu__panel-tree">
|
||
{foreach from=$nodes item=treeNode}
|
||
<li{if $treeNode.children|count} class="has-children"{/if}>
|
||
<a href="{$treeNode.url|escape:'htmlall':'UTF-8'}">{$treeNode.title|escape:'htmlall':'UTF-8'}</a>
|
||
{if $treeNode.children|count}
|
||
{advPanelTree nodes=$treeNode.children}
|
||
{/if}
|
||
</li>
|
||
{/foreach}
|
||
</ul>
|
||
{/if}
|
||
{/function}
|
||
|
||
{function name=advNodeCards nodes=[]}
|
||
{if $nodes|count}
|
||
<div class="row adv-megamenu__node-card-row">
|
||
{foreach from=$nodes item=treeNode}
|
||
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
|
||
<a href="{$treeNode.url|escape:'htmlall':'UTF-8'}" class="adv-megamenu__node-card-link" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>
|
||
<article class="card adv-megamenu__node-card">
|
||
{if $treeNode.uses_sprite && $treeNode.icon_class}
|
||
<div class="adv-megamenu__node-card-sprite">
|
||
<span class="{$treeNode.icon_class|escape:'htmlall':'UTF-8'}" aria-hidden="true"></span>
|
||
</div>
|
||
{elseif $treeNode.icon_url}
|
||
<img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" class="card-img-top" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
|
||
{/if}
|
||
<div class="card-body">
|
||
<h3 class="card-title">{$treeNode.title|escape:'htmlall':'UTF-8'}</h3>
|
||
{if $treeNode.description}
|
||
<p class="card-text">{$treeNode.description|escape:'htmlall':'UTF-8'}</p>
|
||
{/if}
|
||
</div>
|
||
</article>
|
||
</a>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
{/if}
|
||
{/function}
|
||
|
||
{function name=advNodeCardsByType nodes=[] type=''}
|
||
{assign var=matchingNodes value=[]}
|
||
{foreach from=$nodes item=treeNode}
|
||
{if $treeNode.type == $type}
|
||
{append var='matchingNodes' value=$treeNode}
|
||
{/if}
|
||
{/foreach}
|
||
{if $matchingNodes|count}
|
||
{advNodeCards nodes=$matchingNodes}
|
||
{/if}
|
||
{/function}
|
||
|
||
{function name=advRichContentCards nodes=[]}
|
||
{if $nodes|count}
|
||
<div class="adv-megamenu__rich-node-row">
|
||
{foreach from=$nodes item=treeNode}
|
||
<article class="card adv-megamenu__rich-node-card">
|
||
{if $treeNode.icon_url}
|
||
<div class="adv-megamenu__rich-node-media">
|
||
<img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
|
||
</div>
|
||
{/if}
|
||
<div class="adv-megamenu__rich-node-body">
|
||
<h3 class="adv-megamenu__rich-node-title">
|
||
<a href="{$treeNode.url|escape:'htmlall':'UTF-8'}" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>{$treeNode.title|escape:'htmlall':'UTF-8'}</a>
|
||
</h3>
|
||
{if $treeNode.description}
|
||
<div class="adv-megamenu__rich-node-description">{$treeNode.description|escape:'htmlall':'UTF-8'}</div>
|
||
{/if}
|
||
{if $treeNode.custom_link}
|
||
<a href="{$treeNode.custom_link|escape:'htmlall':'UTF-8'}" class="adv-megamenu__rich-node-link btn btn-primary" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>
|
||
{l s='Zobacz wszystko' d='Modules.Advancedmegamenu.Shop'}
|
||
</a>
|
||
{/if}
|
||
</div>
|
||
</article>
|
||
{/foreach}
|
||
</div>
|
||
{/if}
|
||
{/function}
|
||
|
||
{function name=advRichContentIntro node=[]}
|
||
{if $node.type == 'rich_content'}
|
||
<article class="adv-megamenu__rich-intro">
|
||
{if $node.icon_url}
|
||
<div class="adv-megamenu__rich-intro-media">
|
||
<img src="{$node.icon_url|escape:'htmlall':'UTF-8'}" alt="{$node.title|escape:'htmlall':'UTF-8'}" loading="lazy">
|
||
</div>
|
||
{/if}
|
||
<div class="adv-megamenu__rich-intro-body">
|
||
{if $node.title}
|
||
<h3 class="adv-megamenu__rich-intro-title">{$node.title|escape:'htmlall':'UTF-8'}</h3>
|
||
{/if}
|
||
{if $node.description}
|
||
<div class="adv-megamenu__rich-intro-description">{$node.description|escape:'htmlall':'UTF-8'}</div>
|
||
{/if}
|
||
{if $node.custom_link}
|
||
<a href="{$node.custom_link|escape:'htmlall':'UTF-8'}" class="adv-megamenu__rich-intro-link btn btn-primary" {if $node.new_window}target="_blank" rel="noopener"{/if}>
|
||
{l s='Zobacz wszystko' d='Modules.Advancedmegamenu.Shop'}
|
||
</a>
|
||
{/if}
|
||
</div>
|
||
</article>
|
||
{/if}
|
||
{/function}
|
||
|
||
{function name=advLayoutCards layouts=[]}
|
||
{if $layouts|count}
|
||
<div class="row adv-megamenu__layout-row">
|
||
{foreach from=$layouts item=layout}
|
||
<div class="col-md-{$layout.column_width|intval}">
|
||
<article class="card adv-megamenu__layout-card adv-megamenu__promo{if $layout.block_type == 'products'} is-products-only{/if}"{if $layout.background_color} style="--adv-promo-bg: {$layout.background_color|escape:'htmlall':'UTF-8'};"{/if}>
|
||
{if $layout.custom_image_url}
|
||
<div class="adv-megamenu__promo-media card-img-top">
|
||
<img src="{$layout.custom_image_url|escape:'htmlall':'UTF-8'}" alt="{$layout.title|escape:'htmlall':'UTF-8'}" loading="lazy">
|
||
</div>
|
||
{/if}
|
||
<div class="card-body adv-megamenu__layout-card-body">
|
||
{if $layout.show_title}
|
||
<h3 class="card-title">{$layout.title|escape:'htmlall':'UTF-8'}</h3>
|
||
{/if}
|
||
{if $layout.description && $layout.block_type != 'products'}
|
||
<p class="card-text">{$layout.description|escape:'htmlall':'UTF-8'}</p>
|
||
{/if}
|
||
{if $layout.products|count}
|
||
<div class="adv-megamenu__products">
|
||
{foreach from=$layout.products item=product}
|
||
<article class="card adv-megamenu__product-card">
|
||
<a href="{$product.url|escape:'htmlall':'UTF-8'}" class="adv-megamenu__product-link">
|
||
{if !empty($product.cover.bySize.home_default.url)}
|
||
<img src="{$product.cover.bySize.home_default.url|escape:'htmlall':'UTF-8'}" alt="{$product.name|escape:'htmlall':'UTF-8'}" loading="lazy">
|
||
{/if}
|
||
<span class="adv-megamenu__product-name">{$product.name|escape:'htmlall':'UTF-8'}</span>
|
||
{if !empty($product.price)}
|
||
<span class="adv-megamenu__product-price">{$product.price}</span>
|
||
{/if}
|
||
</a>
|
||
</article>
|
||
{/foreach}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</article>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
{/if}
|
||
{/function}
|
||
|
||
{function name=advMobilePanels nodes=[] depth=0}
|
||
{foreach from=$nodes item=node}
|
||
{assign var=panelId value="adv-panel-"|cat:$node.id}
|
||
{if $node.children|count || $node.category_branch|count || $node.layouts|count || $node.type == 'rich_content'}
|
||
<section class="adv-megamenu__mobile-panel" data-panel-id="{$panelId}">
|
||
<div class="adv-megamenu__mobile-bar">
|
||
<button type="button" class="adv-megamenu__mobile-back js-adv-back">
|
||
< {l s='Wstecz' d='Modules.Advancedmegamenu.Shop'}
|
||
</button>
|
||
<span>{$node.title|escape:'htmlall':'UTF-8'}</span>
|
||
</div>
|
||
<ul class="adv-megamenu__mobile-list">
|
||
{foreach from=$node.category_branch item=branch}
|
||
<li>
|
||
<a href="{$branch.url|escape:'htmlall':'UTF-8'}">{$branch.title|escape:'htmlall':'UTF-8'}</a>
|
||
</li>
|
||
{/foreach}
|
||
{foreach from=$node.children item=child}
|
||
<li>
|
||
<div class="adv-megamenu__mobile-link-row{if $depth == 1 && (($child.uses_sprite && $child.icon_class) || $child.icon_url)} adv-megamenu__mobile-link-row--with-image{/if}">
|
||
<a href="{$child.url|escape:'htmlall':'UTF-8'}" class="adv-megamenu__mobile-main-link{if $depth == 1 && (($child.uses_sprite && $child.icon_class) || $child.icon_url)} adv-megamenu__mobile-main-link--with-image{/if}" {if $child.new_window}target="_blank" rel="noopener"{/if}>
|
||
{if $depth == 1 && ($child.uses_sprite && $child.icon_class)}
|
||
<div class="adv-megamenu__mobile-thumb adv-megamenu__mobile-thumb--sprite">
|
||
<span class="{$child.icon_class|escape:'htmlall':'UTF-8'}" aria-hidden="true"></span>
|
||
</div>
|
||
{elseif $depth == 1 && $child.icon_url}
|
||
<div class="adv-megamenu__mobile-thumb">
|
||
<img src="{$child.icon_url|escape:'htmlall':'UTF-8'}" alt="{$child.title|escape:'htmlall':'UTF-8'}" loading="lazy">
|
||
</div>
|
||
{/if}
|
||
<span class="adv-megamenu__mobile-main-link-label">{$child.title|escape:'htmlall':'UTF-8'}</span>
|
||
</a>
|
||
{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
|
||
<button type="button" class="js-adv-open-panel" data-target="adv-panel-{$child.id}">›</button>
|
||
{/if}
|
||
</div>
|
||
</li>
|
||
{/foreach}
|
||
</ul>
|
||
</section>
|
||
{advMobilePanels nodes=$node.children depth=$depth+1}
|
||
{/if}
|
||
{/foreach}
|
||
{/function}
|
||
|
||
<nav class="adv-megamenu" aria-label="{l s='Main navigation' d='Modules.Advancedmegamenu.Shop'}">
|
||
<div class="adv-megamenu__desktop hidden-sm-down">
|
||
{if isset($shop.logo_details.src) && $shop.logo_details.src}
|
||
<a class="adv-megamenu__brand" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
|
||
<img
|
||
src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
|
||
alt="{$shop.name|escape:'htmlall':'UTF-8'}"
|
||
width="{$shop.logo_details.width|intval}"
|
||
height="{$shop.logo_details.height|intval}"
|
||
loading="eager"
|
||
>
|
||
</a>
|
||
{/if}
|
||
<ul class="adv-megamenu__root-list">
|
||
{foreach from=$menu.children item=node}
|
||
{if $node.active}
|
||
<li class="adv-megamenu__root-item{if $node.current} is-current{/if}{if $node.children|count || $node.layouts|count || $node.category_branch|count} has-panel{/if}">
|
||
<a href="{$node.url|escape:'htmlall':'UTF-8'}" class="adv-megamenu__root-link" {if $node.new_window}target="_blank" rel="noopener"{/if}>
|
||
{if $node.icon_class}
|
||
<span class="{$node.icon_class|escape:'htmlall':'UTF-8'}" aria-hidden="true"></span>
|
||
{/if}
|
||
<span>{$node.title|escape:'htmlall':'UTF-8'}</span>
|
||
</a>
|
||
|
||
{if $node.children|count || $node.layouts|count || $node.category_branch|count}
|
||
<div class="adv-megamenu__panel">
|
||
<div class="adv-megamenu__panel-inner">
|
||
<div class="adv-megamenu__panel-nav">
|
||
{if $node.category_branch|count}
|
||
{advCategoryTree nodes=$node.category_branch}
|
||
{/if}
|
||
|
||
{if $node.children|count}
|
||
<ul class="adv-megamenu__manual-tree">
|
||
{foreach from=$node.children item=child}
|
||
<li class="{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}has-submenu{/if}" data-submenu-key="node-{$child.id}">
|
||
<a href="{$child.url|escape:'htmlall':'UTF-8'}" class="{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}adv-megamenu__submenu-trigger{/if}" {if $child.new_window}target="_blank" rel="noopener"{/if}>{$child.title|escape:'htmlall':'UTF-8'}</a>
|
||
</li>
|
||
{/foreach}
|
||
</ul>
|
||
{/if}
|
||
</div>
|
||
|
||
{assign var=hasSubmenuContent value=false}
|
||
{foreach from=$node.children item=child}
|
||
{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
|
||
{assign var=hasSubmenuContent value=true}
|
||
{/if}
|
||
{/foreach}
|
||
|
||
{if $hasSubmenuContent || $node.layouts|count}
|
||
<div class="adv-megamenu__panel-content">
|
||
{if $hasSubmenuContent}
|
||
<div class="adv-megamenu__submenu-content">
|
||
{foreach from=$node.children item=child}
|
||
{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
|
||
<section class="adv-megamenu__submenu-pane" data-submenu-pane="node-{$child.id}">
|
||
{if $child.type != 'rich_content'}
|
||
<h3 class="adv-megamenu__submenu-title">{$child.title|escape:'htmlall':'UTF-8'}</h3>
|
||
{/if}
|
||
{advRichContentIntro node=$child}
|
||
{if $child.category_branch|count}
|
||
{advPanelTree nodes=$child.category_branch}
|
||
{/if}
|
||
{if $child.children|count}
|
||
{assign var=richContentNodes value=[]}
|
||
{foreach from=$child.children item=grandChild}
|
||
{if $grandChild.type == 'rich_content'}
|
||
{append var='richContentNodes' value=$grandChild}
|
||
{/if}
|
||
{/foreach}
|
||
{advRichContentCards nodes=$richContentNodes}
|
||
{advNodeCardsByType nodes=$child.children type='category'}
|
||
{advNodeCardsByType nodes=$child.children type='cms'}
|
||
{advNodeCardsByType nodes=$child.children type='link'}
|
||
{/if}
|
||
{if $child.layouts|count}
|
||
{advLayoutCards layouts=$child.layouts}
|
||
{/if}
|
||
</section>
|
||
{/if}
|
||
{/foreach}
|
||
</div>
|
||
{/if}
|
||
|
||
{if $node.layouts|count}
|
||
{advLayoutCards layouts=$node.layouts}
|
||
{/if}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</li>
|
||
{/if}
|
||
{/foreach}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="adv-megamenu__mobile hidden-md-up">
|
||
{if isset($shop.logo_details.src) && $shop.logo_details.src}
|
||
<a class="adv-megamenu__brand adv-megamenu__brand--mobile" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
|
||
<img
|
||
src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
|
||
alt="{$shop.name|escape:'htmlall':'UTF-8'}"
|
||
width="{$shop.logo_details.width|intval}"
|
||
height="{$shop.logo_details.height|intval}"
|
||
loading="eager"
|
||
>
|
||
</a>
|
||
{/if}
|
||
<button type="button" class="adv-megamenu__toggle js-adv-menu-toggle header-block__action-btn" aria-expanded="false" aria-label="{l s='Open menu' d='Modules.Advancedmegamenu.Shop'}">
|
||
<span class="material-icons header-block__icon" aria-hidden="true">menu</span>
|
||
</button>
|
||
|
||
<div class="adv-megamenu__overlay js-adv-overlay">
|
||
<div class="adv-megamenu__drawer">
|
||
<div class="adv-megamenu__mobile-head">
|
||
<span>{l s='Menu' d='Modules.Advancedmegamenu.Shop'}</span>
|
||
<button type="button" class="adv-megamenu__close js-adv-menu-close" aria-label="{l s='Close menu' d='Modules.Advancedmegamenu.Shop'}">×</button>
|
||
</div>
|
||
|
||
<div class="adv-megamenu__mobile-viewport">
|
||
<section class="adv-megamenu__mobile-panel is-active" data-panel-id="root">
|
||
<ul class="adv-megamenu__mobile-list">
|
||
{foreach from=$menu.children item=node}
|
||
{if $node.active}
|
||
<li>
|
||
<div class="adv-megamenu__mobile-link-row">
|
||
<a href="{$node.url|escape:'htmlall':'UTF-8'}" {if $node.new_window}target="_blank" rel="noopener"{/if}>{$node.title|escape:'htmlall':'UTF-8'}</a>
|
||
{if $node.children|count || $node.category_branch|count || $node.layouts|count || $node.type == 'rich_content'}
|
||
<button type="button" class="js-adv-open-panel" data-target="adv-panel-{$node.id}">›</button>
|
||
{/if}
|
||
</div>
|
||
</li>
|
||
{/if}
|
||
{/foreach}
|
||
</ul>
|
||
</section>
|
||
{advMobilePanels nodes=$menu.children depth=0}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|