diff --git a/README.md b/README.md index c78c8ff..ed15cc4 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,7 @@ new IdmHotspot({ * @property {object} options - Ustawienia dla hotspotu (required). + * @property {boolean} [options.limit] - Limit wczytywanych produktów * @property {boolean} [options.lazy] - Czy wczytywać w trybie lazy. * @property {boolean} [options.devMode] - Czy wczytywać ramki tylko dla stron z dev=true. * @property {boolean} [options.omnibusTooltip] - Czy wyświetlać omnibusa w formie tooltip diff --git a/klasa.js b/klasa.js index 5f8db15..ccf5ca6 100644 --- a/klasa.js +++ b/klasa.js @@ -79,23 +79,23 @@ const idmHotspotTextObject = { /////////////////////////////////////////////// // GraphQL // ogolne -const IDM_PRICE_QUERY = `price { +const IDM_PRICE_QUERY = (priceType) => `price { rebateCodeActive price { - gross { + ${priceType} { value formatted } } omnibusPrice { - gross { + ${priceType} { value formatted } } omnibusPriceDetails { unit { - gross { + ${priceType} { value formatted } @@ -107,26 +107,26 @@ const IDM_PRICE_QUERY = `price { } } max { - gross { + ${priceType} { value formatted } } unit { - gross { + ${priceType} { value formatted } } unitConvertedPrice { - gross { + ${priceType} { value formatted } } youSavePercent beforeRebate { - gross { + ${priceType} { value formatted } @@ -134,34 +134,34 @@ const IDM_PRICE_QUERY = `price { beforeRebateDetails { youSavePercent unit { - gross { + ${priceType} { value formatted } } } advancePrice { - gross { + ${priceType} { value formatted } } suggested { - gross { + ${priceType} { value formatted } } rebateNumber { number - gross { + ${priceType} { value formatted } } }`; -const IDM_PRODUCT_QUERY = `id +const IDM_PRODUCT_QUERY = (priceType) => `id type name icon @@ -180,7 +180,7 @@ const IDM_PRODUCT_QUERY = `id id amount name - ${IDM_PRICE_QUERY} + ${IDM_PRICE_QUERY(priceType)} } group{ id @@ -217,39 +217,39 @@ const IDM_PRODUCT_QUERY = `id unit{ id, name, singular, plural, fraction, sellBy, precision, unitConvertedFormat } - ${IDM_PRICE_QUERY}`; + ${IDM_PRICE_QUERY(priceType)}`; // 1. products -const IDM_PRODUCTS_GQL = (args) => JSON.stringify({ +const IDM_PRODUCTS_GQL = (args, priceType = "gross") => JSON.stringify({ query: `{ products(${args}){ took products{ - ${IDM_PRODUCT_QUERY} + ${IDM_PRODUCT_QUERY(priceType)} } } }` }); // 2. hotspots -const IDM_HOTSPOTS_GQL = (args) => JSON.stringify({ +const IDM_HOTSPOTS_GQL = (args, priceType = "gross") => JSON.stringify({ query: `{ hotspots(${args}){ took name url products{ - ${IDM_PRODUCT_QUERY} + ${IDM_PRODUCT_QUERY(priceType)} } } }` }); // 3. single product -const IDM_PRODUCT_GQL = (args) => JSON.stringify({ +const IDM_PRODUCT_GQL = (args, priceType = "gross") => JSON.stringify({ query: `{ product(${args}){ product{ - ${IDM_PRODUCT_QUERY} + ${IDM_PRODUCT_QUERY(priceType)} } } }` @@ -446,6 +446,7 @@ class IdmHotspot{ } }, options: { + limit: 8, lazy: true, devMode: false, callbackFn: ()=>{}, @@ -535,9 +536,11 @@ class IdmHotspot{ let graphFn, query; let queryMarkup = ""; + let additionalQuery = ""; + if(this.source?.hotspotsType){ graphFn = IDM_HOTSPOTS_GQL; - queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: 16`; + queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: ${this.options.limit}`; }else{ graphFn = IDM_PRODUCTS_GQL; if(this.source?.productsId){ @@ -558,9 +561,11 @@ class IdmHotspot{ if(this.source?.priceRange){ queryMarkup += `priceRange: {from: ${+this.source.priceRange?.from || 0}, to: ${+this.source.priceRange?.to || 0}},`; } + + if(this.options.limit) additionalQuery += `, settingsInput: {limit: ${this.options.limit}}` } - query = `searchInput: { ${queryMarkup} }` + query = `searchInput: { ${queryMarkup} }${additionalQuery}` return [graphFn, query]; } @@ -588,7 +593,7 @@ class IdmHotspot{ headers: { "Content-Type": "application/json", }, - body: this.query.graphFn(this.query.string), + body: this.query.graphFn(this.query.string, this.priceType), }); const data = await res.json(); products = data?.data?.[this.query.graphFn === IDM_HOTSPOTS_GQL ? "hotspots" : "products"]?.products; @@ -688,14 +693,14 @@ class IdmHotspot{ markupVersions(prod){ if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return ""; - let MAX_VERSION_AMOUNT = 5; - if(app_shop.vars.view > 2){ - MAX_VERSION_AMOUNT = this.cssVariables.version.columnDesktop; - }else if(app_shop.vars.view === 2){ - MAX_VERSION_AMOUNT = this.cssVariables.version.columnTablet; - }else if(app_shop.vars.view === 1){ - MAX_VERSION_AMOUNT = this.cssVariables.version.columnMobile; - } + // let MAX_VERSION_AMOUNT = 5; + // if(app_shop.vars.view > 2){ + // MAX_VERSION_AMOUNT = this.cssVariables.version.columnDesktop; + // }else if(app_shop.vars.view === 2){ + // MAX_VERSION_AMOUNT = this.cssVariables.version.columnTablet; + // }else if(app_shop.vars.view === 1){ + // MAX_VERSION_AMOUNT = this.cssVariables.version.columnMobile; + // } const sortedVersions = prod.group.versions.sort(function (a, b) { if (a.name < b.name) { @@ -707,15 +712,29 @@ class IdmHotspot{ return 0; }) - - return `
- ${sortedVersions.reduce((acc, val, index)=>{ - if(index + 1 > MAX_VERSION_AMOUNT) return acc; + let productVersionsMarkup = sortedVersions.reduce((acc, val, index)=>{ + // if(index + 1 > MAX_VERSION_AMOUNT) return acc; - if(index + 1 === MAX_VERSION_AMOUNT && prod.group.versions.length > MAX_VERSION_AMOUNT) return acc + `+${(prod.group.versions.length - MAX_VERSION_AMOUNT) + 1}`; + // if(index + 1 === MAX_VERSION_AMOUNT && prod.group.versions.length > MAX_VERSION_AMOUNT) + // return acc + ` + // +${(prod.group.versions.length - MAX_VERSION_AMOUNT) + 1} + // `; return acc + `${val.name}`; - },"")} + },""); + + const desktopMoreLength = (prod.group.versions.length - this.cssVariables.version.columnDesktop) + 1; + const tabletMoreLength = (prod.group.versions.length - this.cssVariables.version.columnTablet) + 1; + const mobileMoreLength = (prod.group.versions.length - this.cssVariables.version.columnMobile) + 1; + + return `
+ ${productVersionsMarkup} + + + + ${desktopMoreLength > 0 ? desktopMoreLength : ""} + ${tabletMoreLength > 0 ? tabletMoreLength : ""} + ${mobileMoreLength > 0 ? mobileMoreLength : ""} +
` } @@ -1139,8 +1158,13 @@ class IdmHotspot{ // ======================================================== // USTAWIANIE ZMIENNYCH CSS DLA RAMKI // ======================================================== + // Ustawia się je w dwa sposoby - jako zmienne css przypisywane do ramki + jako dodaktowy tag style + cssSetAllVariables(){ this.cssVariableVersionColumnCount(); + + // css `) + } + // ======================================================== // FUNKCJE POMOCNICZE // ======================================================== @@ -1208,7 +1260,7 @@ class IdmHotspot{ headers: { "Content-Type": "application/json", }, - body: IDM_PRODUCT_GQL(`productId: ${newProdId}`), + body: IDM_PRODUCT_GQL(`productId: ${newProdId}`, this.priceType), }); const data = await res.json(); @@ -1246,11 +1298,11 @@ class IdmHotspot{ return { gross: { value: priceNode?.getAttribute(`${name}`) !== null ? +priceNode.getAttribute(`${name}`) : undefined, - formatted: priceNode?.getAttribute(`${name}_formatted`) ?? undefined, + formatted: priceNode?.getAttribute(`${name}_formatted`), }, net: { value: priceNode?.getAttribute(`${name}_net`) !== null ? +priceNode.getAttribute(`${name}_net`) : undefined, - formatted: priceNode?.getAttribute(`${name}_net_formatted`) ?? undefined, + formatted: priceNode?.getAttribute(`${name}_net_formatted`), } } } @@ -1260,11 +1312,11 @@ class IdmHotspot{ price: { gross: { value: priceNode?.getAttribute("value") !== null ? +priceNode.getAttribute("value") : undefined, - formatted: priceNode?.getAttribute("price_formatted") ?? undefined, + formatted: priceNode?.getAttribute("price_formatted"), }, net: { value: priceNode?.getAttribute("price_net") !== null ? +priceNode.getAttribute("price_net") : undefined, - formatted: priceNode?.getAttribute("price_net_formatted") ?? undefined, + formatted: priceNode?.getAttribute("price_net_formatted"), } }, rebateCodeActive: priceNode?.getAttribute("rebate_code_active") === "y" ? true : false, @@ -1314,21 +1366,21 @@ class IdmHotspot{ ...this.xmlGetGrossNetPrices({priceNode, name: "unit_converted_price"}) }, // rebateNumber: {}, - lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date") ?? undefined, + lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date"), // advancePrice: {}, promotionDuration: { promotionTill: { date: { - date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2] ?? undefined, - month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1] ?? undefined, - year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0] ?? undefined, + date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2], + month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1], + year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0], // weekDay: "", // formatted: "" }, time: { - hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0] ?? undefined, - minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1] ?? undefined, - seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2] ?? undefined, + hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0], + minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1], + seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2], }, // timestamp: "" }, @@ -1347,8 +1399,8 @@ class IdmHotspot{ node.querySelectorAll(":scope > trait").forEach(trait=>{ const currParameter = awardedParameters.find(param=>param.id === trait.getAttribute("groupid")) || { - id: trait.getAttribute("groupid") ?? undefined, - name: trait.getAttribute("groupdescription") ?? undefined, + id: trait.getAttribute("groupid"), + name: trait.getAttribute("groupdescription"), // description: "", values: [], // contextValue: "", @@ -1358,9 +1410,9 @@ class IdmHotspot{ } currParameter.values.push({ - id: trait.getAttribute("traitid") ?? undefined, - name: trait.getAttribute("traitid") ?? undefined, - link: trait.getAttribute("link") ?? undefined, + id: trait.getAttribute("traitid"), + name: trait.getAttribute("traitid"), + link: trait.getAttribute("link"), // description: "", // search: { // icon: "" @@ -1389,7 +1441,8 @@ class IdmHotspot{ const data = []; - allProducts.forEach(prod=>{ + allProducts.forEach((prod, index)=>{ + if(this.options.limit <= index) return; // NODES const priceNode = prod.querySelector(":scope >price"); @@ -1415,21 +1468,21 @@ class IdmHotspot{ const enclosuresImages = []; prod.querySelectorAll(":scope > enclosures > images > enclosure").forEach(img=>{ enclosuresImages.push({ - position: img.getAttribute("position") ?? undefined, - type: img.getAttribute("type") ?? undefined, - typeSecond: img.getAttribute("type_second") ?? undefined, - url: img.getAttribute("url") ?? undefined, - urlSecond: img.getAttribute("url_second") ?? undefined, - width: img.getAttribute("width") ?? undefined, - height: img.getAttribute("height") ?? undefined, - iconUrl: img.getAttribute("icon") ?? undefined, - iconUrlSecond: img.getAttribute("icon_second") ?? undefined, - iconWidth: img.getAttribute("icon_width") ?? undefined, - iconHeight: img.getAttribute("icon_height") ?? undefined, - mediumUrl: img.getAttribute("medium") ?? undefined, - mediumUrlSecond: img.getAttribute("medium_second") ?? undefined, - mediumWidth: img.getAttribute("medium_width") ?? undefined, - mediumHeight: img.getAttribute("medium_height") ?? undefined, + position: img.getAttribute("position"), + type: img.getAttribute("type"), + typeSecond: img.getAttribute("type_second"), + url: img.getAttribute("url"), + urlSecond: img.getAttribute("url_second"), + width: img.getAttribute("width"), + height: img.getAttribute("height"), + iconUrl: img.getAttribute("icon"), + iconUrlSecond: img.getAttribute("icon_second"), + iconWidth: img.getAttribute("icon_width"), + iconHeight: img.getAttribute("icon_height"), + mediumUrl: img.getAttribute("medium"), + mediumUrlSecond: img.getAttribute("medium_second"), + mediumWidth: img.getAttribute("medium_width"), + mediumHeight: img.getAttribute("medium_height"), }) }) @@ -1442,11 +1495,11 @@ class IdmHotspot{ const weightNode = size.querySelector(":scope > weight"); sizes.push({ - id: size?.getAttribute("type") ?? undefined, - name: size?.getAttribute("name") ?? undefined, - code: size?.getAttribute("code") ?? undefined, - codeProducer: size?.getAttribute("code_producer") ?? undefined, - codeExtern: size?.getAttribute("code_extern") ?? undefined, + id: size?.getAttribute("type"), + name: size?.getAttribute("name"), + code: size?.getAttribute("code"), + codeProducer: size?.getAttribute("code_producer"), + codeExtern: size?.getAttribute("code_extern"), amount: size?.getAttribute("amount") !== null ? +size.getAttribute("amount") : undefined, amount_mo: size?.getAttribute("amount_mo") !== null ? +size.getAttribute("amount_mo") : undefined, amount_mw: size?.getAttribute("amount_mw") !== null ? +size.getAttribute("amount_mw") : undefined, @@ -1454,11 +1507,11 @@ class IdmHotspot{ weight: weightNode?.getAttribute("g") !== null ? +weightNode.getAttribute("g") : undefined, availability: { visible: availabilityNode?.getAttribute("visible") === "y" ? true : false, - description: availabilityNode?.getAttribute("status_description") ?? undefined, - status: availabilityNode?.getAttribute("status") ?? undefined, - icon: availabilityNode?.getAttribute("status_gfx") ?? undefined, + description: availabilityNode?.getAttribute("status_description"), + status: availabilityNode?.getAttribute("status"), + icon: availabilityNode?.getAttribute("status_gfx"), deliveryDate: shippingTimeNode?.getAttribute("today") === "true" ? `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate().toString().padStart(2, 0)}` : availabilityNode?.getAttribute("delivery_date"), - minimumStockOfProduct: availabilityNode?.getAttribute("minimum_stock_of_product") ?? undefined, + minimumStockOfProduct: availabilityNode?.getAttribute("minimum_stock_of_product"), // descriptionTel: "", // iconTel: "", }, @@ -1475,81 +1528,81 @@ class IdmHotspot{ versionsNode.querySelectorAll(":scope > version").forEach(ver=>{ versions.push({ id: ver?.getAttribute("id") !== null ? +ver?.getAttribute("id") : undefined, - name: ver?.getAttribute("name") ?? undefined, - icon: ver?.getAttribute("gfx") ?? undefined, - iconSecond: ver?.getAttribute("gfx_second") ?? undefined, - iconSmall: ver?.getAttribute("gfx_small") ?? undefined, - iconSmallSecond: ver?.getAttribute("gfx_small_second") ?? undefined, - productIcon: ver?.getAttribute("icon") ?? undefined, - productIconSecond: ver?.getAttribute("icon_second") ?? undefined, - productIconSmall: ver?.getAttribute("icon_small") ?? undefined, - productIconSmallSecond: ver?.getAttribute("icon_small_second") ?? undefined, - link: ver?.getAttribute("link") ?? undefined, + name: ver?.getAttribute("name"), + icon: ver?.getAttribute("gfx"), + iconSecond: ver?.getAttribute("gfx_second"), + iconSmall: ver?.getAttribute("gfx_small"), + iconSmallSecond: ver?.getAttribute("gfx_small_second"), + productIcon: ver?.getAttribute("icon"), + productIconSecond: ver?.getAttribute("icon_second"), + productIconSmall: ver?.getAttribute("icon_small"), + productIconSmallSecond: ver?.getAttribute("icon_small_second"), + link: ver?.getAttribute("link"), // parameterValues: [], }); }); // DATA - const typeParts = prod.getAttribute("product_type"); + const typeParts = prod?.getAttribute("product_type").split("_"); data.push({ id: prod?.getAttribute("id") !== null ? +prod?.getAttribute("id") : undefined, type: typeParts[1] === "item" ? typeParts[0] : typeParts[1], - code: prod?.getAttribute("code") ?? undefined, - name: prod.querySelector(":scope > name")?.textContent ?? undefined, - versionName: prod.querySelector(":scope > versions")?.getAttribute("name") ?? undefined, - description: prod.querySelector(":scope > description")?.textContent ?? undefined, - // longDescription: prod.querySelector("vlongdescription")?.textContent ?? undefined, + code: prod?.getAttribute("code"), + name: prod.querySelector(":scope > name")?.textContent, + versionName: prod.querySelector(":scope > versions")?.getAttribute("name"), + description: prod.querySelector(":scope > description")?.textContent, + // longDescription: prod.querySelector("vlongdescription")?.textContent, // longDescriptionSections: "", link: prod?.getAttribute("link"), zones, - icon: prod.querySelector(":scope > icon")?.textContent ?? undefined, - iconSecond: prod.querySelector(":scope > icon_second")?.textContent ?? undefined, - iconSmall: prod.querySelector(":scope > icon_small")?.textContent ?? undefined, - iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent ?? undefined, + icon: prod.querySelector(":scope > icon")?.textContent, + iconSecond: prod.querySelector(":scope > icon_second")?.textContent, + iconSmall: prod.querySelector(":scope > icon_small")?.textContent, + iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent, price: this.xmlGetPriceFromNode(priceNode), unit: { - id: sizesNode?.getAttribute("unit_id") ?? undefined, - // name: "", - singular: sizesNode?.getAttribute("unit_single") !== null ? +sizesNode?.getAttribute("unit_single") : undefined, - plural: sizesNode?.getAttribute("unit_plural") ?? undefined, - fraction: sizesNode?.getAttribute("unit_fraction") ?? undefined, + id: sizesNode?.getAttribute("unit_id"), + name: sizesNode?.getAttribute("unit"), + singular: sizesNode?.getAttribute("unit_single"), + plural: sizesNode?.getAttribute("unit_plural"), + fraction: sizesNode?.getAttribute("unit_fraction"), sellBy: sizesNode?.getAttribute("unit_sellby") !== null ? +sizesNode?.getAttribute("unit_sellby") : undefined, precision: sizesNode?.getAttribute("unit_precision") !== null ? +sizesNode?.getAttribute("unit_precision") : undefined, - unitConvertedFormat: sizesNode?.getAttribute("unit_converted_format") ?? undefined, + unitConvertedFormat: sizesNode?.getAttribute("unit_converted_format"), }, producer: { id: firmNode?.getAttribute("id") !== null ? +firmNode?.getAttribute("id") : undefined, - name: firmNode?.getAttribute("name") ?? undefined, - link: firmNode?.getAttribute("productslink") ?? undefined, + name: firmNode?.getAttribute("name"), + link: firmNode?.getAttribute("productslink"), searchIcons: { - icon: firmNode?.getAttribute("icon") ?? undefined, + icon: firmNode?.getAttribute("icon"), }, // projectorIcons: {}, }, category: { id: categoryNode?.getAttribute("id") !== null ? +categoryNode?.getAttribute("id") : undefined, - name: categoryNode?.getAttribute("name") ?? undefined, - link: categoryNode?.getAttribute("productslink") ?? undefined + name: categoryNode?.getAttribute("name"), + link: categoryNode?.getAttribute("productslink") }, group: { id: versionsNode?.getAttribute("id") !== null ? +versionsNode?.getAttribute("id") : undefined, - name: versionsNode?.getAttribute("name") ?? undefined, + name: versionsNode?.getAttribute("name"), displayAll: versionsNode?.getAttribute("display_all") === "true" ? true : false, - link: versionsNode?.getAttribute("link") ?? undefined, + link: versionsNode?.getAttribute("link"), versions, groupParameters: this.xmlGetTraitsFromNode(versionsNode.querySelector(":scope > groupParameters")) }, opinion: { rating: commentsNode?.getAttribute("avg") !== null ? +commentsNode?.getAttribute("avg") : undefined, count: commentsNode?.getAttribute("count") !== null ? +commentsNode?.getAttribute("count") : undefined, - link: commentsNode?.getAttribute("link") ?? undefined + link: commentsNode?.getAttribute("link") }, enclosuresImages, // enclosuresAttachments: [], series: { id: seriesNode?.getAttribute("id") !== null ? +seriesNode?.getAttribute("id") : undefined, - name: seriesNode?.getAttribute("name") ?? undefined, - link: seriesNode?.getAttribute("link") ?? undefined + name: seriesNode?.getAttribute("name"), + link: seriesNode?.getAttribute("link") }, awardedParameters: this.xmlGetTraitsFromNode(prod.querySelector(":scope > traits")), // parameteresWithContext: [], @@ -1602,7 +1655,7 @@ class IdmHotspot{ // Ustawienie wszystkich zmiennych CSS this.cssSetAllVariables(); - // ca + // funkcja wykonująca się po ramce rekomendacji if(typeof this.options?.callbackFn === "function") this.options?.callbackFn(); }catch(err){ console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err); @@ -1939,23 +1992,6 @@ document.addEventListener("DOMContentLoaded", ()=>{ // swiper: true, // } // }); -// { -// id: "idmMainHotspot2", -// title: "Super ramka rekomendacji", -// placement: { -// selector: "#content", -// insert: "beforeend" -// }, -// source: { -// productsMenu: 488, -// }, -// options: { -// lazy: true, -// addToBasket: "range", -// swiper: true, -// } -// } - async function idmPrepareHotspotObject(selectedContainerEl){ selectedContainerEl.classList.add("--init"); @@ -1986,9 +2022,9 @@ async function idmPrepareHotspotObject(selectedContainerEl){ if(selectedContainerEl?.dataset?.lazy) idmHotspotObj.options = {lazy: selectedContainerEl?.dataset?.lazy === "true" ? true : false}; - new IdmHotspot(idmHotspotObj) + new IdmHotspot(idmHotspotObj); } document.querySelectorAll(".hotspot__wrapper.idm__hotspot").forEach(currentHotspot=>{ - idmPrepareHotspotObject(currentHotspot) -}) + idmPrepareHotspotObject(currentHotspot); +}); \ No newline at end of file diff --git a/ramka.txt b/ramka.txt index 0267e75..923b7da 100644 --- a/ramka.txt +++ b/ramka.txt @@ -3,6 +3,9 @@ - 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 diff --git a/style.less b/style.less index a8e0bb8..03c6639 100644 --- a/style.less +++ b/style.less @@ -1,5 +1,6 @@ -.idm__hotspot .add_to_basket{ +.idm__hotspot .add_to_basket, .idm__hotspot .add_to_basket__link{ display: flex; + justify-content: center; } .idm__hotspot .add_to_basket.--range{ flex-direction: column; @@ -239,19 +240,33 @@ animation: idmPulseOpacity 3s infinite; } .idm__hotspot .product:has(.product__versions){ - --idm-hotspot-version-height: 55px; + --idm-hotspot-version-height: 65px; + @media (min-width: 757px){ + --idm-hotspot-version-height: 70px; + } + @media (min-width: 979px){ + --idm-hotspot-version-height: 55px; + } .product__versions{ display: grid; - grid-template-columns: repeat(5, 1fr); + grid-template-columns: repeat(var(--version-mobile-columns, 4), 1fr); gap: 1rem; z-index: 1; background: #fff; clip-path: inset(0% 0 100% 0); - padding: 0.3rem 1rem; position: absolute; top: 0; width: 100%; - + + padding: 0.3rem 1.5rem; + @media (min-width: 757px){ + padding: 0.3rem 2.5rem; + grid-template-columns: repeat(var(--version-tablet-columns, 3), 1fr); + } + @media (min-width: 979px){ + padding: 0.3rem 1rem; + grid-template-columns: repeat(var(--version-desktop-columns, 5), 1fr); + } height: var(--idm-hotspot-version-height); align-items: center; @@ -266,6 +281,22 @@ aspect-ratio: 1 / 1; align-items: center; justify-content: center; + + @media (max-width: 756px){ + &:has(.--mobile-more:empty), .--tablet-more, .--desktop-more{ + display: none; + } + } + @media (min-width: 757px) and (max-width: 978px){ + &:has(.--tablet-more:empty), .--desktop-more, .--mobile-more{ + display: none; + } + } + @media (min-width: 979px){ + &:has(.--desktop-more:empty), .--tablet-more, .--mobile-more{ + display: none; + } + } &:hover{ border-color: #111; @@ -275,6 +306,7 @@ box-shadow: 0 0 0 1px var(--primary-color, #111); } } + .product__version_more{ background: #f2f2f2; }