swiperScrollbar + omnibusTooltip
This commit is contained in:
@@ -3,6 +3,8 @@ Funkcje js składające się na customowe ramki rekomendacji
|
||||
|
||||
## UWAGI PRZEDWDROŻENIOWE ##
|
||||
- kod zawiera **app_shop.fn.idmGetOmnibusDetails** który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach rekomendacji
|
||||
- kod zawiera FrontendComponents/helper-functions/tooltip i FrontendComponents/helper-functions/swiper-scrollbar
|
||||
- kod używa naszego idmSetHeight, ale jest to wstawione jako metoda klasowa, nie jako coś osobnego.
|
||||
|
||||
### Pliki ###
|
||||
- **style.css** - style wstawiane do css
|
||||
@@ -54,8 +56,9 @@ Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo
|
||||
- Wystąpił błąd z inicjalizacją. Proszę odśwież stronę
|
||||
- Nie znaleziono kontenera
|
||||
- Nie znaleziono metody graphql
|
||||
- Najniższa cena
|
||||
|
||||
#### Przykład ####
|
||||
#### Przykłady UŻYCIA ####
|
||||
##### Jedna ramka - obiekt ######
|
||||
```
|
||||
new IdmHotspot({
|
||||
@@ -100,6 +103,8 @@ new IdmHotspot({
|
||||
* - false = nieaktywny
|
||||
* - object = konfiguracja Swiper
|
||||
* @property {Function} options.callbackFn - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
|
||||
* @property {boolean} options.swiperScrollbar - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
|
||||
* @property {boolean} options.omnibusTooltip - Czy wyświetlać omnibusa w formie tooltip
|
||||
*
|
||||
* @type {Hotspot[]}
|
||||
*/
|
||||
@@ -125,6 +130,8 @@ new IdmHotspot({
|
||||
idmInsertHotspotElement(document.getElementByid("idmBlogHotspot1"));
|
||||
</script>
|
||||
```
|
||||
|
||||
Żeby zmienić resztę ustawień trzeba zmieniać defaultowe ustawienia!
|
||||
#### Wszystkie możliwe dane HTML ####
|
||||
```
|
||||
/**
|
||||
|
||||
255
klasa.js
255
klasa.js
@@ -8,6 +8,8 @@ const idmHotspotTextObject = {
|
||||
[<iai:variable vid="Bestseller"/>]: <iai:variable vid="Bestseller"/>,
|
||||
[<iai:variable vid="Nowość"/>]: <iai:variable vid="Nowość"/>,
|
||||
[<iai:variable vid="Ilość"/>]: <iai:variable vid="Ilość"/>,
|
||||
[<iai:variable vid="Najniższa cena"/>]: <iai:variable vid="Najniższa cena"/>,
|
||||
[<iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>]: <iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>,
|
||||
[<iai:variable vid="Zwiększ ilość"/>]: <iai:variable vid="Zwiększ ilość"/>,
|
||||
[<iai:variable vid="Zmniejsz ilość"/>]: <iai:variable vid="Zmniejsz ilość"/>,
|
||||
[<iai:variable vid="Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki"/>]: <iai:variable vid="Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki"/>,
|
||||
@@ -278,7 +280,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
|
||||
// Aktywny kod rabatowy
|
||||
if (app_shop.vars.omnibus?.rebateCodeActivate && sizeData.price?.rebateCodeActive) {
|
||||
classes.add.push('--omnibus-code');
|
||||
activeLabel.rebateCodeActive = `<span class="label --code --omnibus">${idmHotspotTextObject["Kod rabatowy"]}</span>`;
|
||||
activeLabel.rebateCodeActive = `<span class="label --code --omnibus">${omnibusDetailsTxt?.['Kod rabatowy']}</span>`;
|
||||
classes.remove = classes.remove.filter((item) => item !== '--omnibus-code');
|
||||
}
|
||||
// Skrócona wersja omnibusa, gdy aktywny kod rabatowy
|
||||
@@ -301,19 +303,13 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
|
||||
}
|
||||
// label okazja
|
||||
if ((!higher || newDate) && !activeLabel?.rebateCodeActive) {
|
||||
activeLabel.bargain = `<span class="label --bargain --omnibus">${idmHotspotTextObject["Okazja"]}</span>`;
|
||||
activeLabel.bargain = `<span class="label --bargain --omnibus">${omnibusDetailsTxt?.['Okazja']}</span>`;
|
||||
}
|
||||
// label promocja
|
||||
if (Object.keys(activeLabel)?.length === 0) {
|
||||
activeLabel.bargain = `<span class="label --promo --omnibus">${idmHotspotTextObject["Promocja"]}</span>`;
|
||||
activeLabel.bargain = `<span class="label --promo --omnibus">${omnibusDetailsTxt?.['Promocja']}</span>`;
|
||||
}
|
||||
|
||||
// // labele zones
|
||||
// if(productData.zones.find(zone => zone ==="bestseller")) activeLabel.bestseller = `<span class="label --bestseller --omnibus">${idmHotspotTextObject["Bestseller"]}</span>`;
|
||||
// if(productData.zones.find(zone => zone ==="news")) activeLabel.news = `<span class="label --news --omnibus">${idmHotspotTextObject["Nowość"]}</span>`;
|
||||
|
||||
|
||||
|
||||
let omnibusPercentSign = '';
|
||||
if (higher) {
|
||||
omnibusPercentSign = '-';
|
||||
@@ -325,7 +321,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
|
||||
price: omnibusPrice,
|
||||
visible: true,
|
||||
percent: omnibusPercent,
|
||||
html: `<span class="omnibus_price__text">${idmHotspotTextObject['Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki']}: </span><del class="omnibus_price__value">${omnibusPrice}</del><span class="price_percent">${omnibusPercent}</span>`,
|
||||
html: `<span class="omnibus_price__text">${omnibusDetailsTxt['Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki']}: </span><del class="omnibus_price__value">${omnibusPrice}</del><span class="price_percent">${omnibusPercent}</span>`,
|
||||
};
|
||||
|
||||
const max = (maxPrice) ? {
|
||||
@@ -333,7 +329,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
|
||||
price: maxPrice,
|
||||
visible: true,
|
||||
percent: `-${sizeData.price.youSavePercent}%`,
|
||||
html: `<span class="omnibus_label">${idmHotspotTextObject['Cena regularna']}: </span>
|
||||
html: `<span class="omnibus_label">${omnibusDetailsTxt['Cena regularna']}: </span>
|
||||
<del>${maxPrice}</del><span class="price_percent">-${sizeData.price.youSavePercent}%</span>`,
|
||||
},
|
||||
} : {};
|
||||
@@ -343,7 +339,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
|
||||
price: beforeRebatePrice,
|
||||
visible: !!classes.add.includes('--omnibus-code'),
|
||||
percent: `-${sizeData.price.beforeRebateDetails?.youSavePercent}%`,
|
||||
html: `<span class="omnibus_label">${idmHotspotTextObject['Cena bez kodu']}: </span>
|
||||
html: `<span class="omnibus_label">${omnibusDetailsTxt['Cena bez kodu']}: </span>
|
||||
<del>${beforeRebatePrice}</del>
|
||||
<span class="price_percent">-${sizeData.price.beforeRebateDetails?.youSavePercent}%</span>`,
|
||||
},
|
||||
@@ -354,12 +350,17 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
|
||||
date: newDate,
|
||||
price: maxPrice,
|
||||
visible: !!classes.add.includes('--omnibus-new-price'),
|
||||
html: `<span class="omnibus_label">${idmHotspotTextObject['Cena nadchodząca od']} </span>
|
||||
html: `<span class="omnibus_label">${omnibusDetailsTxt['Cena nadchodząca od']} </span>
|
||||
<span class="new_price__date">${newDate}: </span>
|
||||
<span class="new_price__value">${maxPrice}</span>`,
|
||||
},
|
||||
} : {};
|
||||
|
||||
const omnibusLabel = {
|
||||
omnibusLabel: {
|
||||
name: Object.keys(activeLabel)?.[0] || '',
|
||||
html: activeLabel[Object.keys(activeLabel)?.[0]],
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
classes,
|
||||
@@ -367,7 +368,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
|
||||
...max,
|
||||
...beforeRebate,
|
||||
...newPriceEffectiveUntil,
|
||||
activeLabel,
|
||||
...omnibusLabel,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -409,7 +410,9 @@ class IdmHotspot{
|
||||
lazy: true,
|
||||
addToBasket: true, // true, false, "range"
|
||||
swiper: true,
|
||||
callbackFn: ()=>{}
|
||||
callbackFn: ()=>{},
|
||||
swiperScrollbar: false,
|
||||
omnibusTooltip: false,
|
||||
}
|
||||
}
|
||||
/**
|
||||
@@ -523,7 +526,7 @@ class IdmHotspot{
|
||||
*/
|
||||
markupProduct(prod){
|
||||
// IDM DO POPRAWKI
|
||||
const prodExchangedData = app_shop.fn?.idmGetOmnibusDetails({productData: prod});
|
||||
const prodExchangedData = app_shop?.fn?.getOmnibusDetails?.({productData: prod}) || app_shop.fn?.idmGetOmnibusDetails({productData: prod});
|
||||
|
||||
// markup pojedynczego produktu
|
||||
let singleMarkup = "";
|
||||
@@ -611,11 +614,39 @@ class IdmHotspot{
|
||||
${price.value === 0 ? `<a class="price --phone" href="/contact.php" tabindex="-1" title="${idmHotspotTextObject["Kliknij, by przejść do formularza kontaktu"]}">${idmHotspotTextObject["Cena na telefon"]}</a>` : ""}
|
||||
${prodExchangedData?.beforeRebate?.visible ? `<span class="price --before-rebate">${prodExchangedData?.beforeRebate?.html}</span>` : ""}
|
||||
${prodExchangedData?.newPriceEffectiveUntil?.visible ? `<span class="price --new-price new_price">${prodExchangedData?.newPriceEffectiveUntil?.html}</span>` : ""}
|
||||
${prodExchangedData?.omnibus?.visible ? `<span class="price --omnibus omnibus_price">${prodExchangedData?.omnibus?.html}</span>` : ""}
|
||||
${this.markupOmnibus(prodExchangedData?.omnibus)}
|
||||
${prodExchangedData?.max?.visible ? `<span class="price --max">${prodExchangedData?.max?.html}</span>` : ""}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tworzy znacznik HTML dla omnibusa.
|
||||
*
|
||||
* @param {object} omnibus - dane omnibusa
|
||||
* @param {string} omnibus.html - kod html zwykłego omnibusa
|
||||
* @param {string} omnibus.percent - % przeceny omnibusa
|
||||
* @param {string} omnibus.price - cena omnibusa
|
||||
* @param {boolean} omnibus.visible - czy omnibus jest widoczny
|
||||
* @returns {string} Zwraca HTML dla sekcji omnibusa lub pusty string, jeśli niewidoczny.
|
||||
*/
|
||||
|
||||
markupOmnibus(omnibus){
|
||||
if(!omnibus?.visible) return "";
|
||||
|
||||
if(!this.options.omnibusTooltip) return `<span class="price --omnibus omnibus_price">${omnibus?.html}</span>`;
|
||||
else return `
|
||||
<span class="price --omnibus omnibus_price">
|
||||
<span class="omnibus_price__text">${idmHotspotTextObject[<iai:variable vid="Najniższa cena"/>]}:</span>
|
||||
<del class="omnibus_price__value">${omnibus.price}</del>
|
||||
<span class="price_percent">${omnibus.percent}</span>
|
||||
<span class="idm_tooltip">
|
||||
<span class="idm_tooltip__info_icon"></span>
|
||||
<p class="idm_tooltip__content --one-line">${idmHotspotTextObject[<iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>]}</p>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
||||
markupAddToBasket(prod){
|
||||
let markup = "";
|
||||
if(!this.options.addToBasket) return markup;
|
||||
@@ -847,7 +878,7 @@ class IdmHotspot{
|
||||
if (selector) adjustAllHeights(selector)
|
||||
if (selectors?.length) selectors.forEach(adjustAllHeights)
|
||||
}
|
||||
// ========================================================
|
||||
// ========================================================
|
||||
// INICJALIZACJA
|
||||
// ========================================================
|
||||
|
||||
@@ -929,6 +960,8 @@ class IdmHotspot{
|
||||
options: this.options.swiper,
|
||||
});
|
||||
await selectedSwiper.init();
|
||||
|
||||
if(this.options.swiperScrollbar) new IdmSwiperProgress(selectedSwiper, `#${this.id} .swiper`);
|
||||
}
|
||||
}catch(err){
|
||||
console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
|
||||
@@ -945,7 +978,7 @@ class IdmHotspot{
|
||||
}
|
||||
initSingleEvent(prodEl){
|
||||
// DODAWANIE DO KOSZYKA
|
||||
if(this?.options?.addToBasket){
|
||||
if(this.options?.addToBasket){
|
||||
const addToBasketEl = prodEl.querySelector("form.add_to_basket");
|
||||
if(!addToBasketEl) return;
|
||||
addToBasketEl.addEventListener("submit", this.handleAddToBasket);
|
||||
@@ -956,6 +989,14 @@ class IdmHotspot{
|
||||
addToBasketEl.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
|
||||
}
|
||||
}
|
||||
// Tooltip
|
||||
if(this.options?.omnibusTooltip){
|
||||
const tooltipEl = prodEl.querySelector(".idm_tooltip");
|
||||
|
||||
tooltipEl.addEventListener("click", ()=>{
|
||||
this.showTooltip(tooltipEl);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -981,6 +1022,178 @@ class IdmHotspot{
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================================
|
||||
SWIPER PASEK
|
||||
==============================================================
|
||||
*/
|
||||
|
||||
class IdmSwiperProgress {
|
||||
constructor(swiper, selector) {
|
||||
this.swiper = swiper?.slider?.slider ?? swiper?.slider ?? swiper;
|
||||
this.selector = selector;
|
||||
this.scrollbarEl = null;
|
||||
this.progressEl = null;
|
||||
this.isDragging = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
const el = document.querySelector(this.selector);
|
||||
if (!el || el.querySelector(".idm-scrollbar")) return;
|
||||
|
||||
el.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<div class="idm-scrollbar swiper-scrollbar"><div class="idm-progress"></div></div>`
|
||||
);
|
||||
|
||||
this.scrollbarEl = el.querySelector(".idm-scrollbar");
|
||||
this.progressEl = this.scrollbarEl.querySelector(".idm-progress");
|
||||
|
||||
this.updateBarWidth();
|
||||
this.addDragTracking();
|
||||
|
||||
this.swiper.on("progress", () => this.updateProgress());
|
||||
this.swiper.on("breakpoint", () => {this.updateBarWidth()});
|
||||
}
|
||||
|
||||
updateBarWidth() {
|
||||
const { slidesPerGroup, slidesPerView } = this.swiper.params;
|
||||
const totalSlides = this.swiper.slides.length;
|
||||
|
||||
const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
|
||||
this.progressEl.style.width = `${progressWidth}%`;
|
||||
|
||||
if (progressWidth >= 100 || progressWidth <= 0) this.scrollbarEl.style.display = "none";
|
||||
else this.scrollbarEl.style.display = "";
|
||||
}
|
||||
|
||||
updateProgress() {
|
||||
const progress = this.swiper.progress;
|
||||
const { slidesPerGroup, slidesPerView } = this.swiper.params;
|
||||
const totalSlides = this.swiper.slides.length;
|
||||
|
||||
const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
|
||||
const newLeft = (100 - progressWidth) * progress;
|
||||
this.progressEl.style.left = `${Math.min(
|
||||
100 - progressWidth,
|
||||
Math.max(0, newLeft)
|
||||
)}%`;
|
||||
}
|
||||
|
||||
addDragTracking() {
|
||||
const handle = this.progressEl;
|
||||
let grabOffset = 0;
|
||||
let scrollbarWidth = 0;
|
||||
let handleWidth = 0;
|
||||
|
||||
const startDrag = (e) => {
|
||||
this.isDragging = true;
|
||||
this.scrollbarEl.classList.add("--drag-start");
|
||||
|
||||
const rect = this.scrollbarEl.getBoundingClientRect();
|
||||
const handleRect = handle.getBoundingClientRect();
|
||||
scrollbarWidth = rect.width;
|
||||
handleWidth = handleRect.width;
|
||||
|
||||
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
||||
grabOffset = clientX - handleRect.left;
|
||||
|
||||
document.addEventListener("mousemove", handleDrag);
|
||||
document.addEventListener("mouseup", stopDrag);
|
||||
document.addEventListener("touchmove", handleDrag);
|
||||
document.addEventListener("touchend", stopDrag);
|
||||
};
|
||||
|
||||
const handleDrag = (e) => {
|
||||
if (!this.isDragging) return;
|
||||
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
||||
const rect = this.scrollbarEl.getBoundingClientRect();
|
||||
let newLeftPx = clientX - rect.left - grabOffset;
|
||||
const maxLeft = scrollbarWidth - handleWidth;
|
||||
newLeftPx = Math.max(0, Math.min(maxLeft, newLeftPx));
|
||||
const progress = newLeftPx / maxLeft;
|
||||
this.swiper.setProgress(progress, 0);
|
||||
};
|
||||
|
||||
const stopDrag = () => {
|
||||
if (!this.isDragging) return;
|
||||
this.isDragging = false;
|
||||
document.removeEventListener("mousemove", handleDrag);
|
||||
document.removeEventListener("mouseup", stopDrag);
|
||||
document.removeEventListener("touchmove", handleDrag);
|
||||
document.removeEventListener("touchend", stopDrag);
|
||||
this.scrollbarEl.classList.remove("--drag-start");
|
||||
this.swiper.slideReset(400);
|
||||
};
|
||||
|
||||
handle.addEventListener("mousedown", startDrag);
|
||||
handle.addEventListener("touchstart", startDrag);
|
||||
}
|
||||
}
|
||||
// ========================================================
|
||||
// TOOLTIP
|
||||
// ========================================================
|
||||
function idmShowTooltip(tooltipEl){
|
||||
const tooltipContentEl = tooltipEl.querySelector(".idm_tooltip__content");
|
||||
if(!tooltipContentEl) return;
|
||||
|
||||
tooltipContentEl.classList.add("--visible");
|
||||
|
||||
// Logika pokazywania się i chowania tooltipa
|
||||
let timeoutVar;
|
||||
|
||||
function onMouseLeave() {
|
||||
timeoutVar = idmHideTooltipTimer(tooltipEl);
|
||||
}
|
||||
|
||||
function onMouseEnter() {
|
||||
clearTimeout(timeoutVar);
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
idmHideTooltip(tooltipEl);
|
||||
}
|
||||
|
||||
// Store references for later removal
|
||||
tooltipEl._onMouseLeave = onMouseLeave;
|
||||
tooltipEl._onMouseEnter = onMouseEnter;
|
||||
tooltipEl._onScroll = onScroll;
|
||||
|
||||
tooltipEl.addEventListener("mouseleave", onMouseLeave);
|
||||
tooltipEl.addEventListener("mouseenter", onMouseEnter);
|
||||
document.addEventListener("scroll", onScroll);
|
||||
}
|
||||
|
||||
function idmHideTooltipTimer(tooltipEl){
|
||||
return setTimeout(() => idmHideTooltip(tooltipEl), 1500);
|
||||
}
|
||||
function idmHideTooltip(tooltipEl){
|
||||
const tooltipContentEl = tooltipEl.querySelector(".idm_tooltip__content");
|
||||
if (!tooltipContentEl) return;
|
||||
|
||||
tooltipContentEl.classList.remove("--visible");
|
||||
|
||||
tooltipEl.removeEventListener("mouseleave", tooltipEl._onMouseLeave);
|
||||
tooltipEl.removeEventListener("mouseenter", tooltipEl._onMouseEnter);
|
||||
document.removeEventListener("scroll", tooltipEl._onScroll);
|
||||
|
||||
delete tooltipEl._onMouseLeave;
|
||||
delete tooltipEl._onMouseEnter;
|
||||
delete tooltipEl._onScroll;
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", ()=>{
|
||||
document.body.addEventListener("click", e=>{
|
||||
const tooltipEl = e.target.closest(".idm_tooltip");
|
||||
if(!e.target.closest(".idm_tooltip__info_icon") || !tooltipEl) return;
|
||||
|
||||
e.preventDefault();
|
||||
idmShowTooltip(tooltipEl);
|
||||
});
|
||||
});
|
||||
// new IdmHotspot({
|
||||
// id: "idmTestHotspot1",
|
||||
// title: "tescik",
|
||||
@@ -1031,8 +1244,6 @@ async function idmPrepareHotspotObject(selectedContainerEl){
|
||||
|
||||
if(selectedContainerEl?.dataset?.lazy) idmHotspotObj.options = {lazy: selectedContainerEl?.dataset?.lazy === "true" ? true : false};
|
||||
|
||||
|
||||
|
||||
new IdmHotspot(idmHotspotObj)
|
||||
}
|
||||
|
||||
|
||||
21
ramka.txt
21
ramka.txt
@@ -1,12 +1,11 @@
|
||||
1. Ramka
|
||||
|
||||
|
||||
- ulubione? + porównywarka? (wymagają zmiany w komponencie idosella)
|
||||
- zakres cen?????????????
|
||||
- wybór rozmiaru/wersji??
|
||||
- Wybór kolorystyczny
|
||||
- ulubione? + porównywarka? (wymagają zmiany w komponencie idosella)
|
||||
|
||||
- zakres cen?????????????
|
||||
- Wybór kolorystyczny???
|
||||
- AAAAA - banner na hotspocie
|
||||
- Pasek jak na Pasiastym Parzystnokopytnym Kosmetyku
|
||||
|
||||
|
||||
|
||||
@@ -15,14 +14,4 @@
|
||||
|
||||
Stara ramka
|
||||
- getProductXML=t
|
||||
- slick
|
||||
|
||||
|
||||
bramka z hotspots jeszcze nie działa bad request
|
||||
|
||||
|
||||
|
||||
Get-Content 1graphQL.js,2funkcje.js,3markup.js,4init.js,5ainsertHotspotHTML.js,5binsertHotspotObject.js | Set-Content bundle.js
|
||||
|
||||
|
||||
Get-Content sklad/1graphQL.js,sklad/2funkcje.js,sklad/3markup.js,sklad/4init.js,sklad/5ainsertHotspotHTML.js,sklad/5binsertHotspotObject.js | Set-Content bundle.js
|
||||
- slick
|
||||
56
style.css
56
style.css
@@ -1,56 +0,0 @@
|
||||
.idm__hotspot .add_to_basket{
|
||||
display: flex;
|
||||
}
|
||||
.idm__hotspot .add_to_basket.--range{
|
||||
flex-direction: column;
|
||||
}
|
||||
.idm__hotspot .idm-products-banner__qty{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.idm__hotspot .idm-products-banner__qty-input{
|
||||
height: 3rem;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
width: 60%;
|
||||
max-width: unset;
|
||||
min-width: unset;
|
||||
}
|
||||
.idm__hotspot .idm-products-banner__qty button{
|
||||
background: #000;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
min-width: 3rem;
|
||||
}
|
||||
@keyframes idm-skeleton-loading {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
.idm__hotspot.idm-loading{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
transition: none;
|
||||
border-radius: 8px;
|
||||
background: #eee;
|
||||
background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
|
||||
background-size: 200% 100%;
|
||||
animation: 1.5s idm-skeleton-loading linear infinite;
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
}
|
||||
.idm__hotspot.idm-loading .hotspot{
|
||||
opacity: 0;
|
||||
}
|
||||
@media (max-width: 756px) {
|
||||
.idm__hotspot.idm-loading{
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
}
|
||||
}
|
||||
125
style.less
Normal file
125
style.less
Normal file
@@ -0,0 +1,125 @@
|
||||
.idm__hotspot .add_to_basket{
|
||||
display: flex;
|
||||
}
|
||||
.idm__hotspot .add_to_basket.--range{
|
||||
flex-direction: column;
|
||||
}
|
||||
.idm__hotspot .idm-products-banner__qty{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.idm__hotspot .idm-products-banner__qty-input{
|
||||
height: 3rem;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
width: 60%;
|
||||
max-width: unset;
|
||||
min-width: unset;
|
||||
}
|
||||
.idm__hotspot .idm-products-banner__qty button{
|
||||
background: #000;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
min-width: 3rem;
|
||||
}
|
||||
@keyframes idm-skeleton-loading {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
.idm__hotspot.idm-loading{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
transition: none;
|
||||
border-radius: 8px;
|
||||
background: #eee;
|
||||
background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
|
||||
background-size: 200% 100%;
|
||||
animation: 1.5s idm-skeleton-loading linear infinite;
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
}
|
||||
.idm__hotspot.idm-loading .hotspot{
|
||||
opacity: 0;
|
||||
}
|
||||
@media (max-width: 756px) {
|
||||
.idm__hotspot.idm-loading{
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* SWIPER PROGRESS */
|
||||
.idm-scrollbar{
|
||||
flex: 1;
|
||||
height: 2px!important;
|
||||
position: relative!important;
|
||||
margin-top: 2rem;
|
||||
cursor: grab;
|
||||
}
|
||||
.idm-scrollbar.--drag-start .idm-progress{
|
||||
transition: none;
|
||||
}
|
||||
.idm-progress{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: calc(100% + 2px);
|
||||
background-color: #0d0d0d;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
transition: all 0.3s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* tooltip */
|
||||
.idm_tooltip{
|
||||
--tooltip-background: #111;
|
||||
--tooltip-border: #999;
|
||||
--tooltip-color: #fff;
|
||||
|
||||
position: relative;
|
||||
&__info_icon{
|
||||
color: var(--tooltip-border);
|
||||
display: inline-block;
|
||||
&:before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
margin-left: 0.5rem;
|
||||
cursor: pointer;
|
||||
vertical-align: bottom;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='idm_tooltip__info_icon' viewBox='0 0 16 16'%3E%3Cpath d='M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14.667A6.667,6.667,0,1,1,14.667,8,6.667,6.667,0,0,1,8,14.667Z' fill='currentColor'%3E%3C/path%3E%3Cpath d='M11.333,10h-.667a.667.667,0,1,0,0,1.333h.667v4a.667.667,0,0,0,1.333,0v-4A1.333,1.333,0,0,0,11.333,10Z' transform='translate(-3.333 -3.333)' fill='currentColor'%3E%3C/path%3E%3Ccircle cx='1' cy='1' r='1' transform='translate(7 3.333)' fill='currentColor'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
&__content{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s;
|
||||
border-radius: 5px;
|
||||
background: var(--tooltip-background);
|
||||
color: var(--tooltip-color);
|
||||
border: 1px solid var(--tooltip-border);
|
||||
bottom: 150%;
|
||||
padding: 0.5rem 1rem;
|
||||
@media @tablet{
|
||||
&.--one-line{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&.--visible{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user