FrontendComponents/hotspots
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Drugie zdjęcie na hover

Browse Source
This commit is contained in:
pawel.gaca
2025-11-19 12:42:39 +01:00
parent a1737893f4
commit 6c5f0b17cd
4 changed files with 111 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
klasa.js
View File

@@ -31,6 +31,7 @@ const idmHotspotTextObject = {
[<iai:variable vid="Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"/>]: <iai:variable vid="Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"/>,
[<iai:variable vid="Nie znaleziono kontenera"/>]: <iai:variable vid="Nie znaleziono kontenera"/>,
[<iai:variable vid="Nie znaleziono metody graphql"/>]: <iai:variable vid="Nie znaleziono metody graphql"/>,
[<iai:variable vid="Drugie Zdjęcie"/>]: <iai:variable vid="Drugie Zdjęcie"/>,
};
// STRING
// const idmHotspotTextObject = {
@@ -240,7 +241,18 @@ const IDM_PRODUCT_GQL = (args) => JSON.stringify({
});
// ADD TO BASKET
const IDM_HOTSPOT_ADD_TO_BASKET = (t, e, a) => JSON.stringify({
query: `mutation {\n addProductsToBasket(ProductInput: {id: ${t}, size: "${e}", quantity: ${a}}) {\n status\n results {\n status\n error {\n code\n message\n }\n productCode\n productId\n sizeId\n quantity\n quantityAvailable\n }\n clientDetailsInBasket {\n id\n login\n firstname\n lastname\n participationPartnerProgram\n usesVat\n email\n isWholesaler\n isWholesalerOrder\n clientIdUpc\n }\n }\n }`
query: `mutation {
addProductsToBasket(ProductInput: {id: ${t}, size: "${e}", quantity: ${a}}) {
status
results {
status
error {
code
message
}
}
}
}`
});
/////////////////////////////////////////
// JS
@@ -420,6 +432,7 @@ class IdmHotspot{
// POKAZANIE
showOpinions: false,
showSecondImage: false,
// DODAWANIE
addToBasket: true, // true, false, "range"
@@ -468,6 +481,8 @@ class IdmHotspot{
this.handleQuantityInputChange = this.handleQuantityInputChange.bind(this);
this.handleAddToCompare = this.handleAddToCompare.bind(this);
this.handleAddToFav = this.handleAddToFav.bind(this);
this.handleShowSecondImage = this.handleShowSecondImage.bind(this);
this.handleHideSecondImage = this.handleHideSecondImage.bind(this);
this.init();
}
@@ -619,14 +634,17 @@ class IdmHotspot{
<source media="(min-width: 421px)" type="image/jpeg" srcset="${prod.iconSecond}"/>
<source media="(max-width: 420px)" type="image/webp" srcset="${prod.iconSmall}"/>
<source media="(max-width: 420px)" type="image/jpeg" srcset="${prod.iconSmallSecond}"/>
<img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
<img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}" class="product__image --first">
</picture>`;
else if(prod?.iconSmall) markup += `<picture>
<source media="(min-width: 421px)" srcset="${prod.icon}"/>
<source media="(max-width: 420px)" srcset="${prod.iconSmall}"/>
<img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
<img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}" class="product__image --first">
</picture>`;
else markup += `<img src="${prod.icon}" loading="lazy" alt="${prod.name}">`
else markup += `<img src="${prod.icon}" loading="lazy" alt="${prod.name}" class="product__image --first">`;
if(this.options?.showSecondImage && prod.enclosuresImages?.[1]?.url) markup += `<img loading="lazy" src="${prod.enclosuresImages[1].url}" alt="${prod.name} - ${idmHotspotTextObject["Drugie Zdjęcie"]}" class="product__image --second"/>`;
return markup;
}
@@ -941,6 +959,22 @@ class IdmHotspot{
input.value = current.toFixed(precision);
}
/**
* Obsługuje Pokazywanie zdjęcia na hover
*/
handleShowSecondImage(e){
const prodIconEl = e.target.closest(".product__icon");
if(!prodIconEl) return;
prodIconEl.classList.add("--toggle-icon");
}
handleHideSecondImage(e){
const prodIconEl = e.target.closest(".product__icon");
if(!prodIconEl) return;
prodIconEl.classList.remove("--toggle-icon");
}
/**
* Walidacja zmian ilości w polu input.
*/
@@ -1129,28 +1163,27 @@ class IdmHotspot{
// DODAWANIE DO KOSZYKA
if(this.options?.addToBasket){
const addToBasketEl = prodEl.querySelector("form.add_to_basket");
if(!addToBasketEl) return;
addToBasketEl.addEventListener("submit", this.handleAddToBasket);
addToBasketEl?.addEventListener("submit", this.handleAddToBasket);
// + -
if(this?.options?.addToBasket === "range"){
addToBasketEl.querySelector(".idm-products-banner__qty")?.addEventListener("click",this.handleQuantityButtonClick);
addToBasketEl.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
addToBasketEl?.querySelector(".idm-products-banner__qty")?.addEventListener("click",this.handleQuantityButtonClick);
addToBasketEl?.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
}
}
// Tooltip
// if(this.options?.omnibusTooltip){
// const tooltipEl = prodEl.querySelector(".idm_tooltip");
// tooltipEl.addEventListener("click", ()=>{
// this.showTooltip(tooltipEl);
// })
// }
// Add to Favorites
if(this.options?.addToFavorites && typeof this.addToFavFn === "function") prodEl.querySelector(".product__favorite")?.addEventListener("click", this.handleAddToFav);
// Compare
if(this.options?.addToCompare) prodEl.querySelector(".idm-products-banner__compare-btn")?.addEventListener("click", this.handleAddToCompare);
// Second image on hover
if(this.options?.showSecondImage){
const prodIconEl = prodEl.querySelector(".product__icon");
if(prodIconEl.querySelector(".product__image.--second")){
prodIconEl?.addEventListener("mouseover", this.handleShowSecondImage);
prodIconEl?.addEventListener("mouseleave", this.handleHideSecondImage);
}
}
}
/**