288 lines
8.2 KiB
JavaScript
288 lines
8.2 KiB
JavaScript
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";
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|