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

Bug fix dla generowania ramek z HTML + dodatkowe source i dataatrybuty dla HTML

Browse Source
This commit is contained in:
pawel.gaca
2025-11-24 12:37:38 +01:00
parent 49ff211062
commit 2d4cb1c44e
4 changed files with 93 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
klasa.js
View File

@@ -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{
<span class="headline"><span class="headline__name" aria-label="${this.title}">${this.title}</span></span>
</h3>
` : ""}
<div class="products__wrapper swiper">
<div class="products hotspot__products swiper-wrapper">
</div>
</div>
<div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
<div class="swiper-button-next --rounded --edge idm-button-next"><i class="icon-angle-right"></i></div>
<div class="swiper-pagination"></div>
${this.markupHotspotSwiperContainer()}
</div>
</section>`;
}
markupHotspotSwiperContainer(productsHTML=""){
return `<div class="products__wrapper swiper">
<div class="products hotspot__products swiper-wrapper">
${productsHTML}
</div>
</div>
<div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
<div class="swiper-button-next --rounded --edge idm-button-next"><i class="icon-angle-right"></i></div>
<div class="swiper-pagination"></div>`;
}
// ========================================================
// 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;