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