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

Poprawa svg ikony compare

Browse Source
This commit is contained in:
pawel.gaca
2025-11-19 14:54:25 +01:00
parent acd1628832
commit 1c3c5e8334
3 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
klasa.js
View File

@@ -619,13 +619,8 @@ class IdmHotspot{
markupCompare(prod){
if(!this.options?.addToCompare) return "";
return `<div class="idm-products-banner__compare-btn" data-compare-id="${prod.id}">
<button class="idm-products-banner__compare-icon" aria-label="${idmHotspotTextObject["Porównaj"]}">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 20 17" fill="none">
<path d="M19.3972 5.76602C19.3889 5.67435 19.3639 5.58268 19.3222 5.49102L16.5639 0.991016C16.5639 0.991016 16.5389 0.966016 16.5306 0.957682C16.4722 0.874349 16.3889 0.799349 16.2972 0.749349C16.1972 0.699349 16.0889 0.666016 16.0056 0.666016H15.9556C15.9556 0.666016 15.9139 0.666016 15.8889 0.666016C15.8472 0.666016 15.7972 0.666016 15.7472 0.682682L4.08056 4.10768C4.08056 4.10768 4.02223 4.13268 4.01389 4.14102C3.98056 4.15768 3.94723 4.17435 3.91389 4.19102C3.83889 4.24102 3.78056 4.29935 3.73889 4.35768L0.938894 8.87435C0.938894 8.87435 0.922228 8.91602 0.913894 8.93268C0.872228 9.01602 0.847228 9.10768 0.838894 9.19935V9.24935C0.788894 10.216 1.12223 11.1493 1.77223 11.866C2.42223 12.5827 3.31389 13.0077 4.29723 13.0577C5.26389 13.0077 6.15556 12.5827 6.81389 11.866C7.46389 11.1493 7.79723 10.216 7.75556 9.25768C7.75556 9.23268 7.75556 9.21602 7.74723 9.19935C7.73889 9.10768 7.71389 9.01602 7.67223 8.93268L5.40556 5.22435L9.39723 4.04935V15.5493H6.56389V16.991H13.6639V15.5493H10.8389V3.62435L14.3472 2.59102L12.5889 5.44102C12.5889 5.44102 12.5722 5.48268 12.5639 5.49935C12.5222 5.58268 12.4972 5.67435 12.4889 5.75768V5.81602C12.4306 6.78268 12.7722 7.71602 13.4222 8.43268C14.0722 9.14935 14.9639 9.57435 15.9472 9.62435C16.9139 9.57435 17.8056 9.14935 18.4639 8.43268C19.1139 7.71602 19.4472 6.78268 19.4056 5.82435V5.76602H19.3972ZM17.8806 6.54935C17.7889 6.96602 17.5639 7.35768 17.2389 7.64935C16.8806 7.97435 16.4222 8.16602 15.9472 8.19102C15.4722 8.15768 15.0139 7.96602 14.6556 7.64935C14.3389 7.35768 14.1139 6.97435 14.0139 6.54935H17.8806ZM14.4972 5.10768L15.9472 2.74935L17.3972 5.10768H14.4972ZM2.84723 8.53268L4.29723 6.17435L5.74723 8.53268H2.84723ZM6.23056 9.97435C6.13056 10.391 5.91389 10.7827 5.58889 11.0743C5.23056 11.3993 4.77223 11.591 4.29723 11.616C3.82223 11.5827 3.36389 11.391 3.00556 11.0743C2.68889 10.7827 2.46389 10.3993 2.36389 9.97435H6.23056Z" fill="#111111"/>
</svg>
</button>
</div>`
return `<button class="idm-products-banner__compare-btn" data-compare-id="${prod.id}" aria-label="${idmHotspotTextObject["Porównaj"]}">
</button>`
}
markupFavorite(prod){
@@ -760,7 +755,7 @@ class IdmHotspot{
markup = `<form class="add_to_basket --range" action="/basketchange.php" type="post">
<input name="mode" type="hidden" value="1">
<input name="product" type="hidden" value="${prod.id}">
<input name="size" type="hidden" value="${prod.sizes[0].id}">
${this.markupSize(prod)}
<div class="idm-products-banner__qty"
data-sell-by="${prod.unit?.sellBy}"
data-precision="${prod.unit?.precision}"
@@ -790,7 +785,7 @@ class IdmHotspot{
<form class="add_to_basket" action="/basketchange.php" type="post">
<input name="mode" type="hidden" value="1">
<input name="product" type="hidden" value="${prod.id}">
<input name="size" type="hidden" value="${prod.sizes[0].id}">
${this.markupSize(prod)}
<input name="number" type="hidden" value="${prod.unit?.sellBy}">
<button type="submit" class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmHotspotTextObject["Dodany"]}" data-error="${idmHotspotTextObject["Wystąpił błąd"]}" data-text="${idmHotspotTextObject["Do koszyka"]}">
<span>${idmHotspotTextObject["Do koszyka"]}</span>
@@ -799,6 +794,28 @@ class IdmHotspot{
return markup;
}
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}">`;
// const sizesName = `${this.id}-${prod.id}`;
// return `
// <div class="product__select_sizes">
// ${prod.sizes.reduce((acc, val)=>{
// const inputId = `${sizesName}-${val.id}`;
// return acc + `
// <label class="product__size_select" for="${sizesName}">
// <input type="radio" name="${sizesName}" id="${sizesName}"/>
// <span>${val.name}</span>
// </label>
// `
// }, "")}
// </div>
// `;
}
markupHotspotContainer(){
return `<section id="${this.id}" class="hotspot__wrapper idm__hotspot --init idm-loading ${this?.classes}">
<div class="hotspot --initialized">

3
ramka.txt
View File

@@ -1,6 +1,7 @@
1. Ramka
- wybór rozmiaru/wersji??
wersja max 5 zdjęć i później + może????
- zakres cen?????????????
- Wybór kolorystyczny???
@@ -10,7 +11,7 @@
- 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": {}}
- czy jakoś inteligentnie ucinać niepotrzebne query na podstawie wybranych opcji? chyba za dużo roboty i nie ma sensu
- własne klasy

14
style.less
View File

@@ -157,17 +157,17 @@
}
/* COMPARE */
.idm-products-banner__compare-btn{
.idm-products-banner__compare-icon{
height: 100%;
// .idm-products-banner__compare-icon{
// height: 100%;
// }
&::before{
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 20 17' fill='none'%3E%3Cpath d='M19.3972 5.76602C19.3889 5.67435 19.3639 5.58268 19.3222 5.49102L16.5639 0.991016C16.5639 0.991016 16.5389 0.966016 16.5306 0.957682C16.4722 0.874349 16.3889 0.799349 16.2972 0.749349C16.1972 0.699349 16.0889 0.666016 16.0056 0.666016H15.9556C15.9556 0.666016 15.9139 0.666016 15.8889 0.666016C15.8472 0.666016 15.7972 0.666016 15.7472 0.682682L4.08056 4.10768C4.08056 4.10768 4.02223 4.13268 4.01389 4.14102C3.98056 4.15768 3.94723 4.17435 3.91389 4.19102C3.83889 4.24102 3.78056 4.29935 3.73889 4.35768L0.938894 8.87435C0.938894 8.87435 0.922228 8.91602 0.913894 8.93268C0.872228 9.01602 0.847228 9.10768 0.838894 9.19935V9.24935C0.788894 10.216 1.12223 11.1493 1.77223 11.866C2.42223 12.5827 3.31389 13.0077 4.29723 13.0577C5.26389 13.0077 6.15556 12.5827 6.81389 11.866C7.46389 11.1493 7.79723 10.216 7.75556 9.25768C7.75556 9.23268 7.75556 9.21602 7.74723 9.19935C7.73889 9.10768 7.71389 9.01602 7.67223 8.93268L5.40556 5.22435L9.39723 4.04935V15.5493H6.56389V16.991H13.6639V15.5493H10.8389V3.62435L14.3472 2.59102L12.5889 5.44102C12.5889 5.44102 12.5722 5.48268 12.5639 5.49935C12.5222 5.58268 12.4972 5.67435 12.4889 5.75768V5.81602C12.4306 6.78268 12.7722 7.71602 13.4222 8.43268C14.0722 9.14935 14.9639 9.57435 15.9472 9.62435C16.9139 9.57435 17.8056 9.14935 18.4639 8.43268C19.1139 7.71602 19.4472 6.78268 19.4056 5.82435V5.76602H19.3972ZM17.8806 6.54935C17.7889 6.96602 17.5639 7.35768 17.2389 7.64935C16.8806 7.97435 16.4222 8.16602 15.9472 8.19102C15.4722 8.15768 15.0139 7.96602 14.6556 7.64935C14.3389 7.35768 14.1139 6.97435 14.0139 6.54935H17.8806ZM14.4972 5.10768L15.9472 2.74935L17.3972 5.10768H14.4972ZM2.84723 8.53268L4.29723 6.17435L5.74723 8.53268H2.84723ZM6.23056 9.97435C6.13056 10.391 5.91389 10.7827 5.58889 11.0743C5.23056 11.3993 4.77223 11.591 4.29723 11.616C3.82223 11.5827 3.36389 11.391 3.00556 11.0743C2.68889 10.7827 2.46389 10.3993 2.36389 9.97435H6.23056Z' fill='%23111111'/%3E%3C/svg%3E");
width: 3rem;
height: 3rem;
}
&.--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;
}
}