FrontendOtherOld/produkty-rekomendowane-w-sliderze-pod-menu
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add files

Browse Source
This commit is contained in:
KubaGlegola
2024-01-02 09:53:58 +01:00
parent fa39e639de
commit aa2b9112d9
4 changed files with 2227 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

415
javascript.js Normal file
View File

@@ -0,0 +1,415 @@
var submenuWidth = "200";
var dlmenu_showmore = "1";
var dlmenu_shownumber = "10";
var dlmenu_columnHeight = "320";
var dlmenu_columnConcat = "1";
var dlmenu_padding = "30";
var dlmenu_columns = "5";
var dlmenu_wide = "true";
dlmenu_padding == "" ? 0 : dlmenu_padding;
dlmenu_columns == "" ? 5 : dlmenu_columns;
app_shop.fn.mobileGen = function (reverse = false) {
if (reverse) {
$(".nav-header").remove();
} else if (!$(".nav-header").length) {
var menuList = $("aside .nav-link + ul");
$.each(menuList, function (index, val) {
var navHeader = $(val).prev();
$(val).prepend('<li class="nav-header"></li>');
$(val).find(".nav-header").prepend(navHeader.clone());
$(val)
.find(".nav-header")
.prepend(
'<a href="#backLink" class="nav-header__backLink"><i class="icon-angle-left"></i></a>'
);
});
}
};
app_shop.run(
function () {
var window_w = $(window).width();
$(".navbar-nav .isOverflow").removeClass("isOverflow");
$(".navbar-nav > .nav-item").each(function () {
var place = 0;
$this = $(this);
place = window_w - $this.offset().left;
if (place < parseInt(submenuWidth)) {
$this.addClass("isOverflow");
}
if (place < parseInt(submenuWidth * 2)) {
$this.find(".navbar-subnav").addClass("isOverflow");
}
});
$(".nav-link img.rwd-src").each(function () {
$this = $(this);
$this.attr("src", app_shop.fn.getRwdSrc($this));
});
if (app_shop.vars.view < 2) {
if (window.matchMedia("(display-mode: standalone)").matches) {
$(".nav-link").each(function (event) {
if ($(this).next().is("ul")) {
$(this).attr("data-href", $(this).attr("href"));
$(this).attr("href", "##");
$(this).addClass("not_selectable");
}
});
}
} else {
$(".nav-link").each(function (event) {
if ($(this).attr("data-href") != "") {
$(this).attr("href", $(this).attr("data-href"));
$(this).removeAttr("data-href");
}
$(this).removeClass("not_selectable");
});
}
if (app_shop.vars.view > 2) {
$("html").removeClass("filters_open").removeClass("sidebar_open");
}
},
[1, 2, 3, 4],
"#menu_categories"
);
app_shop.run(
function () {
app_shop.fn.mobileGen(true);
},
[3, 4],
"#menu_categories"
);
$(document).on("click", ".navbar-toggler", function (e) {
e.preventDefault();
if (
$("html").hasClass("filters_open") ||
$("html").hasClass("sidebar_open")
) {
$("html").removeClass("filters_open").removeClass("sidebar_open");
$('header .handler[data-item="menu_search"]').before($("#menu_search")); //przeniesienie wyszukiwarki do menu
$('header .handler[data-item="menu_search"]').remove();
} else {
$("html").addClass("sidebar_open");
$("#menu_search").before(
'<del class="handler" data-item="menu_search" style="display:none"></del>'
);
if (typeof app_shop.fn.shoppingList === "object") {
$('aside .setMobileGrid[data-item="#menu_navbar"]').before(
$("#menu_search")
); //przeniesienie wyszukiwarki do menu
} else {
$('aside .setMobileGrid[data-item="#menu_navbar"]').after(
$("#menu_search")
); //przeniesienie wyszukiwarki do menu
}
}
$(
"aside .navbar-subnav, aside .navbar-subsubnav, aside, #menu_settings form"
).scrollTop(0);
app_shop.fn.mobileGen(); // duplicate not only-child elements and paste their to ul as first child
app_shop.fn.setMobileCategories ? app_shop.fn.setMobileCategories() : ""; //zakładki w menu mobilnym
return false;
});
$(document).on("click", "aside .navbar-collapse .nav-link", function () {
var _next = $(this).next(),
_parent = $(this).parent(),
_children = _next.children();
if (_next.is("ul") && app_shop.vars.view < 3) {
_parent.toggleClass("nav-open");
if (_children.length === 2) _children.last().toggleClass("nav-open");
return false;
}
});
$(document).on("click", "aside .nav-header .nav-header__backLink", function () {
var _parent = $(this).parents(".nav-open").eq(0),
_ul = _parent.parents("ul").eq(0),
_children = _ul.children();
_parent.removeClass("nav-open");
if (_children.length === 2)
_ul.parents(".nav-open").eq(0).removeClass("nav-open");
return false;
});
$(document).on(
"click",
".touch header .navbar-collapse .nav-link",
function (event) {
var _next = $(this).next();
var _visible = _next.is(".active");
$(".nav-item ul").removeClass("active");
if ($(this).parent().parent().hasClass("navbar-nav")) {
$(".navbar-subnav").removeClass("--hover");
}
if (
$("#menu_navbar").parent(".wide").size() &&
_next.parents("ul").size() > 1
) {
return true;
}
if (_next.is("ul")) {
if (_visible) {
_next.removeClass("active");
_next.find("ul.active").removeClass("active");
_next.parents("ul").not(".navbar-nav").addClass("active");
} else {
_next.addClass("active");
_next.parents("ul").not(".navbar-nav").addClass("active");
$("body").off("click.navbar");
$("body").on("click.navbar", function (event) {
$(".nav-item ul").removeClass("active");
});
}
if ($(this).next(".navbar-subnav").length > 0) {
$(this).attr("data-visited")
? ""
: (app_shop.fn.concatColumns(_next),
app_shop.fn.setPositionMenu(_next));
$(this).attr("data-visited", "true");
}
event.preventDefault();
return false;
}
}
);
$(document).on(
"click",
".sidebar_open header, .sidebar_open #content, .sidebar_open footer, .filters_open header, .filters_open #content, .filters_open footer",
function (event) {
$("html").removeClass("sidebar_open filters_open");
$(".nav-open").removeClass("nav-open");
$("#menu_settings form").removeClass("active");
$('header .handler[data-item="menu_search"]').before($("#menu_search")); //przeniesienie wyszukiwarki do menu
$('header .handler[data-item="menu_search"]').remove();
app_shop.fn.setMobileCategories ? app_shop.fn.setMobileCategories() : ""; //zakładki w menu mobilnym
event.preventDefault();
return false;
}
);
app_shop.run(
function megaMenuInit() {
if (dlmenu_wide) {
/* event dodanie przycisku rozwin */
$("#menu_categories .nav-item.--extend").each(function () {
$(this).off();
$(this).on("click", function naviShowMore(e) {
e.preventDefault();
$(this).parent().toggleClass("show");
let link = $(this).find("a");
let oldTxt = link.text();
link.off();
link.text(link.attr("txt_alt"));
link.attr("txt_alt", oldTxt);
link.parents(".navbar-subnav").addClass("--hover");
return false;
});
});
/* pokazywanie menu po akcji zwiń */
$(".navbar-subnav").on("mouseover", function () {
$(".navbar-subnav").removeClass("--hover");
});
/* pokazywanie menu po akcji zwiń */
$(".no-touch .navbar-nav > .nav-item > .nav-link").on(
"mouseover",
function () {
if ($(this).next(".navbar-subnav").length > 0) {
$(this).attr("data-visited")
? ""
: (app_shop.fn.concatColumns($(this).next(".navbar-subnav")),
app_shop.fn.setPositionMenu($(this).next(".navbar-subnav")));
$(this).attr("data-visited", "true");
}
}
);
app_shop.fn.concatColumns = function (subnav) {
/* laczenie elementów menu */
if (
typeof dlmenu_columnConcat != "undefined" &&
dlmenu_columnConcat != ""
) {
let html = $("<li>", { class: "nav-item nav-merge" });
let x = parseInt(dlmenu_columnHeight);
subnav.find(" > .nav-item").each(function () {
const $this = $(this);
let $thisItemsHeight = $this.height();
let $nextItemsHeight = $this.next().height();
!$this.hasClass("nav-merge")
? ($thisItemsHeight = $this.height())
: "";
!$this.next().hasClass("nav-merge")
? ($nextItemsHeight = $this.next().height())
: "";
if ($this.hasClass("--all")) {
x = 0;
}
$thisItemsHeight < x && $nextItemsHeight + $thisItemsHeight < x
? ($this.after(html),
html.append($this),
(x = x - $thisItemsHeight))
: $thisItemsHeight < x
? ($this.after(html),
html.append($this),
(x = parseInt(dlmenu_columnHeight)),
(html = $("<li>", { class: "nav-item nav-merge" })))
: "";
});
}
};
/* bez pogrubienia kiedy jest tylko 2 poziom */
$("#menu_categories .navbar-nav > .nav-item").each(function () {
if (
$(this).find("li.nav-item:not(.empty):not(.nav-merge)").length === 0
) {
$(this).addClass("--noBold");
}
});
app_shop.fn.setPositionMenu = function (subnav) {
/* ustawienie pozycji aby nie było pustch przestrzeni */
const containerW = $("#menu_categories").width() - dlmenu_padding;
const colsCount = subnav.find("> .nav-item:not(.--all)").length;
subnav.addClass("--cols1");
if (
(colsCount < dlmenu_columns && window.screen.width > 1200) ||
(colsCount < dlmenu_columns - 1 && window.screen.width < 1200)
) {
let $this = subnav;
let thisLeft = $this.parent().position().left;
thisLeft = thisLeft < 0 ? 0 : thisLeft;
let thisOver = containerW - ($this.width() + thisLeft);
let posL = thisLeft - thisOver * -1;
posL = thisOver > 0 ? thisLeft : posL;
$this.css("left", posL + "px");
}
};
document
.querySelectorAll(".nav-link:not(.nav-gfx) > img.gfx_lvl_1.--omo")
.forEach((el) => {
el.style.maxWidth = `${el.previousElementSibling.offsetWidth}px`;
});
}
},
[3, 4],
"#menu_categories"
);
app_shop.run(
function () {
$(".nav-link.nav-gfx").on({
mouseenter() {
const imgElement = $(this).find("img");
const dataOmo = imgElement.data("omo");
const paddingWidth =
imgElement.parent().innerWidth() - imgElement.parent().width();
const paddingHeight =
imgElement.parent().innerHeight() - imgElement.parent().height();
if (dataOmo) {
imgElement
.parent()
.css("min-width", imgElement.width() + paddingWidth);
imgElement
.parent()
.css("min-height", imgElement.height() + paddingHeight);
imgElement.attr("data-tmp_img", imgElement.attr("src"));
if (dataOmo === "img_rwd") {
if (app_shop.vars.view === 1) {
imgElement.attr("src", imgElement.data("omo_mobile"));
} else if (app_shop.vars.view === 2) {
imgElement.attr("src", imgElement.data("omo_tablet"));
} else {
imgElement.attr("src", imgElement.data("omo_desktop"));
}
} else {
imgElement.attr("src", imgElement.data("omo_img"));
}
}
},
mouseleave() {
const imgElement = $(this).find("img");
const tmpImg = imgElement.data("tmp_img");
if (tmpImg) {
imgElement.attr("src", tmpImg);
imgElement.removeAttr("data-tmp_img");
}
},
});
},
"all",
".nav-link"
);
app_shop.run(
function () {
$(".navbar-subsubnav").on({
mouseenter() {
$(this).parent()[0].classList.add("nav-item-hoversub");
},
mouseleave() {
$(this).parent()[0].classList.remove("nav-item-hoversub");
},
});
},
"all",
".navbar-subsubnav"
);
app_shop.run(
function () {
$(".navbar-subnav").on({
mouseenter() {
$(this).parent()[0].classList.add("nav-item-hoverNavLink");
const imgElement = $(this).parent().find("img#gfx_inactive_img");
const dataOmo = imgElement.data("omo");
const paddingWidth =
imgElement.parent().innerWidth() - imgElement.parent().width();
const paddingHeight =
imgElement.parent().innerHeight() - imgElement.parent().height();
if (dataOmo) {
imgElement
.parent()
.css("min-width", imgElement.width() + paddingWidth);
imgElement
.parent()
.css("min-height", imgElement.height() + paddingHeight);
imgElement.attr("data-tmp_img", imgElement.attr("src"));
if (dataOmo === "img_rwd") {
if (app_shop.vars.view === 1) {
imgElement.attr("src", imgElement.data("omo_mobile"));
} else if (app_shop.vars.view === 2) {
imgElement.attr("src", imgElement.data("omo_tablet"));
} else {
imgElement.attr("src", imgElement.data("omo_desktop"));
}
} else {
imgElement.attr("src", imgElement.data("omo_img"));
}
}
},
mouseleave() {
$(this).parent()[0].classList.remove("nav-item-hoverNavLink");
const imgElement = $(this).parent().find("img#gfx_inactive_img");
const tmpImg = imgElement.data("tmp_img");
if (tmpImg) {
imgElement.attr("src", tmpImg);
imgElement.removeAttr("data-tmp_img");
}
},
});
},
"all",
".navbar-subnav"
);

943
less_css.less Normal file
View File

@@ -0,0 +1,943 @@
@media (min-width: 979px) {
.nav-item-hoversub {
background: #0587ec;
> .nav-link {
color: #fff;
&:after {
color: #fff !important;
}
}
}
}
@keyframes loading {
0% {
border-left: 0 solid #e21e24;
}
10% {
border-left: 0 solid #e21e24;
}
90% {
border-left: 150px solid #e21e24;
}
100% {
border-left: 150px solid #e21e24;
}
}
.fetchingData {
display: grid !important;
}
@media (max-width: 979px) {
#loaded_contant_bm_hotspots {
display: none;
}
}
#loaded_contant_bm_hotspots:after {
content: "";
position: absolute;
text-align: center;
display: flex;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 7px;
width: 150px;
display: block;
background: #fff;
opacity: 1;
z-index: 1;
box-sizing: border-box;
animation: loading 2s infinite linear;
box-shadow: 0 0 0 7px #f1f1f1;
}
#menu_navbar {
@media (min-width: 979px) {
.navbar__whiteBackground {
position: absolute;
top: 0;
min-height: 100%;
left: 100%;
width: calc((3 * 100%) - 13.4rem);
// width: 500px !important;
z-index: 1;
background: #fff;
border-left: 1px solid #efefef;
box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 8px 0px,
rgba(0, 0, 0, 0.04) 5px -1px 7px 2px;
z-index: -1;
> .navbar-whiteBackground__recommendationContainer {
height: 430px !important;
min-width: 800px !important;
.product {
height: 430px !important;
}
.product__icon > img {
width: 100% !important;
height: 100% !important;
}
}
> .navbar-whiteBackground__baner {
// position: absolute;
// top: 0;
// left: 0;
width: 100%;
> img {
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.04) 4px 5px 8px 0px,
rgba(0, 0, 0, 0.04) 8px 5px 7px 2px;
}
}
}
.nav-item-hoverNavLink {
background-color: #fff;
> .nav-link.nav-gfx {
color: #0c2cac;
}
}
}
.menu_go_up {
text-decoration: none !important;
}
.mobile_category_list {
> .menu_categories_list_item {
padding: 15px 0;
color: #000;
font-weight: 400;
line-height: 20px;
border-bottom: 1px solid #efefef;
font-size: 14px;
text-decoration: none;
> .menu_categories_list_item_label {
cursor: pointer;
> div {
&:not(.--not-expanded) {
&:after {
content: "\f0d7";
margin-right: 1rem;
font-family: FontAwesome;
font-size: 1.6rem;
}
}
&.--not-expanded {
&:after {
content: "\f0d8";
margin-right: 1rem;
font-family: FontAwesome;
font-size: 1.6rem;
}
}
}
img {
margin-right: 1rem;
}
}
> .menu_categories_sublist {
display: none;
margin-top: 1rem;
border-top: 1px solid #efefef;
> li:first-child {
margin-top: 1rem;
}
a {
text-decoration: none;
}
.active {
display: flex;
flex-direction: column;
justify-content: space-between;
font-weight: 600;
.menu_categories_sublist_item_label {
> div {
> .menu_go_up {
color: #e21e24 !important;
}
&:not(.--not-expanded) {
&:after {
content: "\f0d7";
margin-right: 1rem;
font-family: FontAwesome;
font-size: 1.6rem;
}
}
&.--not-expanded {
&:after {
content: "\f0d8";
margin-right: 1rem;
font-family: FontAwesome;
font-size: 1.6rem;
}
}
}
}
}
.active_subsublist {
.menu_categories_subsublist_item_label {
width: 100%;
a {
color: #e21e24 !important;
}
}
}
> .empty {
font-weight: 600;
margin-bottom: 1.5rem;
}
> .menu_categories_sublist_item {
cursor: pointer;
font-weight: 600;
margin-bottom: 1.5rem;
> .menu_categories_sublist_item_label {
> div {
&:not(.--not-expanded) {
&:after {
content: "\f0d7";
margin-right: 1rem;
font-family: FontAwesome;
font-size: 1.6rem;
}
}
&.--not-expanded {
&:after {
content: "\f0d8";
margin-right: 1rem;
font-family: FontAwesome;
font-size: 1.6rem;
}
}
}
}
> .menu_categories_subsublist {
display: none;
> .menu_categories_subsublist_item {
> .menu_categories_subsublist_item_label {
width: 100%;
padding: 0.7rem 0;
font-weight: 300;
}
}
}
}
}
}
}
}
#menu_categories {
border: none;
padding: 0;
grid-area: menu_categories;
z-index: 1;
@media (min-width: 979px) {
width: auto;
clear: both;
position: relative;
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
margin-left: -50vw;
width: 100vw;
height: calc(100%);
background: rgb(8, 13, 87);
background: -moz-radial-gradient(
circle,
rgba(8, 13, 87, 1) 0%,
rgba(0, 133, 236, 1) 100%
);
background: -webkit-radial-gradient(
circle,
rgba(8, 13, 87, 1) 0%,
rgba(0, 133, 236, 1) 100%
);
background: radial-gradient(
circle,
rgba(8, 13, 87, 1) 0%,
rgba(0, 133, 236, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#080d57",endColorstr="#0085ec",GradientType=1);
overflow: hidden;
}
}
}
.navbar-toggler {
display: inline-block;
color: @less_iaicolorscheme_background_text_color;
border: none;
background: none;
font-size: 1.7rem;
padding: 0;
width: 45px;
line-height: @header_height_mobile;
text-align: right;
padding-right: 1.5rem;
@media (min-width: 979px) {
display: none;
}
}
aside {
.navbar-collapse {
background: @less_iaicolorscheme_background_color;
clear: both;
display: block;
margin-bottom: 1.5rem;
@media (min-width: 979px) {
display: none;
}
ul {
list-style: none;
}
img {
&.--omo {
display: none;
}
}
}
.navbar-nav {
z-index: 9;
#product_category_element {
@media (max-width: 979px) {
display: none !important;
}
}
}
.navbar-subnav {
z-index: 9;
}
.navbar-subsubnav {
z-index: 19;
}
.navbar-subnav,
.navbar-subsubnav,
.navbar-subsubsubnav {
width: ~"calc(100vw - 60px)";
position: fixed;
background: @less_iaicolorscheme_background_color;
top: 0;
height: 100vh;
overflow: auto;
right: -100%;
transition: right 0.3s;
padding: 60px 1.5rem 120px;
display: none;
@media (min-width: 757px) {
width: 50vw;
}
}
.nav-item {
display: block;
&.--extend {
display: none;
}
}
.nav-link {
padding: 15px 0;
color: @link_color_hover;
font-weight: 400;
display: flex;
line-height: 20px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #efefef;
font-size: 14px;
cursor: pointer;
text-decoration: none;
&.not_selectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
&:not(:only-child) {
&:after {
font-family: FontAwesome;
font-size: 22px;
content: "\f105";
color: inherit;
}
}
&:hover {
span.--omo {
display: none;
}
img.--omo {
display: block;
}
}
&.active {
color: @link_color;
}
}
a.nav-link {
&:hover {
color: @link_color;
}
}
.nav-header {
position: fixed;
top: 0;
right: -100%;
transition: right 0.3s;
width: ~"calc(100vw - 60px)";
padding: 0 1.5rem;
@media (min-width: 757px) {
width: 50vw;
}
&__backLink {
position: absolute;
width: 40px;
height: 61px;
display: flex;
align-items: center;
font-size: 24px;
line-height: 29px;
text-decoration: none;
left: 20px;
z-index: 1;
}
.nav-link {
background: @less_iaicolorscheme_background_color;
text-align: center;
display: block;
font-weight: 600;
font-size: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-left: 40px;
padding-right: 40px;
line-height: 30px;
&:after {
content: "\f104";
position: absolute;
left: 20px;
font-weight: 400;
font-family: FontAwesome;
font-size: 24px;
line-height: 29px;
display: none;
}
&.nav-gfx {
padding: 5px 20px 5px 40px;
height: 60px;
line-height: normal;
display: flex;
justify-content: center;
align-items: center;
&:after {
line-height: 50px;
}
img {
max-height: 50px;
}
}
}
}
}
header {
.navbar-collapse {
display: none;
position: relative;
@media (min-width: 979px) {
display: block;
}
ul {
list-style: none;
}
img {
display: block;
margin-right: 1rem;
width: 32px;
height: 32px;
&.--omo {
display: none;
}
}
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
list-style: none;
font-size: 1.5rem;
align-items: center;
justify-content: space-between;
#nav-item-mark {
&:hover {
.menu_categories_sublist {
display: flex;
}
}
> .menu_categories_sublist {
position: absolute;
width: 72%;
display: none;
left: 323px;
z-index: 9999999999;
min-height: 500px !important;
background: #f3f3f3;
line-height: 2rem;
padding: 10px 20px !important;
line-height: 2;
flex-wrap: wrap;
> li {
margin-right: 3rem;
a {
text-decoration: none;
font-weight: 900;
cursor: pointer;
}
}
}
}
& > li {
&:hover {
& > ul {
// display: grid;
}
}
}
}
.navbar-subnav {
display: none;
height: 430px !important;
// width: 100%;
font-size: 1.3rem;
z-index: 100;
position: absolute;
background: @less_iaicolorscheme_background_color;
// border: 1px solid @less_iaicolorscheme_background_border_color;
// right: 0;
//left: -1.1rem;
top: 60px;
left: -10px !important;
// width: ~'calc(100% + 3rem)';
// box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.2);
flex-wrap: wrap;
justify-content: left;
align-items: start;
grid-template-columns: 1fr 1fr 1fr 1fr;
box-shadow: rgba(0, 0, 0, 17%) 0px 4px 8px 0px,
rgba(0, 0, 0, 0.04) 5px -1px 7px 2px;
// border-radius: @less_iaicolorscheme_border_radius_value_sm;
padding: 10px;
z-index: -1;
@media @desktop {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
@media @large {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
&.--cols1 {
width: ~"calc(30% - 2rem)";
grid-template-columns: 1fr;
grid-template-rows: 30px;
@media @desktop {
width: ~"calc(30% - 2rem)";
}
}
&.--cols2 {
width: ~"calc(50% - 2rem)";
grid-template-columns: 1fr 1fr;
@media @desktop {
width: ~"calc(40% - 2rem)";
}
}
&.--cols3 {
width: ~"calc(75% - 2rem)";
grid-template-columns: 1fr 1fr 1fr;
@media @desktop {
width: ~"calc(60% - 2rem)";
}
}
&.--cols4 {
width: ~"calc(100% + 3rem)";
grid-template-columns: 1fr 1fr 1fr 1fr;
@media @desktop {
width: ~"calc(80% - 2rem)";
}
}
&.--cols5 {
width: ~"calc(100% + 3rem)";
grid-template-columns: 1fr 1fr 1fr 1fr;
@media @desktop {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
&.active,
&.--hover {
display: grid;
}
.nav-link {
// text-transform: uppercase;
font-size: 1.4rem;
padding: 10px;
}
& > .nav-item {
&.--all {
grid-column: span 5;
display: flex;
justify-content: center;
}
}
}
.navbar-subsubnav {
padding-bottom: 10px;
.navbar-subsubnav__itemContainer {
max-width: 50%;
flex: 50%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: max-content;
> .nav-item {
> .nav-link {
color: #a5a5a5;
font-weight: 600;
font-size: 1.1em;
&:hover {
color: #fff;
cursor: pointer;
}
}
}
}
.navbar-subsbunav__baner {
// display: none;
width: 100%;
flex: 50%;
> img {
width: 100%;
height: 190px;
}
}
.nav-link {
font-weight: normal;
text-transform: none;
font-size: 1.2rem;
padding: 2.5px 10px;
}
}
.nav-item {
&.--extend,
&.--all {
.nav-link {
text-decoration: underline;
text-transform: none;
font-weight: normal;
font-size: 1.2rem;
}
}
}
.nav-link {
display: block;
padding: 5px 10px 8px;
text-decoration: none;
font-weight: 600;
// text-transform: uppercase;
&:hover {
span.--omo {
display: none;
}
img.--omo {
display: block;
}
}
&.active {
color: @link_color;
}
}
}
.sidebar_open,
.filters_open {
header {
@media (max-width: 979px) {
grid-template-columns: 25vw 25vw 25vw 25vw;
grid-template-areas:
"rabateCode rabateCode rabateCode rabateCode"
"freeShipping freeShipping freeShipping freeShipping"
"menu_categories logo menu_search menu_basket";
}
#menu_categories {
margin-left: 0;
text-align: left;
width: auto;
@media (min-width: 757px) {
width: 50vw;
text-align: right;
}
}
.navbar-toggler {
border: none;
}
}
}
.sidebar_open {
aside {
.nav-open {
& > ul {
right: 0;
display: block;
left: auto !important;
& > .nav-header {
right: 0;
}
}
}
}
}
// www.code-ready.pl
@media (min-width: 979px) {
header .navbar-nav {
& > .nav-item {
&:nth-child(1) {
& > .nav-link {
display: flex;
justify-content: space-between;
align-items: center;
}
}
& > .nav-link {
color: #fff;
padding: 0px 15px;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
background: #fff;
color: #0c2cac;
}
}
}
}
.wide .navbar-subnav {
padding: 0;
height: var(--height);
.navbar-subnav__topName {
padding: 10px;
@media (max-width: 979px) {
display: none !important;
}
> .navbar-subnav__topName_name,
.navbar-subnav__topName_link {
color: #a5a5a5;
font-weight: 600;
}
> .navbar-subnav__topName_link {
text-decoration: none;
&:hover {
color: #0587ec;
}
}
}
.nav-item {
border-bottom: 1px solid #efefef;
&:not(.empty) > .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
&:after {
content: "\F105";
font-family: FontAwesome;
font-size: 15px;
color: #0587ec;
}
& > .nav-link {
padding: 10px 20px !important;
&:after {
content: "";
}
}
}
.nav-link {
&:hover {
background: #0085ec;
color: #fff;
&:after {
color: #fff;
}
}
}
img {
mix-blend-mode: multiply;
margin-right: 1rem;
}
}
}
/* SUBMENU */
.wide ul.navbar-nav li.nav-item {
> ul.navbar-subsubnav {
display: none;
position: absolute;
top: 0;
min-height: 100%;
left: 100%;
width: calc((3 * 100%) - 13.4rem);
box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 8px 0px,
rgba(0, 0, 0, 0.04) 5px -1px 7px 2px;
padding: 10px 20px !important;
background: #fff;
z-index: 2;
.nav-item {
border: none !important;
> .nav-link {
&:after {
content: "";
}
}
}
.navbar-subsubsubnav {
.nav-item {
border: none !important;
color: #000 !important;
> .nav-link {
&:after {
content: "";
}
}
}
}
}
&:hover > ul.navbar-subsubnav {
display: flex;
line-height: 2rem;
}
}
header .navbar-subsubnav {
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
-webkit-column-count: 4;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-moz-column-count: 3;
-ms-column-width: 20em;
-ms-column-gap: 2em;
-ms-column-count: 3;
column-width: 10em;
column-gap: 2em;
column-count: 3;
padding: 20px;
.nav-item {
margin-bottom: 1rem;
}
}
.core-menu-banner {
position: absolute;
left: 0;
bottom: 0;
}
} //END

287
wydzielony_javascript.js Normal file
View File

@@ -0,0 +1,287 @@
const obj = {
"/pl/menu/fotografia-205": {
id: "3827",
val: "3828",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/filmowanie-212": {
id: "3829",
val: "3830",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/statywy-201": {
id: "3831",
val: "3832",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/torby-i-plecaki-202": {
id: "3833",
val: "3834",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/studio-204": {
id: "3835",
val: "3836",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/audio-203": {
id: "3837",
val: "3838",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/outdoor-252": {
id: "3839",
val: "3840",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/mobile-334": {
id: "3841",
val: "3842",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
"/pl/menu/inne-1019": {
id: "3843",
val: "3844",
isFetched: false,
tmp_fetch: false,
isMouseOver: false,
},
};
const initSlider = (slickContainer, navEl, objLinkHref) => {
$(slickContainer).slick({
slidesToShow: 3,
prevArrow:
'<a class="slick-prev" href=""><i class="icon-angle-left"></i></a>',
nextArrow:
'<a class="slick-next" href=""><i class="icon-angle-right"></i></a>',
});
$(slickContainer).on("afterInit", function (event, slick, direction) {
console.log("dasdasdXDD");
});
setTimeout(() => {
objLinkHref.isFetched = true;
objLinkHref.isMouseOver ? "" : (navEl.style.display = "none");
}, 100);
};
const fetchProducts = (
container,
traitId,
traitVal,
subNavHandler,
objLinkHref
) => {
let tmp_text = ``;
$.ajax({
type: "GET",
url: `https://multifoto.pl/pl/search.php?traits_alt[${traitId}]=${traitVal}&getProductXML=true&limit=10`,
dataType: "xml",
timeout: 12000,
success: function (xml) {
$(xml)
.find("page > products > product")
.each(function (index) {
const prod = $(this);
const name =
prod.find("name").eq(1).text().length > 3
? prod.find("name").eq(1).text()
: prod.find("name").eq(0).text();
const id = prod.attr("id");
const photo = prod.find("icon_src").eq(0).text();
const url = prod.attr("link");
const rate = prod.find("comments").attr("avg");
const size = prod.find("sizes > size").attr("name");
const availability = prod.find("sizes > availability").attr("status");
// Zmienne związane z ceną
const pricesEl = prod.find("prices");
const priceEl = prod.find("price");
const price = priceEl.attr("price_formatted");
const maxPrice = priceEl.attr("maxprice_formatted");
const omnibusPrice = priceEl.attr("omnibus_price_formatted");
// markup produktu
tmp_text += `
<div
class="product d-flex flex-column justify-content-between col-6 col-sm-3 col-xl-2 py-3"
tabindex="0"
style="min-width: 250px;"
>
<a
class="product__icon d-flex justify-content-center align-items-center"
rel="nofollow"
data-product-id="${id}"
href="${url}"
title="${name}"
style="max-height: 225px"
tabindex="0"
>
<img src="${photo}" class="b-lazy b-loaded" alt="${name}"
/></a>
<div class="d-flex justify-content-between mb-1" style="align-self: flex-end">
<div>
<div class="avg__wrapper">
<div class="avg d-flex align-items-center" data-avg=${rate}>
<div class="note">
<span
><i class="icon-star ${
rate > 0.5 ? "--active" : ""
}"></i><i class="icon-star ${
rate > 1.5 ? "--active" : ""
}"></i
><i class="icon-star ${
rate > 2.5 ? "--active" : ""
}"></i><i class="icon-star ${
rate > 3.5 ? "--active" : ""
}"></i
><i class="icon-star ${rate > 4.5 ? "--active" : ""}"></i
></span>
</div>
</div>
</div>
</div>
</div>
<h3>
<a class="product__name" rel="dofollow" href="${url}" title="${name}"
>${name}
</a>
</h3>
<div class="product__prices --omnibus">
<div class="product__price_container">
<div>
${
maxPrice && omnibusPrice
? `
<div class="product__priceMax_container">
<span class="price --max"
><del>${maxPrice}<span class="price_vat"> brutto</span></del></span
><strong class="price --core-red"
>${price}<span class="price_vat"> brutto</span></strong
>
</div>
`
: `
<strong class="price"
>${price}<span class="price_vat"> brutto</span>
</strong>
`
}
<div class="product__availability">
${
availability === "enable"
? '<span class="product__available">Dostępny</span>'
: '<span class="product__unavailable">Niedostępny</span>'
}
</div>
</div>
<button
onclick="hot_spot_3(event,this)"
data-buttonsajax="false"
class="to_bsk__btn btn --solid --large"
style="justify-content: flex-start"
data-buttonajaxsize="${size}"
data-buttonajaxid="${id}"
title="Do koszyka"
tabindex="0"
>
<img
src="https://lowepro.com.pl/data/include/cms/Ikonki_bannery_New_Multifoto/cart_2.png?v=1703060656278"
alt="basket_icon"
/>
</button>
</div>
${
maxPrice && omnibusPrice
? `
<span class="omnibus_price"
><span class="omnibus_price__text"
>Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki: </span
><span class="omnibus_price__value">${omnibusPrice}</span></span
>`
: ``
}
</div>
</div>
`;
});
container.innerHTML = tmp_text;
initSlider(container, subNavHandler, objLinkHref);
},
});
};
if (window.innerWidth > 979) {
document.querySelectorAll("ul.navbar-nav > .nav-item").forEach((navItem) => {
const link = navItem.querySelector(".nav-link");
const subNav = navItem.querySelector("ul.navbar-subnav");
const sliderContainer = navItem.querySelector(
".navbar-whiteBackground__recommendationContainer"
);
const loaderContainer = sliderContainer.querySelector(
"#loaded_contant_bm_hotspots"
);
const ul_container = navItem.querySelector("ul");
const linkHref = link.getAttribute("href");
navItem.addEventListener("mouseleave", (e) => {
if (obj[linkHref] && obj[linkHref].isFetched) {
ul_container.style.display = "none";
obj[linkHref].isMouseOver = false;
} else {
obj[linkHref].isMouseOver = false;
}
});
navItem.addEventListener("mouseover", (e) => {
obj[linkHref].isMouseOver = true;
ul_container.style.display = "grid";
if (!obj[linkHref]) {
loaderContainer.style.display = "none";
sliderContainer.remove();
}
if (obj[linkHref] && !obj[linkHref].tmp_fetch) {
const { id, val } = obj[linkHref];
obj[linkHref].tmp_fetch = true;
fetchProducts(sliderContainer, id, val, subNav, obj[linkHref]);
}
navItem.querySelectorAll(".nav-merge > li:not(.empty)").forEach((el) => {
el.addEventListener("mouseover", () => {
navItem.querySelector(
".navbar-whiteBackground__baner"
).style.display = "none";
});
el.addEventListener("mouseleave", () => {
navItem.querySelector(
".navbar-whiteBackground__baner"
).style.display = "block";
});
});
});
});
}

582
xml_xslt.xml Normal file
View File

@@ -0,0 +1,582 @@
<?xml version="1.0" encoding="UTF-8"?><iai:component><iai:componentsdata><cdata-start/>
<iaixsl:variable name="dlmenu_showall">+ <iai:variable vid="Pokaż wszystkie"/></iaixsl:variable>
<iaixsl:variable name="dlmenu_extend">+ <iai:variable vid="Rozwiń"/></iaixsl:variable>
<iaixsl:variable name="dlmenu_hide">- <iai:variable vid="Zwiń"/></iaixsl:variable>
<iaixsl:variable name="gfx_2lvl_show">1</iaixsl:variable>
<iaixsl:variable name="gfx_3lvl_show">1</iaixsl:variable>
<iaixsl:variable name="menu_categories_label"></iaixsl:variable>
<iaixsl:variable name="dlmenu_showmore">1</iaixsl:variable>
<iaixsl:variable name="dlmenu_shownumber">10</iaixsl:variable>
<iaixsl:variable name="current_item"><iaixsl:value-of select="/shop/navigation/current/@ni"/></iaixsl:variable>
<nav id="menu_categories" class="wide">
<div id="holder_for_hotspot_menu" style="display:none !important">
</div>
<iaixsl:if test="$menu_categories_label and not($menu_categories_label = '')">
<h2 class="big_label">
<a href="/categories.php">
<iaixsl:attribute name="title"></iaixsl:attribute>
<iaixsl:value-of select="$menu_categories_label"/>
</a>
</h2>
</iaixsl:if>
<button type="button" class="navbar-toggler">
<i class="icon-reorder"/>
</button>
<div class="navbar-collapse" id="menu_navbar">
<ul class="navbar-nav mx-md-n2">
<iaixsl:for-each select="navigation/item">
<li class="nav-item">
<iaixsl:if test="( (@ni = $current_item) or (item/@ni = $current_item) or (item/item/@ni = $current_item) or (item/item/item/@ni = $current_item) )">
<iaixsl:attribute name="class"><![CDATA[nav-item active]]></iaixsl:attribute>
</iaixsl:if>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;a href="]]></iaixsl:text>
<iaixsl:value-of select="@link"/><iaixsl:text disable-output-escaping="yes"><![CDATA[" target="]]></iaixsl:text><iaixsl:value-of select="@target"/>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" title="]]></iaixsl:text><iaixsl:value-of select="@name"/>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;span]]></iaixsl:text>
<iaixsl:text disable-output-escaping="yes"><![CDATA[ title="]]></iaixsl:text>
<iaixsl:value-of select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" class="nav-link]]></iaixsl:text>
<iaixsl:if test="(@ni = /shop/navigation/current/@ni) or (item//@ni = /shop/navigation/current/@ni)">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ active]]></iaixsl:text>
</iaixsl:if>
<iaixsl:if test="@reload and @reload = 'y'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ noevent]]></iaixsl:text>
</iaixsl:if>
<iaixsl:if test="(@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ nav-gfx]]></iaixsl:text>
</iaixsl:if>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" &gt;]]></iaixsl:text>
<iaixsl:choose>
<iaixsl:when test="(@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))">
<img id="gfx_inactive_img" class="d-none d-md-block">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_inactive_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src]]></iaixsl:attribute>
<iaixsl:if test="@gfx_inactive_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_inactive_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_inactive_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_inactive_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:if test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<iaixsl:attribute name="data-omo"><iaixsl:choose><iaixsl:when test="@gfx_omo_type = 'img' and @gfx_onmouseover"><![CDATA[img]]></iaixsl:when><iaixsl:otherwise><![CDATA[img_rwd]]></iaixsl:otherwise></iaixsl:choose></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-omo_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-omo_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-omo_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="data-omo_img"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</iaixsl:if>
</img>
<span class="gfx_lvl_1"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
</iaixsl:when>
<iaixsl:when test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<span class="gfx_lvl_1 --omo"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
<img class="gfx_lvl_1 --omo">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src gfx_lvl_1 --omo]]></iaixsl:attribute>
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</img>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:value-of disable-output-escaping="yes" select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/a&gt;]]></iaixsl:text>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/span&gt;]]></iaixsl:text>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:if test="item">
<ul class="navbar-subnav">
<div class="d-none d-md-flex justify-content-between align-items-center navbar-subnav__topName">
<p class="navbar-subnav__topName_name"><iaixsl:value-of select="@name"/></p>
<iaixsl:if test="@link">
<a class="navbar-subnav__topName_link">
<iaixsl:attribute name="href"><iaixsl:value-of select="@link" /></iaixsl:attribute>
<iai:variable vid="Wszystkie produkty"/>
</a>
</iaixsl:if>
</div>
<iaixsl:for-each select="item">
<li class="nav-item">
<iaixsl:if test="((count(item) = 0) and $dlmenu_showmore)">
<iaixsl:attribute name="class"><![CDATA[nav-item empty]]></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="( (@ni = $current_item) or (item/@ni = $current_item) or (item/item/@ni = $current_item) or (item/item/item/@ni = $current_item) )">
<iaixsl:attribute name="class"><![CDATA[nav-item active]]></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="( (@ni = $current_item) or (item/@ni = $current_item) or (item/item/@ni = $current_item) or (item/item/item/@ni = $current_item) ) and ((count(item) = 0) and $dlmenu_showmore)">
<iaixsl:attribute name="class"><![CDATA[nav-item active empty]]></iaixsl:attribute>
</iaixsl:if>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;a href="]]></iaixsl:text>
<iaixsl:value-of select="@link"/><iaixsl:text disable-output-escaping="yes"><![CDATA[" target="]]></iaixsl:text><iaixsl:value-of select="@target"/>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" title="]]></iaixsl:text><iaixsl:value-of select="@name"/>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;span]]></iaixsl:text>
<iaixsl:text disable-output-escaping="yes"><![CDATA[ title="]]></iaixsl:text>
<iaixsl:value-of select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" class="nav-link]]></iaixsl:text>
<iaixsl:choose>
<iaixsl:when test="((@ni = /shop/navigation/current/@ni) or (item//@ni = /shop/navigation/current/@ni)) and (((@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))) and $gfx_2lvl_show)">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ nav-gfx active]]></iaixsl:text>
</iaixsl:when>
<iaixsl:when test="(@ni = /shop/navigation/current/@ni) or (item//@ni = /shop/navigation/current/@ni)">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ active]]></iaixsl:text>
</iaixsl:when>
<iaixsl:when test="((@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))) and $gfx_2lvl_show">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ nav-gfx]]></iaixsl:text>
</iaixsl:when>
</iaixsl:choose>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" &gt;]]></iaixsl:text>
<iaixsl:choose>
<iaixsl:when test="((@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))) and $gfx_2lvl_show">
<img class="gfx_lvl_2">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_inactive_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src gfx_lvl_2]]></iaixsl:attribute>
<iaixsl:if test="@gfx_inactive_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_inactive_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_inactive_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_inactive_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:if test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<iaixsl:attribute name="data-omo"><iaixsl:choose><iaixsl:when test="@gfx_omo_type = 'img' and @gfx_onmouseover"><![CDATA[img]]></iaixsl:when><iaixsl:otherwise><![CDATA[img_rwd]]></iaixsl:otherwise></iaixsl:choose></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-omo_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-omo_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-omo_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="data-omo_img"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</iaixsl:if>
</img>
<span class="gfx_lvl_2 d-none"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
</iaixsl:when>
<iaixsl:when test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<span class="gfx_lvl_2 --omo"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
<img class="gfx_lvl_2 --omo">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src gfx_lvl_2 --omo]]></iaixsl:attribute>
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</img>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:value-of disable-output-escaping="yes" select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/a&gt;]]></iaixsl:text>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/span&gt;]]></iaixsl:text>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:if test="item">
<ul class="navbar-subsubnav">
<iaixsl:if test="((count(item) &gt; $dlmenu_shownumber) and $dlmenu_showmore)">
<iaixsl:attribute name="class"><![CDATA[navbar-subsubnav more]]></iaixsl:attribute>
</iaixsl:if>
<div class="navbar-subsubnav__itemContainer">
<iaixsl:for-each select="item">
<li class="nav-item">
<iaixsl:if test="( (@ni = $current_item) or (item/@ni = $current_item) or (item/item/@ni = $current_item) or (item/item/item/@ni = $current_item) )">
<iaixsl:attribute name="class"><![CDATA[nav-item active]]></iaixsl:attribute>
</iaixsl:if>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;a href="]]></iaixsl:text>
<iaixsl:value-of select="@link"/><iaixsl:text disable-output-escaping="yes"><![CDATA[" target="]]></iaixsl:text><iaixsl:value-of select="@target"/>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" title="]]></iaixsl:text><iaixsl:value-of select="@name"/>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;span]]></iaixsl:text>
<iaixsl:text disable-output-escaping="yes"><![CDATA[ title="]]></iaixsl:text>
<iaixsl:value-of select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" class="nav-link]]></iaixsl:text>
<iaixsl:if test="(@ni = /shop/navigation/current/@ni) or (item//@ni = /shop/navigation/current/@ni)">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ active]]></iaixsl:text>
</iaixsl:if>
<iaixsl:if test="((@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))) and $gfx_3lvl_show">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ nav-gfx]]></iaixsl:text>
</iaixsl:if>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" &gt;]]></iaixsl:text>
<iaixsl:choose>
<iaixsl:when test="((@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))) and $gfx_3lvl_show">
<img class="gfx_lvl_3">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_inactive_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src gfx_lvl_3]]></iaixsl:attribute>
<iaixsl:if test="@gfx_inactive_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_inactive_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_inactive_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_inactive_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:if test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<iaixsl:attribute name="data-omo"><iaixsl:choose><iaixsl:when test="@gfx_omo_type = 'img' and @gfx_onmouseover"><![CDATA[img]]></iaixsl:when><iaixsl:otherwise><![CDATA[img_rwd]]></iaixsl:otherwise></iaixsl:choose></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-omo_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-omo_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-omo_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="data-omo_img"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</iaixsl:if>
</img>
<span class="gfx_lvl_3 d-none"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
</iaixsl:when>
<iaixsl:when test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<span class="gfx_lvl_3 --omo"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
<img class="gfx_lvl_3 --omo">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src gfx_lvl_3 --omo]]></iaixsl:attribute>
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</img>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:value-of disable-output-escaping="yes" select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/a&gt;]]></iaixsl:text>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/span&gt;]]></iaixsl:text>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:if test="item">
<ul class="navbar-subsubsubnav">
<iaixsl:if test="((count(item) &gt; $dlmenu_shownumber) and $dlmenu_showmore)">
<iaixsl:attribute name="class"><![CDATA[navbar-subsubsubnav more]]></iaixsl:attribute>
</iaixsl:if>
<iaixsl:for-each select="item">
<li class="nav-item">
<iaixsl:if test="( (@ni = $current_item) or (item/@ni = $current_item) or (item/item/@ni = $current_item) or (item/item/item/@ni = $current_item) )">
<iaixsl:attribute name="class"><![CDATA[nav-item active]]></iaixsl:attribute>
</iaixsl:if>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;a href="]]></iaixsl:text>
<iaixsl:value-of select="@link"/><iaixsl:text disable-output-escaping="yes"><![CDATA[" target="]]></iaixsl:text><iaixsl:value-of select="@target"/>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" title="]]></iaixsl:text><iaixsl:value-of select="@name"/>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;span]]></iaixsl:text>
<iaixsl:text disable-output-escaping="yes"><![CDATA[ title="]]></iaixsl:text>
<iaixsl:value-of select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" class="nav-link]]></iaixsl:text>
<iaixsl:if test="(@ni = /shop/navigation/current/@ni) or (item//@ni = /shop/navigation/current/@ni)">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ active]]></iaixsl:text>
</iaixsl:if>
<iaixsl:if test="((@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))) and $gfx_3lvl_show">
<iaixsl:text disable-output-escaping="yes"><![CDATA[ nav-gfx]]></iaixsl:text>
</iaixsl:if>
<iaixsl:text disable-output-escaping="yes"><![CDATA[" &gt;]]></iaixsl:text>
<iaixsl:choose>
<iaixsl:when test="((@gfx_inactive_type = 'img' and @gfx) or (@gfx_inactive_type = 'img_rwd' and (@gfx_inactive_desktop or @gfx_inactive_tablet or @gfx_inactive_mobile))) and $gfx_3lvl_show">
<img class="gfx_lvl_3">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_inactive_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src gfx_lvl_3]]></iaixsl:attribute>
<iaixsl:if test="@gfx_inactive_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_inactive_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_inactive_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_inactive_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_inactive_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:if test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<iaixsl:attribute name="data-omo"><iaixsl:choose><iaixsl:when test="@gfx_omo_type = 'img' and @gfx_onmouseover"><![CDATA[img]]></iaixsl:when><iaixsl:otherwise><![CDATA[img_rwd]]></iaixsl:otherwise></iaixsl:choose></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-omo_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-omo_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-omo_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="data-omo_img"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</iaixsl:if>
</img>
<span class="gfx_lvl_3 d-none"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
</iaixsl:when>
<iaixsl:when test="(@gfx_omo_type = 'img' and @gfx_onmouseover) or (@gfx_omo_type = 'img_rwd' and (@gfx_omo_desktop or @gfx_omo_tablet or @gfx_omo_mobile))">
<span class="gfx_lvl_3 --omo"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></span>
<img class="gfx_lvl_3 --omo">
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="@name"/></iaixsl:attribute>
<iaixsl:choose>
<iaixsl:when test="@gfx_omo_type = 'img_rwd'">
<iaixsl:attribute name="class"><![CDATA[rwd-src gfx_lvl_3 --omo]]></iaixsl:attribute>
<iaixsl:if test="@gfx_omo_desktop">
<iaixsl:attribute name="data-src_desktop"><iaixsl:value-of select="@gfx_omo_desktop"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_tablet">
<iaixsl:attribute name="data-src_tablet"><iaixsl:value-of select="@gfx_omo_tablet"/></iaixsl:attribute>
</iaixsl:if>
<iaixsl:if test="@gfx_omo_mobile">
<iaixsl:attribute name="data-src_mobile"><iaixsl:value-of select="@gfx_omo_mobile"/></iaixsl:attribute>
</iaixsl:if>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx_onmouseover"/></iaixsl:attribute>
</iaixsl:otherwise>
</iaixsl:choose>
</img>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:value-of disable-output-escaping="yes" select="@name"/>
</iaixsl:otherwise>
</iaixsl:choose>
<iaixsl:choose>
<iaixsl:when test="@link and @link != '##'">
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/a&gt;]]></iaixsl:text>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:text disable-output-escaping="yes"><![CDATA[&lt;/span&gt;]]></iaixsl:text>
</iaixsl:otherwise>
</iaixsl:choose>
</li>
</iaixsl:for-each>
<iaixsl:if test="(count(item) &gt; 1) and @link and @display_all = 'y' and $dlmenu_showall">
<li class="nav-item --all">
<a class="nav-link">
<iaixsl:attribute name="href">
<iaixsl:choose>
<iaixsl:when test="@display_all_link">
<iaixsl:value-of select="@display_all_link"/>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:value-of select="@link"/>
</iaixsl:otherwise>
</iaixsl:choose>
</iaixsl:attribute>
<iaixsl:value-of select="$dlmenu_showall"/>
</a>
</li>
</iaixsl:if>
</ul>
</iaixsl:if>
</li>
</iaixsl:for-each>
</div>
<iaixsl:if test="@gfx_active">
<div class="navbar-subsbunav__baner">
<img>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx_active"/></iaixsl:attribute>
</img>
</div>
</iaixsl:if>
<iaixsl:if test="(count(item) &gt; 1) and @link and @display_all = 'y' and $dlmenu_showall">
<li class="nav-item --all">
<a class="nav-link">
<iaixsl:attribute name="href">
<iaixsl:choose>
<iaixsl:when test="@display_all_link">
<iaixsl:value-of select="@display_all_link"/>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:value-of select="@link"/>
</iaixsl:otherwise>
</iaixsl:choose>
</iaixsl:attribute>
<iaixsl:value-of select="$dlmenu_showall"/>
</a>
</li>
</iaixsl:if>
</ul>
</iaixsl:if>
</li>
</iaixsl:for-each>
<div class="navbar__whiteBackground">
<div class="navbar-whiteBackground__recommendationContainer">
<div id='loaded_contant_bm_hotspots'></div>
</div>
<iaixsl:if test="@gfx_active">
<div class="navbar-whiteBackground__baner">
<img>
<iaixsl:attribute name="src"><iaixsl:value-of select="@gfx_active"/></iaixsl:attribute>
</img>
</div>
</iaixsl:if>
</div>
<iaixsl:if test="(count(item) &gt; 1) and @link and @display_all = 'y' and $dlmenu_showall">
<li class="nav-item --all empty">
<a class="nav-link">
<iaixsl:attribute name="href">
<iaixsl:choose>
<iaixsl:when test="@display_all_link">
<iaixsl:value-of select="@display_all_link"/>
</iaixsl:when>
<iaixsl:otherwise>
<iaixsl:value-of select="@link"/>
</iaixsl:otherwise>
</iaixsl:choose>
</iaixsl:attribute>
<iaixsl:value-of select="$dlmenu_showall"/>
</a>
</li>
</iaixsl:if>
</ul>
</iaixsl:if>
</li>
</iaixsl:for-each>
</ul>
</div>
</nav>
<iaixsl:if test="/shop/page/navigation/item/@gfx_active_desktop"> </iaixsl:if>
<cdata-end/></iai:componentsdata></iai:component>