first commit
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<?php $smarty->display('ajax_categories.html') ?>
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
st_theme_use_stylesheet('stCategory.css');
|
||||
st_theme_use_stylesheet('stCategoryAjaxTree.css');
|
||||
|
||||
$smarty->display('ajax_tree.html');
|
||||
?>
|
||||
@@ -0,0 +1,7 @@
|
||||
<?php
|
||||
st_theme_use_stylesheet('stCategoryHorizontalTree.css');
|
||||
|
||||
$smarty->assign('roots', $results);
|
||||
|
||||
$smarty->display('horizontal_tree.html');
|
||||
?>
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
|
||||
if (!$config->get('tree_type') || $config->get('tree_type') == 'default')
|
||||
{
|
||||
ob_start();
|
||||
|
||||
foreach ($roots as $root)
|
||||
{
|
||||
st_include_component('stCategoryTree', 'tree', array('parent' => $root, 'expanded' => $expanded));
|
||||
}
|
||||
|
||||
$smarty->assign('category_tree_content', ob_get_clean());
|
||||
}
|
||||
else
|
||||
{
|
||||
$smarty->assign('category_tree_content', st_get_component('stCategoryTree', $config->get('tree_type'), array('roots' => $roots, 'expanded' => $expanded)));
|
||||
}
|
||||
|
||||
$smarty->display('show.html');
|
||||
@@ -0,0 +1,37 @@
|
||||
<?php
|
||||
use_javascript('/stCategoryTreePlugin/js/jquery.treeview.js');
|
||||
st_theme_use_stylesheet('stCategory.css');
|
||||
echo javascript_tag('
|
||||
jQuery(function($) {
|
||||
$("#st_category-tree-'.$parent['id'].'").treeview({
|
||||
collapsed: true,
|
||||
animated: "fast",
|
||||
prerendered: true
|
||||
});
|
||||
})
|
||||
');
|
||||
?>
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
<ul id="st_category-tree-<?php echo $parent['id'] ?>" class="x-tree-root-ct x-tree-arrows">
|
||||
<?php foreach ($categories as $category): if ($category['is_hidden']) continue ?>
|
||||
<?php if ($category['has_children']): ?>
|
||||
<li class="st_category-tree-element<?php echo $category['is_last'] ? ' st_category-tree-element-last' . ($category['is_expanded'] ? ' st_category-tree-element-minus-last' : ' st_category-tree-element-plus-last') : ($category['is_expanded'] ? ' st_category-tree-element-minus' : ' st_category-tree-element-plus') ?>">
|
||||
<div class="x-tree-node-el x-tree-node-<?php echo $category['is_expanded'] ? 'expanded' : 'collapsed' ?><?php echo $category['is_last'] && !$category['is_first'] ? ' x-tree-node-last' : '' ?> <?php echo $category['is_selected'] ? 'x-selected' : '' ?>">
|
||||
<img class="x-tree-hitarea x-tree-ec-icon<?php echo $category['is_expanded'] ? ($category['is_last'] ? ' x-tree-elbow-minus-last' : '') . ' x-tree-elbow-minus' : ($category['is_last'] ? ' x-tree-elbow-plus-last' : '') . ' x-tree-elbow-plus' ?>" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="<?php echo $category['is_selected'] ? 'x-tree-node-anchor x-tree-node-anchor-selected' : 'x-tree-node-anchor' ?>" href="<?php echo $category['url'] ?>"><span><?php echo $category['name'] ?> <?php if ($show_product_count) { echo '('.$category['product_count'].')'; } ?></span></a>
|
||||
</div>
|
||||
<ul style="display: <?php echo $category['is_expanded'] ? 'block' : 'none' ?>" class="x-tree-node-ct">
|
||||
<?php else: ?>
|
||||
<li class="st_category-tree-element<?php echo $category['is_last'] ? ' st_category-tree-element-last st_category-tree-element-leaf-last' : ($category['is_first'] ? ' st_category-tree-element-first' : '') ?>">
|
||||
<div class="x-tree-node-el x-tree-node-collapsed <?php echo $category['is_selected'] ? 'x-selected' : '' ?>">
|
||||
<img class="x-tree-ec-icon x-tree-elbow-plus x-tree-elbow-leaf<?php $category['is_last'] ? ' x-tree-elbow-leaf-last' : '' ?>" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="<?php echo $category['is_selected'] ? 'x-tree-node-anchor x-tree-node-anchor-selected' : 'x-tree-node-anchor' ?>" href="<?php echo $category['url'] ?>"><span><?php echo $category['name'] ?> <?php if ($show_product_count) { echo '('.$category['product_count'].')'; } ?></span></a>
|
||||
</div>
|
||||
</li>
|
||||
<?php for ($i = 0; $i < $category['close_tag_count']; $i++): ?>
|
||||
</ul></li>
|
||||
<?php endfor; ?>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div></div></div>
|
||||
@@ -0,0 +1,155 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="home-icon hidden-xs hidden-sm">
|
||||
<a href="{$homepage_url}">
|
||||
<svg enable-background="new 0 0 512 512" height="21px" version="1.0" viewBox="0 0 512 512" width="22px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M446,466H66V199.2L256,36.5l190,162.7L446,466z M126,406h260l0-179.2L256,115.5L126,226.8V406z"/></g></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li><a href="{$child.url}" class="category-link">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar');
|
||||
var logo = $('#logo');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 992) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = buttons.width() + moreContainer.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,154 @@
|
||||
{assign var='horizontal_menu' value=$theme_config->getConfigParameter('layout_config.horizontal_menu')}
|
||||
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
<li class="homepage hidden-xs">
|
||||
<a href="{$homepage_url}">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 12L5 9.3M5 9.3L12 3L19 9.3M5 9.3V21H19V9.3M22 12L19 9.3" stroke-width="2" stroke-linecap="square"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown {if $horizontal_menu == 'hide'} hidden-md hidden-lg{/if}">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li>
|
||||
<a href="{$child.url}" class="category-link">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li {if $horizontal_menu == 'hide'}class="hidden-md hidden-lg"{/if}>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li {if $horizontal_menu == 'hide'}class="hidden-md hidden-lg"{/if}>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar .container');
|
||||
var logo = $('#logo');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = buttons.width() + moreContainer.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
more();
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,32 @@
|
||||
<div id="vertical-categories" class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">{__ text="Kategorie" langCatalogue="stCategory"}</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul class="nav nav-stacked">
|
||||
{if $parent}
|
||||
<li class="parent"><a href="{$parent.url}"><span class="glyphicon glyphicon-chevron-left"></span> <span class="name">{$parent.name}</span></a></li>
|
||||
{/if}
|
||||
{if $current}
|
||||
<li>
|
||||
<span class="current">
|
||||
<a href="{$current.url}">{$current.name}</a>
|
||||
</span>
|
||||
<ul class="nav nav-stacked">
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,174 @@
|
||||
<ul class="nav navbar-nav horizontal-categories hidden-xs hidden-sm">
|
||||
<li class="home-icon">
|
||||
<a href="{$homepage_url}">
|
||||
<span class="glyphicon glyphicon-home"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{if $theme->getLayoutName() != 'two_column'}
|
||||
<ul class="nav navbar-nav horizontal-categories hidden-xs hidden-sm">
|
||||
<li class="dropdown more">
|
||||
<a class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=category from=$categories}
|
||||
<li><a href="{$category.url}" class="category-link">{$category.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0;" >
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown visible-xs visible-sm">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li><a href="{$child.url}" class="category-link">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li class="visible-xs visible-sm">
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li class="visible-xs visible-sm">
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
|
||||
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 991) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = moreContainer.width() + buttons.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,32 @@
|
||||
<div id="vertical-categories" class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{__ text="Kategorie" langCatalogue="stCategory"}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul class="nav nav-stacked">
|
||||
{if $parent}
|
||||
<li class="parent"><a href="{$parent.url}"><span class="glyphicon glyphicon-chevron-left"></span> <span class="name">{$parent.name}</span></a></li>
|
||||
{/if}
|
||||
{if $current}
|
||||
<li>
|
||||
<span class="current">
|
||||
<a href="{$current.url}">{$current.name}</a>
|
||||
</span>
|
||||
<ul class="nav nav-stacked">
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,149 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
<li class="hidden-xs">
|
||||
<a href="{$homepage_url}">{__ text="Home" langCatalogue="stFrontend"}</a>
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li>
|
||||
<a href="{$child.url}" class="category-link">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar .container');
|
||||
var logo = $('#logo');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#" aria-label="{/literal}{__ text="Rozwiń kolejne kategorie" langCatalogue="stFrontend"}{literal}"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = logo.width() + 180 + moreContainer.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
more();
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,19 @@
|
||||
{assign var='col_sm' value=$theme_config->getConfigParameter('layout_config.subcategory_in_row_desktop')}
|
||||
<div class="product-list category-list clearfix row" data-equalizer>
|
||||
{foreach item=category from=$categories}
|
||||
<div class="product col-xs-6 col-sm-4{if $col_sm == 4} col-md-3 col-lg-3{elseif $col_sm == 5} col-md-3 col-lg-20p{/if}">
|
||||
<div class="thumbnail">
|
||||
<div data-equalizer-watch="image">
|
||||
<div class="image">
|
||||
<a href="{$category.url}">
|
||||
<img class="img-responsive" alt="{$category.name}" src="{st_asset_image_path image=$category.image type='small' for='category'}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption text-center" data-equalizer-watch="caption">
|
||||
<h2 class="name"><a href="{$category.url}" >{$category.name}</a></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
@@ -0,0 +1,155 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li id="home-icon-menu" class="hidden-xs">
|
||||
<a href="{$homepage_url}" class="btn btn-primary btn-home">
|
||||
<svg enable-background="new 0 0 24 24" height="16px" version="1.1" viewBox="0 0 24 24" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M23.821,12.263L12.575,0.636C12.415,0.473,12.208,0.391,12,0.391s-0.415,0.082-0.575,0.245L0.179,12.263 c-0.316,0.328-0.203,0.597,0.251,0.597h3.308l0.002,10.75c2.417,0,6.191,0,6.191,0v-6.615h4.136l-0.014,6.615c0,0,5.063,0,6.226,0 L20.278,12.86h3.291C24.023,12.86,24.137,12.591,23.821,12.263z"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li><a href="{$child.url}" class="category-link">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 992) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = buttons.width() + moreContainer.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width() + 30;
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,26 @@
|
||||
<ul {if $unique_id}id="st_category-tree-{$unique_id}"{/if} class="x-tree-arrows{if $include_root_class} x-tree-root-ct{/if}">
|
||||
{foreach item=category from=$categories name=categories}
|
||||
{if $category.has_children}
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last}-last st_category-tree-element-last{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$category.id])}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$category.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last} x-tree-elbow-last{/if}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$category.id])}
|
||||
{render_ajax_categories for=$category}
|
||||
{/if}
|
||||
</li>
|
||||
{else}
|
||||
<li class="st_category-tree-element {if $smarty.foreach.categories.last}st_category-tree-element-last {/if}">
|
||||
<div class="x-tree-node-el x-tree-node-collapsed{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img class="x-tree-ec-icon x-tree-elbow-plus x-tree-elbow-leaf{if $smarty.foreach.categories.last} x-tree-elbow-leaf-last{/if}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
@@ -0,0 +1,29 @@
|
||||
{if $show_roots}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
<ul id="st_category-tree-{$root.id}" class="x-tree-root-ct x-tree-arrows">
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$root.id]) || $expand_always}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $root.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$root.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="{if $root.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$root.url}">
|
||||
<span>{$root.name} {if $show_product_count}({$root.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</li>
|
||||
</ul>
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{else}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{/if}
|
||||
@@ -0,0 +1,12 @@
|
||||
<ul class="st_category_tree-horizontal">
|
||||
{foreach item=root from=$roots}
|
||||
<li>{$root.name}
|
||||
<ul>
|
||||
{foreach item=category from=$root.categories}
|
||||
<li><a href="{$category.url}">{$category.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{/foreach}
|
||||
<li class="clr"></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="block st_f_category_container" id="st_f_category_container">
|
||||
<div class="st_f_category_frame">
|
||||
<div class="st_f_category_frame_container">
|
||||
<div class="st_f_category_frame_header">
|
||||
<div class="st_f_category_frame_left">
|
||||
<div class="st_f_category_frame_right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{$category_tree_content}
|
||||
<div class="st_f_category_frame_footer">
|
||||
<div class="st_f_category_frame_left">
|
||||
<div class="st_f_category_frame_right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br class="st_clear_all" />
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<ul {if $unique_id}id="st_category-tree-{$unique_id}"{/if} class="x-tree-arrows{if $include_root_class} x-tree-root-ct{/if}">
|
||||
{foreach item=category from=$categories name=categories}
|
||||
{if $category.has_children}
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last}-last st_category-tree-element-last{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$category.id])}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$category.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last} x-tree-elbow-last{/if}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$category.id])}
|
||||
{render_ajax_categories for=$category}
|
||||
{/if}
|
||||
</li>
|
||||
{else}
|
||||
<li class="st_category-tree-element {if $smarty.foreach.categories.last}st_category-tree-element-last {/if}">
|
||||
<div class="x-tree-node-el x-tree-node-collapsed{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img class="x-tree-ec-icon x-tree-elbow-plus x-tree-elbow-leaf{if $smarty.foreach.categories.last} x-tree-elbow-leaf-last{/if}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
@@ -0,0 +1,29 @@
|
||||
{if $show_roots}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
<ul id="st_category-tree-{$root.id}" class="x-tree-root-ct x-tree-arrows">
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$root.id]) || $expand_always}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $root.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$root.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
|
||||
<a class="{if $root.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$root.url}">
|
||||
<span>{$root.name} {if $show_product_count}({$root.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</li>
|
||||
</ul>
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{else}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{/if}
|
||||
@@ -0,0 +1,12 @@
|
||||
<ul class="st_category_tree-horizontal">
|
||||
{foreach item=root from=$roots}
|
||||
<li>{$root.name}
|
||||
<ul>
|
||||
{foreach item=category from=$root.categories}
|
||||
<li><a href="{$category.url}">{$category.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{/foreach}
|
||||
<li class="clr"></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div id="category_tree" class="block box roundies">
|
||||
<h3 class="head">
|
||||
{__ text="Kategorie" langCatalogue="stCategory"}
|
||||
</h3>
|
||||
<div class="content">
|
||||
{include_st_component module="stProducer" component="list"}
|
||||
{$category_tree_content}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,149 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs no-block">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li><a href="{$child.url}" class="category-link">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar .container');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more no-block"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = moreContainer.width();
|
||||
var width = horizontalCategories.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,157 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
<li class="hidden-xs home-icon">
|
||||
<a href="{$homepage_url}">
|
||||
<svg width="28px" height="28px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M2 12L5 9.3M22 12L19 9.3M19 9.3L12 3L5 9.3M19 9.3V21H5V9.3"/> </svg>
|
||||
</a>
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li>
|
||||
<a href="{$child.url}" class="category-link">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar .container');
|
||||
var logo = $('#logo');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = logo.width() + 180 + moreContainer.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,202 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
<li class="home-icon hidden-xs">
|
||||
<a href="{$homepage_url}">
|
||||
<svg width="28px" height="28px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M2 12L5 9.3M22 12L19 9.3M19 9.3L12 3L5 9.3M19 9.3V21H5V9.3"/> </svg>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{if $single_tree}
|
||||
{foreach item=category from=$categories_root}
|
||||
<li class="more-category">
|
||||
<a class="hidden-xs dropdown-toggle btn-group clearfix" href="#">
|
||||
<span class="btn-group">{$category.name}</span>
|
||||
<span class="btn-group">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu-category dropdown-menu">
|
||||
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
{if $child.has_children}
|
||||
<li class="dropdown">
|
||||
<a href="{$child.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$child.name}</a>
|
||||
<ul class="dropdown-menu hidden-sm hidden-md hidden-lg">
|
||||
{foreach item=child2 from=$tree->getChildren($child)}
|
||||
<li>
|
||||
<a href="{$child2.url}" class="category-link">{$child2.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$child.url}" class="category-link">{$child.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{/foreach}
|
||||
{else}
|
||||
<li class="more-category">
|
||||
<a class="hidden-xs dropdown-toggle btn-group clearfix" href="#">
|
||||
<span class="btn-group">{__ text="Kategorie" langCatalogue="stCategory"}</span>
|
||||
<span class="btn-group">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu-category dropdown-menu">
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu hidden-sm hidden-md hidden-lg">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li>
|
||||
<a href="{$child.url}" class="category-link">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar .container');
|
||||
var logo = $('#logo');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more-links)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more more-links"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = buttons.width() + moreContainer.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
more();
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,155 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
<li class="hidden-xs hidden-sm{php}
|
||||
$c = sfContext::getInstance();
|
||||
if ($c->getModuleName() == 'stFrontendMain' && $c->getActionName() == 'index') echo ' active';
|
||||
{/php}">
|
||||
<a href="/">{__ text="Start" langCatalogue="stThemeModernorwd"}</a>
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li><a href="{$child.url}" class="category-link">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 992) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = moreContainer.width() + buttons.width() + 10;
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,26 @@
|
||||
<ul {if $unique_id}id="st_category-tree-{$unique_id}"{/if} class="x-tree-arrows{if $include_root_class} x-tree-root-ct{/if}">
|
||||
{foreach item=category from=$categories name=categories}
|
||||
{if $category.has_children}
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last}-last st_category-tree-element-last{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$category.id])}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$category.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last} x-tree-elbow-last{/if}" src="/plugins/sfExtjs2Plugin/extjs/resources/images/default/s.gif" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$category.id])}
|
||||
{render_ajax_categories for=$category}
|
||||
{/if}
|
||||
</li>
|
||||
{else}
|
||||
<li class="st_category-tree-element {if $smarty.foreach.categories.last}st_category-tree-element-last {/if}">
|
||||
<div class="x-tree-node-el x-tree-node-collapsed{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img class="x-tree-ec-icon x-tree-elbow-plus x-tree-elbow-leaf{if $smarty.foreach.categories.last} x-tree-elbow-leaf-last{/if}" src="/plugins/sfExtjs2Plugin/extjs/resources/images/default/s.gif" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
@@ -0,0 +1,29 @@
|
||||
{if $show_roots}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
<ul id="st_category-tree-{$root.id}" class="x-tree-root-ct x-tree-arrows">
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$root.id]) || $expand_always}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $root.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$root.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}" src="/plugins/sfExtjs2Plugin/extjs/resources/images/default/s.gif" alt="" />
|
||||
<a class="{if $root.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$root.url}">
|
||||
<span>{$root.name} {if $show_product_count}({$root.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</li>
|
||||
</ul>
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{else}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{/if}
|
||||
@@ -0,0 +1,160 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
<!--<li class="hidden-xs{php}
|
||||
$c = sfContext::getInstance();
|
||||
if ($c->getModuleName() == 'stFrontendMain' && $c->getActionName() == 'index') echo " active";
|
||||
{/php}">
|
||||
<a href="/">{__ text="Start" langCatalogue="stThemeModernorwd"}</a>
|
||||
</li>-->
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown" id='category-{$category.id}'>
|
||||
{if $category.id == '29' or $category.id == '30' or $category.id == 130 or $category.id == 140}
|
||||
{assign var=name_tmp value=" "|explode:$category.name}
|
||||
<span>{$name_tmp[0]}</span><span>{$name_tmp[1]}</span>
|
||||
{else}
|
||||
{$category.name}
|
||||
{/if}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li><a href="{$child.url}">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link" id='category-{$category.id}'><span>{$category.name}</span></a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
<li>
|
||||
<a href="/webpage/monta.html" class="category-link" id="category-185"><span>Montaż</span></a>
|
||||
</li>
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = moreContainer.width() + buttons.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on('click', '.category-link', function() {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,32 @@
|
||||
<div id="vertical-categories" class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{__ text="Kategorie" langCatalogue="stCategory"}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul class="nav nav-stacked">
|
||||
{if $parent}
|
||||
<li class="parent"><a href="{$parent.url}"><span class="glyphicon glyphicon-chevron-left"></span> <span class="name">{$parent.name}</span></a></li>
|
||||
{/if}
|
||||
{if $current}
|
||||
<li>
|
||||
<span class="current">
|
||||
<a href="{$current.url}">{$current.name}</a>
|
||||
</span>
|
||||
<ul class="nav nav-stacked">
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<ul {if $unique_id}id="st_category-tree-{$unique_id}"{/if} class="x-tree-arrows{if $include_root_class} x-tree-root-ct{/if}">
|
||||
{foreach item=category from=$categories name=categories}
|
||||
{if $category.has_children}
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last}-last st_category-tree-element-last{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$category.id])}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$category.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$category.id])}-minus{else}-plus{/if}{if $smarty.foreach.categories.last} x-tree-elbow-last{/if}" src="/sfExtjs2Plugin/extjs/resources/images/default/s.gif" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$category.id])}
|
||||
{render_ajax_categories for=$category}
|
||||
{/if}
|
||||
</li>
|
||||
{else}
|
||||
<li class="st_category-tree-element {if $smarty.foreach.categories.last}st_category-tree-element-last {/if}">
|
||||
<div class="x-tree-node-el x-tree-node-collapsed{if $smarty.foreach.categories.last} x-tree-node-last{/if}{if $category.id == $selected} x-selected{/if}">
|
||||
<img class="x-tree-ec-icon x-tree-elbow-plus x-tree-elbow-leaf{if $smarty.foreach.categories.last} x-tree-elbow-leaf-last{/if}" src="/sfExtjs2Plugin/extjs/resources/images/default/s.gif" alt="" />
|
||||
<a class="{if $category.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$category.url}">
|
||||
<span>{$category.name} {if $show_product_count}({$category.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
@@ -0,0 +1,29 @@
|
||||
{if $show_roots}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
<ul id="st_category-tree-{$root.id}" class="x-tree-root-ct x-tree-arrows">
|
||||
<li class="st_category-tree-element st_category-tree-element{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}">
|
||||
<div class="x-tree-node-el {if isset($expanded[$root.id]) || $expand_always}x-tree-node-expanded{else}x-tree-node-collapsed{/if}{if $root.id == $selected} x-selected{/if}">
|
||||
<img id="x-hit-{$root.id}" class="x-tree-hitarea x-tree-ec-icon x-tree-elbow{if isset($expanded[$root.id]) || $expand_always}-minus{else}-plus{/if}" src="/sfExtjs2Plugin/extjs/resources/images/default/s.gif" alt="" />
|
||||
<a class="{if $root.id == $selected}x-tree-node-anchor x-tree-node-anchor-selected{else}x-tree-node-anchor{/if}" href="{$root.url}">
|
||||
<span>{$root.name} {if $show_product_count}({$root.product_count}){/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</li>
|
||||
</ul>
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{else}
|
||||
{foreach item=root from=$roots name=roots}
|
||||
<div class="st_category-tree x-panel x-panel-noborder x-tree"><div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
|
||||
{if isset($expanded[$root.id]) || $expand_always}
|
||||
{render_ajax_categories for=$root}
|
||||
{/if}
|
||||
</div></div></div>
|
||||
{jquery_tree_init for=$root}
|
||||
{/foreach}
|
||||
{/if}
|
||||
@@ -0,0 +1,150 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li><a href="{$child.url}" class="category-link">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar .container');
|
||||
var logo = $('#logo');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
|
||||
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = logo.width() + 180 + moreContainer.width();
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width();
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
|
||||
var img = $('#logo img');
|
||||
img.one('load', more);
|
||||
if (img.get(0).complete || img.get(0).readyState === 4) {
|
||||
more();
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,25 @@
|
||||
<div class="category-list clearfix" data-equalizer>
|
||||
{foreach item=category from=$categories}
|
||||
<div class="category{if $category.has_children} expandable{/if}">
|
||||
<div class="thumbnail">
|
||||
<div data-equalizer-watch="image">
|
||||
<div class="image">
|
||||
<a href="{$category.url}">
|
||||
<img class="img-responsive" alt="{$category.name}" src="{st_asset_image_path image=$category.image type='small' for='category'}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption" data-equalizer-watch="caption">
|
||||
<h2><a href="{$category.url}" >{$category.name}</a></h2>
|
||||
{if $category.has_children}
|
||||
<ul class="list-unstyled">
|
||||
{foreach item=child from=$tree->getChildren($category, $producer)}
|
||||
<li><a href="{$child.url}">{$child.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<ul class="st_category_tree-horizontal">
|
||||
{foreach item=root from=$roots}
|
||||
<li>{$root.name}
|
||||
<ul>
|
||||
{foreach item=category from=$root.categories}
|
||||
<li><a href="{$category.url}">{$category.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{/foreach}
|
||||
<li class="clr"></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div id="category_tree" class="block box roundies">
|
||||
<h3 class="head">
|
||||
{__ text="Kategorie" langCatalogue="stCategory"}
|
||||
</h3>
|
||||
<div class="content">
|
||||
{include_st_component module="stProducer" component="list"}
|
||||
{$category_tree_content}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
<ul id="vertical-categories" class="nav nav-stacked">
|
||||
<h3>
|
||||
{__ text="Kategorie" langCatalogue="stCategory"}
|
||||
</h3>
|
||||
{if $parent}
|
||||
<li class="parent"><a href="{$parent.url}"><span class="glyphicon glyphicon-chevron-left"></span> <span class="name">{$parent.name}</span></a></li>
|
||||
{/if}
|
||||
{if $current}
|
||||
<li>
|
||||
<span class="current">
|
||||
<a href="{$current.url}">{$current.name}</a>
|
||||
</span>
|
||||
<ul class="nav nav-stacked">
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
{foreach item=child from=$categories}
|
||||
<li{if $selected && $child.id == $selected.id} class="active"{/if}>
|
||||
<a href="{$child.url}">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
{/if}
|
||||
</ul>
|
||||
@@ -0,0 +1,177 @@
|
||||
<ul class="nav navbar-nav horizontal-categories" style="visibility: hidden; height: 0">
|
||||
<li class="visible-xs">
|
||||
{include_file id="_search"}
|
||||
</li>
|
||||
<li class="hidden-xs">
|
||||
<a href="{$homepage_url}">{__ text="Home" langCatalogue="stFrontend"}</a>
|
||||
</li>
|
||||
{foreach item=category from=$categories}
|
||||
{if $category.has_children}
|
||||
{assign var=children value=$tree->getChildren($category)}
|
||||
{if $children}
|
||||
<li class="dropdown">
|
||||
<a href="{$category.url}" class="dropdown-toggle category-link" data-hover="dropdown" data-toggle="dropdown">{$category.name}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{foreach item=child from=$tree->getChildren($category)}
|
||||
<li>
|
||||
<a href="{$child.url}" class="category-link">{$child.name}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</li>
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{else}
|
||||
<li>
|
||||
<a href="{$category.url}" class="category-link">{$category.name}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{slot name="after-category-ends" hidden="true"}{/slot}
|
||||
{st_get_component module="stWebpageFrontend" component="groupWebpage" group_page="HEADER"}
|
||||
</ul>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var horizontalCategories = $('.horizontal-categories');
|
||||
var headerContainer = $('#header-navbar .container');
|
||||
var logo = $('#logo');
|
||||
var buttons = $('#navbar-buttons');
|
||||
var categories = horizontalCategories.children(':not(.more)');
|
||||
var moreContainer = $('<li style="display: none" class="dropdown more"><a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><ul class="dropdown-menu"></ul>');
|
||||
|
||||
moreContainer.children("a").dropdownHover();
|
||||
|
||||
horizontalCategories.append(moreContainer);
|
||||
|
||||
horizontalCategories.bind('highlight', function(event, href) {
|
||||
var $this = $(this);
|
||||
if (href) {
|
||||
$this.find('a[href="'+href+'"]').parents("li").addClass("active");
|
||||
$this.data('href', href);
|
||||
} else {
|
||||
$this.find('a[href="'+$this.data('href')+'"]').parents("li").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function more() {
|
||||
var current = 0;
|
||||
var content = '';
|
||||
|
||||
moreContainer.hide();
|
||||
|
||||
if ($(window).width() < 768) {
|
||||
categories.show();
|
||||
} else {
|
||||
horizontalCategories.css({ visibility: 'hidden', 'height': 0 });
|
||||
|
||||
var widthOffset = logo.width() + buttons.width() + moreContainer.width() + 30;
|
||||
var width = headerContainer.width() - widthOffset;
|
||||
categories.each(function() {
|
||||
var li = $(this);
|
||||
|
||||
current += li.width() + 40;
|
||||
|
||||
if (current >= width) {
|
||||
li.hide();
|
||||
var link = li.children('a');
|
||||
content += '<li><a href="'+link.attr('href')+'" class="category-link">'+link.html()+'</a></li>';
|
||||
} else {
|
||||
li.show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (content) {
|
||||
moreContainer.children('.dropdown-menu').html(content);
|
||||
moreContainer.show();
|
||||
horizontalCategories.trigger('highlight');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
horizontalCategories.css({ visibility: 'visible', 'height': 'auto' });
|
||||
}
|
||||
|
||||
horizontalCategories.on("click", '.category-link', function() {
|
||||
var link = $(this);
|
||||
|
||||
if (link.data('toggle') != 'dropdown' || link.data('toggle') == 'dropdown' && link.parent().hasClass('open')) {
|
||||
window.location = $(this).attr('href')+'?horizontal';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var win = $(window);
|
||||
|
||||
var throttle = 250,
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( window ).trigger( "throttledresize" );
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
lastCall = 0,
|
||||
heldCall,
|
||||
curr,
|
||||
diff;
|
||||
|
||||
win.resize(handler);
|
||||
|
||||
win.on("deviceorientation", handler);
|
||||
|
||||
win.on("throttledresize", more);
|
||||
|
||||
$(window).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend msAnimationEnd animationend", more);
|
||||
more();
|
||||
|
||||
$('#header-navbar').removeClass('hide-menu');
|
||||
var lastScrollTop = 0;
|
||||
var quit = false;
|
||||
$(window).scroll(function(event){
|
||||
var st = $(this).scrollTop();
|
||||
if (st > 75){
|
||||
if (st < lastScrollTop){
|
||||
$('#header-navbar').removeClass('hide-menu');
|
||||
if(quit === false) {
|
||||
more();
|
||||
quit = true;
|
||||
}
|
||||
} else {
|
||||
$('#header-navbar').addClass('hide-menu');
|
||||
if(quit === true) {
|
||||
more();
|
||||
quit = false;
|
||||
}
|
||||
}
|
||||
}else if ((st < 75) && (st > lastScrollTop)) {
|
||||
$('#header-navbar').removeClass('hide-menu');
|
||||
more();
|
||||
if(quit === false) {
|
||||
more();
|
||||
quit = true;
|
||||
}
|
||||
};
|
||||
lastScrollTop = st;
|
||||
});
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,21 @@
|
||||
{assign var='col_xs' value=$theme_config->getConfigParameter('layout_config.category_in_row_mobile')}
|
||||
{assign var='col_sm' value=$theme_config->getConfigParameter('layout_config.category_in_row_desktop')}
|
||||
|
||||
<div class="category-list product-list flex flex-wrap" data-equalizer>
|
||||
{foreach item=category from=$categories}
|
||||
<div class="product{if $col_xs == 2} col-xs-6{else} col-xs-12{/if} col-sm-4{if $col_sm == 4} col-lg-3{elseif $col_sm == 5} col-md-3 col-lg-20p{elseif $col_sm == 6} col-md-3 col-lg-2{/if}">
|
||||
<div class="thumbnail clearfix">
|
||||
<div data-equalizer-watch="image">
|
||||
<div class="image">
|
||||
<a href="{$category.url}">
|
||||
<img class="img-responsive" alt="{$category.name}" src="{st_asset_image_path image=$category.image type='small' for='category'}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption {if $theme_config->getConfigParameter('layout_config.category_info_align_desktop_home') == 'left'}text-left{else}text-center{/if}" data-equalizer-watch="caption">
|
||||
<h2 class="name"><a href="{$category.url}" >{$category.name}</a></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
Reference in New Issue
Block a user