From dbb87f83569f3b33b5d0378d91de88236ab5a960 Mon Sep 17 00:00:00 2001 From: "pawel.gaca" Date: Thu, 13 Nov 2025 15:21:46 +0100 Subject: [PATCH] =?UTF-8?q?Dodawanie=20do=20por=C3=B3wnania?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- klasa.js | 105 +++++++++++++++++++++++++++++++++++++++++++---------- ramka.txt | 2 +- style.less | 29 ++++++++++++++- 3 files changed, 115 insertions(+), 21 deletions(-) diff --git a/klasa.js b/klasa.js index 7c4b5b3..951f310 100644 --- a/klasa.js +++ b/klasa.js @@ -8,6 +8,8 @@ const idmHotspotTextObject = { []: , []: , []: , + []: , + []: , []: , []: , []: , @@ -410,6 +412,7 @@ class IdmHotspot{ lazy: true, addToBasket: true, // true, false, "range" addToFavorites: false, + addToCompare: false, swiper: true, callbackFn: ()=>{}, swiperScrollbar: false, @@ -448,6 +451,8 @@ class IdmHotspot{ this.handleAddToBasket = this.handleAddToBasket.bind(this); this.handleQuantityButtonClick = this.handleQuantityButtonClick.bind(this); this.handleQuantityInputChange = this.handleQuantityInputChange.bind(this); + this.handleAddToCompare = this.handleAddToCompare.bind(this); + this.handleAddToFav = this.handleAddToFav.bind(this); this.init(); } @@ -540,7 +545,7 @@ class IdmHotspot{
- ${this.markupFavorite(prod)} + ${this.markupAdditional(prod)}
${this.markupImage(prod)} @@ -560,6 +565,25 @@ class IdmHotspot{ return singleMarkup; } + markupAdditional(prod){ + return ` + ${this.markupCompare(prod)} + ${this.markupFavorite(prod)} + `; + } + + markupCompare(prod){ + if(!this.options?.addToCompare) return ""; + + return `
+ +
` + } + markupFavorite(prod){ if(!this.options?.addToFavorites || typeof this.addToFavFn !== "function") return ""; @@ -567,7 +591,7 @@ class IdmHotspot{ data-href="#add_favorite" class="product__favorite" role="button" tabindex="0" data-product-id="${prod.id}" - data-product-size="${prod.sizes?.[0]?.id || 'uniw'}"> + data-product-size="${prod.sizes?.[0]?.id || 'uniw'}" aria-label="${idmHotspotTextObject[]}"> `; } @@ -792,6 +816,56 @@ class IdmHotspot{ } } + /** + * Obsługuje dodanie produktu do Porównania + */ + async handleAddToCompare(e){ + const compareBtnEl = e.target.closest(".idm-products-banner__compare-btn"); + const compareId = compareBtnEl?.dataset?.compareId; + if (!compareBtnEl || !compareId) return; + e.preventDefault(); + try { + compareBtnEl.classList.add("--loading"); + const compareUrl = `/${app_shop?.vars?.language?.symbol || "pl"}/settings.html?comparers=add&product=${compareId}`; + + const res = await fetch(compareUrl); + console.log(res); + if (!res.ok) throw new Error(`${}`); + + compareBtnEl.classList.add("--success"); + + const compareContainerQuery = "#menu_compare_product"; + if (document.querySelector(compareContainerQuery)) { + app_shop.fn.load( + window.location.pathname, + [[compareContainerQuery, compareContainerQuery]], + function () {}, + "?set_render=content" + ); + } + + setTimeout(() => { + compareBtnEl.classList.remove("--success"); + }, 2000); + } catch (err) { + console.error(err); + Alertek.Error(`${}`); + } finally { + compareBtnEl.classList.remove("--loading"); + } + } + + /** + * Obsługuje dodanie produktu do Listy zakupowej + */ + handleAddToFav(e){ + const favEl = e.target.closest(".product__favorite"); + + if(!favEl) return; + + this.addToFavFn([[favEl.dataset.productId, favEl.dataset.productSize]]); + } + /** * Obsługuje kliknięcia w przyciski +/− przy wyborze ilości. */ @@ -853,11 +927,6 @@ class IdmHotspot{ observer.observe(this.hotspotEl); } - - handleAddToFav(){ - - } - // ======================================================== // FUNKCJE POMOCNICZE // ======================================================== @@ -1017,20 +1086,18 @@ class IdmHotspot{ } } // Tooltip - if(this.options?.omnibusTooltip){ - const tooltipEl = prodEl.querySelector(".idm_tooltip"); + // if(this.options?.omnibusTooltip){ + // const tooltipEl = prodEl.querySelector(".idm_tooltip"); - tooltipEl.addEventListener("click", ()=>{ - this.showTooltip(tooltipEl); - }) - } + // tooltipEl.addEventListener("click", ()=>{ + // this.showTooltip(tooltipEl); + // }) + // } + // Add to Favorites - if(this.options?.addToFavorites && typeof this.addToFavFn === "function"){ - const favEl = prodEl.querySelector(".product__favorite") - if(favEl) favEl.addEventListener("click", ()=>{ - this.addToFavFn([[favEl.dataset.productId, favEl.dataset.productSize]]); - }) - } + 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); } /** diff --git a/ramka.txt b/ramka.txt index 44df444..6aefac8 100644 --- a/ramka.txt +++ b/ramka.txt @@ -1,7 +1,7 @@ 1. Ramka - wybór rozmiaru/wersji?? -- ulubione? + porównywarka? (wymagają zmiany w komponencie idosella) +- porównywarka? (wymagają zmiany w komponencie idosella) - zakres cen????????????? - Wybór kolorystyczny??? diff --git a/style.less b/style.less index d8830b1..84a1e13 100644 --- a/style.less +++ b/style.less @@ -139,10 +139,37 @@ } .product__favorite{ display: block; + color: #111; &::before{ content: '\E86D'; font-family: FontAwesome; - font-size: 2.6rem; + // font-size: 2.6rem; + font-size: 3rem; height: 2.9rem; } + &:hover{ + opacity: 0.6; + } +} + +.idm-products-banner__compare-btn{ + .idm-products-banner__compare-icon{ + height: 100%; + } + &.--success { + svg { + display: none; + } + &::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M10.0516 18.5L4.35156 12.8L5.77656 11.375L10.0516 15.65L19.2266 6.475L20.6516 7.9L10.0516 18.5Z' fill='%23009263'/%3E%3C/svg%3E"); + width: 3rem; + height: 3rem; + } + } + + &.--loading:not(.--success) { } + + &:not(.--success):hover { + opacity: 0.6; + } } \ No newline at end of file