diff --git a/README.md b/README.md index c2c8286..47415fe 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo - Nie znaleziono metody graphql - Najniższa cena - Drugie Zdjęcie +- Wystąpił błąd w trakcie dodawania produktu ### Przykłady UŻYCIA ### ##### Jedna ramka - obiekt ###### diff --git a/klasa.js b/klasa.js index 9285603..5778b5e 100644 --- a/klasa.js +++ b/klasa.js @@ -464,7 +464,7 @@ class IdmHotspot{ addToCompare: false, // WYBÓR - // selectSize: false, + selectSize: false, selectVersion: false, // SWIPER @@ -512,16 +512,9 @@ class IdmHotspot{ this.handleShowSecondImage = this.handleShowSecondImage.bind(this); this.handleHideSecondImage = this.handleHideSecondImage.bind(this); this.handleSelectVersion = this.handleSelectVersion.bind(this); + this.handleSelectSize = this.handleSelectSize.bind(this); this.init(); - - - // WCZYTANIE PONOWNIE DLA KOSZYKA - if(typeof app_shop.fn?.basket?.reloadForm === "function" && this.hotspotEl.closest("#content")){ - app_shop.run(()=>{ - this.init(); - }, "all", "#Basket", true) - } } @@ -632,7 +625,7 @@ class IdmHotspot{ // markup pojedynczego produktu let singleMarkup = ""; singleMarkup += ` -
+
${this.markupProductInnerHTML(prod)}
`; @@ -682,7 +675,7 @@ class IdmHotspot{ } markupFavorite(prod){ - if(!this.options?.addToFavorites || typeof this.addToFavFn !== "function") return ""; + if(!this.options?.addToFavorites || typeof this.addToFavFn !== "function" || this.hotspotEl.closest(".modal")) return ""; return ` 2){ @@ -855,8 +848,11 @@ class IdmHotspot{ let markup = ""; if(!this.options.addToBasket) return markup; + const prodTotalAmount = this.getProdTotalAmount(prod); + // link do produktu jak nie jest to zwykły produkt - if(prod.type !== "product" || prod.sizes[0].amount === 0) markup = `Zobacz produkt`; + + if(prod.type !== "product" || prodTotalAmount === 0) markup = `Zobacz produkt`; else if(this.options.addToBasket === "range") // +- markup = `
@@ -901,25 +897,32 @@ class IdmHotspot{ } markupSize(prod){ - return ``; - // if(!this.options?.selectSize || prod.sizes.length === 1) return ``; + // return ``; + if(!this.options?.selectSize || prod.sizes.length === 1) return ``; - // const sizesName = `${this.id}-${prod.id}`; - // return ` - //
- // ${prod.sizes.reduce((acc, val)=>{ - // const inputId = `${sizesName}-${val.id}`; + const sizesName = `${this.id}-${prod.id}`; - // return acc + ` - // - // ` - // }, "")} - //
- // `; + let selectedDefault = false; + + return ` + +
+ ${prod.sizes.reduce((acc, val, index)=>{ + const inputId = `${sizesName}-${val.id}`; + + const isSelected = !selectedDefault && val?.amount !== 0 ? true : false; + if(isSelected) selectedDefault = true; + + return acc + ` + + ` + }, "")} +
+ `; } markupHotspotContainer(){ @@ -973,6 +976,7 @@ class IdmHotspot{ return `
+ ${this.options.showOpinions ? `
` : ""}
${this.options.addToBasket ? `
` : ""} @@ -1174,6 +1178,18 @@ class IdmHotspot{ this.reloadProduct(prodEl, closestVersion.dataset.productId); } + handleSelectSize(e){ + const inputEl = e.target.closest("input[type='radio']"); + if(!inputEl) return; + + const newValue = inputEl?.dataset?.value; + const hiddenSizeInputEl = e.target.closest("form.add_to_basket")?.querySelector("input[type='hidden'][name='size']"); + + if(!hiddenSizeInputEl || !newValue) return inputEl.checked = false; + + hiddenSizeInputEl.value = newValue; + } + /** * Lazy-load hotspotu – wczytuje dane dopiero, gdy element pojawi się w viewportcie. */ @@ -1289,6 +1305,10 @@ class IdmHotspot{ // FUNKCJE POMOCNICZE // ======================================================== + getProdTotalAmount(prod){ + return prod.sizes.reduce((acc, val) => val === -1 || acc === -1 ? -1 : acc + val, 0); + } + /** * Wyświetla alert o maksymalnej ilości produktu. */ @@ -1739,6 +1759,21 @@ class IdmHotspot{ } } + + afterInitOnce(){ + if(this.initialized) return; + + // WCZYTANIE PONOWNIE DLA KOSZYKA + if(typeof app_shop.fn?.basket?.reloadForm === "function" && this.hotspotEl.closest("#content")){ + app_shop.run(()=>{ + this.init(); + console.log("test", this.hotspotEl) + }, "all", "#Basket", true) + } + + this.initialized = true; + } + initExternalFunctions(){ this.addToFavFn = app_shop.fn?.shoppingList?.addProductToList; } @@ -1748,7 +1783,6 @@ class IdmHotspot{ */ async fillHotspot(){ // Zdefiniowanie funkcji do dodawania do ulubionych - this.initExternalFunctions(); try{ if(!this.products){ if((!this?.query?.graphFn || !this?.query?.string) && !this.source?.link) this.setQueryData(); @@ -1758,9 +1792,13 @@ class IdmHotspot{ if(!this.products) throw new Error(idmHotspotTextObject["Nie znaleziono produktów"]); } + // Skeleton this.hotspotEl.querySelector(".idm_hotspot__skeleton")?.remove(); this.hotspotEl.classList.remove("--hotspot-loading"); + + this.initExternalFunctions(); + // Wstawienie markupa na strone if(this.hotspotEl.querySelector(".products.hotspot__products")) this.hotspotEl.querySelector(".products.hotspot__products").insertAdjacentHTML("beforeend", this.markup()); else if(this.hotspotEl.querySelector(".hotspot")){ @@ -1771,7 +1809,8 @@ class IdmHotspot{ } // init swiper + add to basket - this.afterInit(); + await this.afterInit(); + this.afterInitOnce(); }catch(err){ console.error(idmHotspotTextObject["Wystąpił błąd"], err); this.hotspotEl.remove(); @@ -1837,6 +1876,9 @@ class IdmHotspot{ // Wybór wersji if(this.options?.selectVersion) prodEl.querySelector(".product__versions")?.addEventListener("click", this.handleSelectVersion); + + // Wybór rozmiaru + if(this.options?.selectSize) prodEl.querySelector(".product__select_sizes")?.addEventListener("click", this.handleSelectSize); } /** diff --git a/ramka.txt b/ramka.txt index 923b7da..cc27b85 100644 --- a/ramka.txt +++ b/ramka.txt @@ -1,11 +1,11 @@ 1. Ramka +bugi selectSize + addToBasket="range" + - wybór rozmiaru/wersji?? Wykluczenie powtarzających się wersji wersja max 5 zdjęć i później + może???? -limit dla produktów z linku - - zakres cen????????????? - Wybór kolorystyczny??? - AAAAA - banner na hotspocie @@ -15,9 +15,25 @@ limit dla produktów z linku - czy zapisywać wszystkie hotspoty do jakiegoś app_shop.fn.idmHotspots = {"#idmMainHotspot1": {}} - czy jakoś inteligentnie ucinać niepotrzebne query na podstawie wybranych opcji? chyba za dużo roboty i nie ma sensu - +- dodawanie do koszyka zestawów itp?? - własne klasy Stara ramka - getProductXML=t -- slick \ No newline at end of file +- slick + + + +!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! +BUG Z RAMKAMI HTML jak się używa extends!!!!!! +!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + + +cacheowanie ramek do indexedDB + + + + +kolejny bug jakis zaraz sobie przypomnek + +Dodawanie do ulubionych nie ma jak działać w modalu, daj warunek żeby to wyłączyć \ No newline at end of file diff --git a/style.less b/style.less index db32da0..7cbaf0e 100644 --- a/style.less +++ b/style.less @@ -2,6 +2,7 @@ .idm__hotspot .add_to_basket, .idm__hotspot .add_to_basket__link{ display: flex; justify-content: center; + flex-direction: column; } @media (max-width: 978px){ .idm__hotspot .add_to_basket__button.btn:not(.--error):not(.--success)::before{ @@ -72,26 +73,32 @@ display: flex; flex-wrap: nowrap; overflow: hidden; - height: 50rem; + min-height: 30rem; &_product{ flex-shrink: 0; padding-right: 16px; display: flex; flex-direction: column; - gap: 1rem; } &_img{ aspect-ratio: ~"1 / 1"; - .skeleton(100%, auto, 100%, auto, 8px); + margin-bottom: 2.5rem; + .skeleton(100%, auto, 100%, auto, 5px); + } + &_opinions{ + margin-bottom: 1rem; + .skeleton(75%, 2rem, 75%, 2rem, 0); } &_name{ + margin-bottom: 1.6rem; .skeleton(100%, 4.2rem, 100%, 4.2rem, 0) } &_price{ + margin-bottom: 1.6rem; .skeleton(50%, 2rem, 50%, 2rem, 0) } &_btn{ - .skeleton(100%, 4.6rem, 100%, 4.6rem, 8px) + .skeleton(100%, 4.6rem, 100%, 4.6rem, 5px) } } @@ -385,6 +392,56 @@ } } +/* Rozmiary */ +.product__select_sizes{ + order: 3; + display: flex; + flex-wrap: wrap; + gap: 1rem; + padding: 0.3rem; + background: #fff; + input[type="radio"]{ + display: none; + } + .product__size_select{ + width: 4.5rem; + height: 4.5rem; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + border: 1px solid #ccc; + transition: border 0.2s; + &:hover{ + border-color: #000; + } + &:not(:has(input:checked)){ + cursor: pointer; + } + &:has(input:checked){ + box-shadow: 0 0 0 1px #000; + border-color: #000; + } + } +} + +@media (min-width: 979px){ + .product__select_sizes{ + clip-path: inset(0 0 100% 0); + transition: all 0.2s; + position: absolute; + top: calc(100%); + padding-top: 1rem; + } + .product:hover .product__select_sizes{ + clip-path: inset(0 0 0 0); + } + .idm__hotspot .swiper-wrapper:has(.product:hover .product__select_sizes){ + z-index: 51!important; + } +} + + /* Ogolne */ .idm__hotspot{ .product__name{