diff --git a/README.md b/README.md index 1946dda..fc8383a 100644 --- a/README.md +++ b/README.md @@ -96,11 +96,17 @@ new IdmHotspot({ * @property {string} [source.hotspotType] - Typ hotspotu (np. "promotion"). * @property {number[]} [source.productsId] - Tablica ID produktów. * @property {number} [source.productsMenu] - Identyfikator menu produktów. + * @property {number[]} [source.producersId] - Tablica ID producentów. + * @property {number[]} [source.seriesId] - Tablica ID serii. + * @property {number[]} [source.parametersId] - Tablica ID grup parametrów. + * @property {object} [source.priceRange] - Obiekt z ceną od do. + * @property {number} [source.priceRange.from] - cena od + * @property {number} [source.priceRange.to] - cena do - * @property {object} query - Dane zapytania, nadpisują source (DEV). - * @property {string} query.string - Zapytanie w formacie GraphQL. - * @property {Function} query.graphFn - Funkcja do pobierania danych. + * @property {object} [query] - Dane zapytania, nadpisują source (DEV). + * @property {string} [query.string] - Zapytanie w formacie GraphQL. + * @property {Function} [query.graphFn] - Funkcja do pobierania danych. * @property {object} options - Ustawienia dla hotspotu (required). @@ -144,9 +150,6 @@ new IdmHotspot({ - ``` Żeby zmienić resztę ustawień trzeba zmieniać defaultowe ustawienia! @@ -159,9 +162,14 @@ new IdmHotspot({ * @property {string} id - Identyfikator elementu (np. "idmBlogHotspot1"). * @property {string} class - Klasy CSS używane do stylowania. * - * @attribute {string} data-products-id - Lista ID produktów (rozdzielona przecinkami). - * @attribute {number} data-products-menu - Identyfikator menu produktów. * @attribute {string} data-hotspots-type - Typ hotspotu (np. "promotion"). + * @attribute {number[]} data-products-id - Lista ID produktów (rozdzielona przecinkami). + * @attribute {number} data-products-menu - Identyfikator menu produktów. + * @attribute {number[]} data-producers-id - Lista id producentów (rozdzielona przecinkami). + * @attribute {number[]} data-series-id - Lista id serii (rozdzielona przecinkami). + * @attribute {number[]} data-parameters-id - Lista id grup parametrów (rozdzielona przecinkami). + * @attribute {number} data-price-from - "cena od" produktów w hotspocie + * @attribute {number} data-price-to - "cena do" produktów w hotspocie * @attribute {boolean} data-lazy - Czy sekcja ma być ładowana w trybie lazy. * * @example diff --git a/klasa.js b/klasa.js index a3822d7..304e10e 100644 --- a/klasa.js +++ b/klasa.js @@ -509,26 +509,44 @@ class IdmHotspot{ /** * Przygotowuje funkcję i zapytanie GraphQL w zależności od typu danych. */ - getQueryData({productsID, productsMenu, hotspotsType}){ + getQueryData(){ let graphFn, query; - if(productsID){ - graphFn = IDM_PRODUCTS_GQL; - query = `searchInput: {productsId: [${productsID}]}`; - }else if(productsMenu){ - graphFn = IDM_PRODUCTS_GQL; - query = `searchInput: {navigation: ${productsMenu}}`; - }else if(hotspotsType){ + let queryMarkup = ""; + + if(this.source?.hotspotsType){ graphFn = IDM_HOTSPOTS_GQL; - query = `searchInput: {hotspot: ${hotspotsType}, limit: 16}`; + queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: 16`; + }else{ + graphFn = IDM_PRODUCTS_GQL; + if(this.source?.productsId){ + queryMarkup += `productsId: [${this.source.productsId}],`; + } + if(this.source?.productsMenu){ + queryMarkup += `navigation: ${this.source.productsMenu},`; + } + if(this.source?.producersId){ + queryMarkup += `producers: [${this.source.producersId}],`; + } + if(this.source?.seriesId){ + queryMarkup += `series: [${this.source.seriesId}],`; + } + if(this.source?.parametersId){ + queryMarkup += `parameters: [${this.source.parametersId.reduce((acc,val)=> acc + `{id: ${val}}`,"")}],`; + } + if(this.source?.priceRange){ + queryMarkup += `priceRange: {from: ${+this.source.priceRange?.from || 0}, to: ${+this.source.priceRange?.to || 0}},`; + } } + query = `searchInput: { ${queryMarkup} }` + return [graphFn, query]; } /** * Ustawia dane zapytania GraphQL wewnątrz instancji. */ - setQueryData(queryObj){ - const [graphFn, queryString] = this.getQueryData(queryObj); + setQueryData(){ + const [graphFn, queryString] = this.getQueryData(); this.query.graphFn = graphFn; this.query.string = queryString; } @@ -836,17 +854,20 @@ class IdmHotspot{ ${this.title} ` : ""} -
-
- -
-
-
-
-
+ ${this.markupHotspotSwiperContainer()} `; } + markupHotspotSwiperContainer(productsHTML=""){ + return `
+
+ ${productsHTML} +
+
+
+
+
`; + } // ======================================================== // HANDLERY ZDARZEŃ @@ -1143,11 +1164,7 @@ class IdmHotspot{ this.initExternalFunctions(); try{ if(!this.products){ - if(!this?.query?.graphFn || !this?.query?.string) this.setQueryData({ - productsID: this?.source?.productsId, - productsMenu: this?.source?.productsMenu, - hotspotsType: this?.source?.hotspotsType - }); + if(!this?.query?.graphFn || !this?.query?.string) this.setQueryData(); // pobranie danych o produktach await this.getHotspotData(); @@ -1156,7 +1173,15 @@ class IdmHotspot{ // Wstawienie markupa na strone - this.hotspotEl.querySelector(".products.hotspot__products")?.insertAdjacentHTML("beforeend", this.markup()); + if(this.hotspotEl.querySelector(".products.hotspot__products")) this.hotspotEl.querySelector(".products.hotspot__products").insertAdjacentHTML("beforeend", this.markup()); + else if(this.hotspotEl.querySelector(".hotspot")){ + this.hotspotEl.querySelector(".hotspot")?.insertAdjacentHTML("beforeend", this.markupHotspotSwiperContainer(this.markup())); + } + else{ + throw new Error("Nie udało się wstawić produktów! Zła struktura HTML") + } + + this.hotspotEl.classList.remove("idm-loading"); // init swiper + add to basket @@ -1431,14 +1456,26 @@ document.addEventListener("DOMContentLoaded", ()=>{ // new IdmHotspot({ // id: "idmTestHotspot1", // title: "tescik", +// products: [] // Tablica produktów // placement: { // selector: "#content", // insert: "beforeend", // }, // source: { -// productsMenu: 1649 +// productsMenu: 1649, +// producersId: [], +// seriesId: [], +// parametersId: [], +// priceRange: { +// from: 0, +// to: 150, +// } // } -// products: [] // Tablica produktów +// options: { +// lazy: true, +// addToBasket: "range", +// swiper: true, +// } // }); // { // id: "idmMainHotspot2", @@ -1462,10 +1499,19 @@ async function idmPrepareHotspotObject(selectedContainerEl){ selectedContainerEl.classList.add("--init"); const source = {}; - if(selectedContainerEl?.dataset?.productsId) source.productsId = selectedContainerEl?.dataset?.productsId.split(","); - else if(selectedContainerEl?.dataset?.hotspotsType) source.hotspotsType = selectedContainerEl?.dataset?.hotspotsType; - else if(selectedContainerEl?.dataset?.productsMenu) source.productsMenu = selectedContainerEl?.dataset?.productsMenu; - else{ + + if(selectedContainerEl.dataset?.hotspotsType) source.hotspotsType = selectedContainerEl.dataset.hotspotsType; + else { + if(selectedContainerEl.dataset?.productsId) source.productsId = selectedContainerEl.dataset.productsId.split(","); + if(selectedContainerEl.dataset?.productsMenu) source.productsMenu = selectedContainerEl.dataset.productsMenu; + if(selectedContainerEl.dataset?.producersId) source.producersId = selectedContainerEl.dataset.producersId; + if(selectedContainerEl.dataset?.seriesId) source.seriesId = selectedContainerEl.dataset.seriesId; + if(selectedContainerEl.dataset?.parametersId) source.seriesId = selectedContainerEl.dataset.parametersId; + if(selectedContainerEl.dataset?.priceFrom && selectedContainerEl.dataset?.priceTo) source.priceRange = {from: +selectedContainerEl.dataset.priceFrom, to: +selectedContainerEl.dataset.priceTo}; + } + + + if(Object.keys(source).length === 0){ console.error(); selectedContainerEl?.remove(); return; diff --git a/ramka.txt b/ramka.txt index 19adc88..9f87225 100644 --- a/ramka.txt +++ b/ramka.txt @@ -7,7 +7,6 @@ wersja max 5 zdjęć i później + może???? - Wybór kolorystyczny??? - AAAAA - banner na hotspocie - stary szablon -- cena za kg - blokowanie dodawania do koszyka jeśli ilość jest maksymalna - informacje o producencie albo serri gdzieś nad produktem - czy zapisywać wszystkie hotspoty do jakiegoś app_shop.fn.idmHotspots = {"#idmMainHotspot1": {}} diff --git a/style.less b/style.less index 274e0e2..1b99d7f 100644 --- a/style.less +++ b/style.less @@ -1,7 +1,3 @@ -.idm__hotspot .btn.add_to_basket__link{ - margin-top: 0; -} - .idm__hotspot .add_to_basket{ display: flex; }