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

Wylaczenie dodawania do ulubionych w modalu

Browse Source
This commit is contained in:
pawel.gaca
2025-12-12 12:17:52 +01:00
parent 03a0ab0029
commit 91a3cdcd06
4 changed files with 155 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -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 ######

104
klasa.js
View File

@@ -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 += `
<div class="product hotspot__product swiper-slide d-flex flex-column ${prod.price.price[this.priceType].value === 0 ? "--phone" : ""}" data-id="${prod.id}">
<div class="product hotspot__product swiper-slide d-flex flex-column ${prod.price.price[this.priceType].value === 0 ? "--phone" : ""}" data-id="${prod.id}" data-type="${prod.type}">
${this.markupProductInnerHTML(prod)}
</div>`;
@@ -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 `<span
data-href="#add_favorite"
@@ -693,7 +686,7 @@ class IdmHotspot{
}
markupVersions(prod){
if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return "";
if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length < 2 ) return "";
// let MAX_VERSION_AMOUNT = 5;
// if(app_shop.vars.view > 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 = `<a class="btn --solid --medium add_to_basket__link" href="${prod.href}">Zobacz produkt</a>`;
if(prod.type !== "product" || prodTotalAmount === 0) markup = `<a class="btn --solid --medium add_to_basket__link" href="${prod.href}">Zobacz produkt</a>`;
else if(this.options.addToBasket === "range") // +-
markup = `<form class="add_to_basket --range" action="/basketchange.php" type="post">
<input name="mode" type="hidden" value="1">
@@ -901,25 +897,32 @@ class IdmHotspot{
}
markupSize(prod){
return `<input name="size" type="hidden" value="${prod.sizes[0].id}">`;
// if(!this.options?.selectSize || prod.sizes.length === 1) return `<input name="size" type="hidden" value="${prod.sizes[0].id}">`;
// return `<input name="size" type="hidden" value="${prod.sizes[0].id}">`;
if(!this.options?.selectSize || prod.sizes.length === 1) return `<input name="size" type="hidden" value="${prod.sizes[0].id}">`;
// const sizesName = `${this.id}-${prod.id}`;
// return `
// <div class="product__select_sizes">
// ${prod.sizes.reduce((acc, val)=>{
// const inputId = `${sizesName}-${val.id}`;
const sizesName = `${this.id}-${prod.id}`;
// return acc + `
// <label class="product__size_select" for="${sizesName}">
// <input type="radio" name="${sizesName}" id="${sizesName}"/>
// <span>${val.name}</span>
// </label>
// `
// }, "")}
// </div>
// `;
let selectedDefault = false;
return `
<input name="size" type="hidden" value="${prod.sizes[0].id}">
<div class="product__select_sizes">
${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 + `
<label class="product__size_select" for="${inputId}">
<input type="radio" name="${sizesName}" id="${inputId}" ${isSelected ? "checked" : ""} ${val?.amount === 0 ? "disabled" : ""} data-value="${val.id}"/>
<span>${val.name}</span>
</label>
`
}, "")}
</div>
`;
}
markupHotspotContainer(){
@@ -973,6 +976,7 @@ class IdmHotspot{
return `
<div class="idm_hotspot__skeleton_product">
<div class="idm_hotspot__skeleton_img idm-loading"></div>
${this.options.showOpinions ? `<div class="idm_hotspot__skeleton_opinions idm-loading"></div>` : ""}
<div class="idm_hotspot__skeleton_name idm-loading"></div>
<div class="idm_hotspot__skeleton_price idm-loading"></div>
${this.options.addToBasket ? `<div class="idm_hotspot__skeleton_btn idm-loading"></div>` : ""}
@@ -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);
}
/**

24
ramka.txt
View File

@@ -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
- 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ć

65
style.less
View File

@@ -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{