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

poprawa linku + wersji + dodanie limitu produktow

Browse Source
This commit is contained in:
pawel.gaca
2025-12-08 11:15:34 +01:00
parent 12318caaba
commit 5f194e862f
4 changed files with 214 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -111,6 +111,7 @@ new IdmHotspot({
* @property {object} options - Ustawienia dla hotspotu (required). * @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.lazy] - Czy wczytywać w trybie lazy.
* @property {boolean} [options.devMode] - Czy wczytywać ramki tylko dla stron z dev=true. * @property {boolean} [options.devMode] - Czy wczytywać ramki tylko dla stron z dev=true.
* @property {boolean} [options.omnibusTooltip] - Czy wyświetlać omnibusa w formie tooltip * @property {boolean} [options.omnibusTooltip] - Czy wyświetlać omnibusa w formie tooltip

310
klasa.js
View File

@@ -79,23 +79,23 @@ const idmHotspotTextObject = {
/////////////////////////////////////////////// ///////////////////////////////////////////////
// GraphQL // GraphQL
// ogolne // ogolne
const IDM_PRICE_QUERY = `price { const IDM_PRICE_QUERY = (priceType) => `price {
rebateCodeActive rebateCodeActive
price { price {
gross { ${priceType} {
value value
formatted formatted
} }
} }
omnibusPrice { omnibusPrice {
gross { ${priceType} {
value value
formatted formatted
} }
} }
omnibusPriceDetails { omnibusPriceDetails {
unit { unit {
gross { ${priceType} {
value value
formatted formatted
} }
@@ -107,26 +107,26 @@ const IDM_PRICE_QUERY = `price {
} }
} }
max { max {
gross { ${priceType} {
value value
formatted formatted
} }
} }
unit { unit {
gross { ${priceType} {
value value
formatted formatted
} }
} }
unitConvertedPrice { unitConvertedPrice {
gross { ${priceType} {
value value
formatted formatted
} }
} }
youSavePercent youSavePercent
beforeRebate { beforeRebate {
gross { ${priceType} {
value value
formatted formatted
} }
@@ -134,34 +134,34 @@ const IDM_PRICE_QUERY = `price {
beforeRebateDetails { beforeRebateDetails {
youSavePercent youSavePercent
unit { unit {
gross { ${priceType} {
value value
formatted formatted
} }
} }
} }
advancePrice { advancePrice {
gross { ${priceType} {
value value
formatted formatted
} }
} }
suggested { suggested {
gross { ${priceType} {
value value
formatted formatted
} }
} }
rebateNumber { rebateNumber {
number number
gross { ${priceType} {
value value
formatted formatted
} }
} }
}`; }`;
const IDM_PRODUCT_QUERY = `id const IDM_PRODUCT_QUERY = (priceType) => `id
type type
name name
icon icon
@@ -180,7 +180,7 @@ const IDM_PRODUCT_QUERY = `id
id id
amount amount
name name
${IDM_PRICE_QUERY} ${IDM_PRICE_QUERY(priceType)}
} }
group{ group{
id id
@@ -217,39 +217,39 @@ const IDM_PRODUCT_QUERY = `id
unit{ unit{
id, name, singular, plural, fraction, sellBy, precision, unitConvertedFormat id, name, singular, plural, fraction, sellBy, precision, unitConvertedFormat
} }
${IDM_PRICE_QUERY}`; ${IDM_PRICE_QUERY(priceType)}`;
// 1. products // 1. products
const IDM_PRODUCTS_GQL = (args) => JSON.stringify({ const IDM_PRODUCTS_GQL = (args, priceType = "gross") => JSON.stringify({
query: `{ query: `{
products(${args}){ products(${args}){
took took
products{ products{
${IDM_PRODUCT_QUERY} ${IDM_PRODUCT_QUERY(priceType)}
} }
} }
}` }`
}); });
// 2. hotspots // 2. hotspots
const IDM_HOTSPOTS_GQL = (args) => JSON.stringify({ const IDM_HOTSPOTS_GQL = (args, priceType = "gross") => JSON.stringify({
query: `{ query: `{
hotspots(${args}){ hotspots(${args}){
took took
name name
url url
products{ products{
${IDM_PRODUCT_QUERY} ${IDM_PRODUCT_QUERY(priceType)}
} }
} }
}` }`
}); });
// 3. single product // 3. single product
const IDM_PRODUCT_GQL = (args) => JSON.stringify({ const IDM_PRODUCT_GQL = (args, priceType = "gross") => JSON.stringify({
query: `{ query: `{
product(${args}){ product(${args}){
product{ product{
${IDM_PRODUCT_QUERY} ${IDM_PRODUCT_QUERY(priceType)}
} }
} }
}` }`
@@ -446,6 +446,7 @@ class IdmHotspot{
} }
}, },
options: { options: {
limit: 8,
lazy: true, lazy: true,
devMode: false, devMode: false,
callbackFn: ()=>{}, callbackFn: ()=>{},
@@ -535,9 +536,11 @@ class IdmHotspot{
let graphFn, query; let graphFn, query;
let queryMarkup = ""; let queryMarkup = "";
let additionalQuery = "";
if(this.source?.hotspotsType){ if(this.source?.hotspotsType){
graphFn = IDM_HOTSPOTS_GQL; graphFn = IDM_HOTSPOTS_GQL;
queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: 16`; queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: ${this.options.limit}`;
}else{ }else{
graphFn = IDM_PRODUCTS_GQL; graphFn = IDM_PRODUCTS_GQL;
if(this.source?.productsId){ if(this.source?.productsId){
@@ -558,9 +561,11 @@ class IdmHotspot{
if(this.source?.priceRange){ if(this.source?.priceRange){
queryMarkup += `priceRange: {from: ${+this.source.priceRange?.from || 0}, to: ${+this.source.priceRange?.to || 0}},`; 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]; return [graphFn, query];
} }
@@ -588,7 +593,7 @@ class IdmHotspot{
headers: { headers: {
"Content-Type": "application/json", "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(); const data = await res.json();
products = data?.data?.[this.query.graphFn === IDM_HOTSPOTS_GQL ? "hotspots" : "products"]?.products; products = data?.data?.[this.query.graphFn === IDM_HOTSPOTS_GQL ? "hotspots" : "products"]?.products;
@@ -688,14 +693,14 @@ class IdmHotspot{
markupVersions(prod){ 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 === 1 ) return "";
let MAX_VERSION_AMOUNT = 5; // let MAX_VERSION_AMOUNT = 5;
if(app_shop.vars.view > 2){ // if(app_shop.vars.view > 2){
MAX_VERSION_AMOUNT = this.cssVariables.version.columnDesktop; // MAX_VERSION_AMOUNT = this.cssVariables.version.columnDesktop;
}else if(app_shop.vars.view === 2){ // }else if(app_shop.vars.view === 2){
MAX_VERSION_AMOUNT = this.cssVariables.version.columnTablet; // MAX_VERSION_AMOUNT = this.cssVariables.version.columnTablet;
}else if(app_shop.vars.view === 1){ // }else if(app_shop.vars.view === 1){
MAX_VERSION_AMOUNT = this.cssVariables.version.columnMobile; // MAX_VERSION_AMOUNT = this.cssVariables.version.columnMobile;
} // }
const sortedVersions = prod.group.versions.sort(function (a, b) { const sortedVersions = prod.group.versions.sort(function (a, b) {
if (a.name < b.name) { if (a.name < b.name) {
@@ -707,15 +712,29 @@ class IdmHotspot{
return 0; return 0;
}) })
let productVersionsMarkup = sortedVersions.reduce((acc, val, index)=>{
// if(index + 1 > MAX_VERSION_AMOUNT) return acc;
return `<div class="product__versions"> // if(index + 1 === MAX_VERSION_AMOUNT && prod.group.versions.length > MAX_VERSION_AMOUNT)
${sortedVersions.reduce((acc, val, index)=>{ // return acc + `<a class="product__version_more" href="${prod.link}" aria-label="${idmHotspotTextObject["Zobacz więcej"]}">
if(index + 1 > MAX_VERSION_AMOUNT) return acc; // +${(prod.group.versions.length - MAX_VERSION_AMOUNT) + 1}
// </a>`;
if(index + 1 === MAX_VERSION_AMOUNT && prod.group.versions.length > MAX_VERSION_AMOUNT) return acc + `<a class="product__version_more" href="${prod.link}" aria-label="${idmHotspotTextObject["Zobacz więcej"]}">+${(prod.group.versions.length - MAX_VERSION_AMOUNT) + 1}</a>`;
return acc + `<a class="product__version_single ${prod.id === val.id ? "--active" : ""}" href="${val.link}" data-product-id="${val.id}"><img class="product__version_img" src="${val.icon}" alt="${val.name}"/></a>`; return acc + `<a class="product__version_single ${prod.id === val.id ? "--active" : ""}" href="${val.link}" data-product-id="${val.id}"><img class="product__version_img" src="${val.icon}" alt="${val.name}"/></a>`;
},"")} },"");
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 `<div class="product__versions">
${productVersionsMarkup}
<a class="product__version_more" href="${prod.link}" aria-label="${idmHotspotTextObject["Zobacz więcej"]}">
+
<span class="--desktop-more">${desktopMoreLength > 0 ? desktopMoreLength : ""}</span>
<span class="--tablet-more">${tabletMoreLength > 0 ? tabletMoreLength : ""}</span>
<span class="--mobile-more">${mobileMoreLength > 0 ? mobileMoreLength : ""}</span>
</a>
</div>` </div>`
} }
@@ -1139,8 +1158,13 @@ class IdmHotspot{
// ======================================================== // ========================================================
// USTAWIANIE ZMIENNYCH CSS DLA RAMKI // USTAWIANIE ZMIENNYCH CSS DLA RAMKI
// ======================================================== // ========================================================
// Ustawia się je w dwa sposoby - jako zmienne css przypisywane do ramki + jako dodaktowy tag style
cssSetAllVariables(){ cssSetAllVariables(){
this.cssVariableVersionColumnCount(); this.cssVariableVersionColumnCount();
// css <style/>
this.cssInsertStyleTag();
} }
cssVariableVersionColumnCount(){ cssVariableVersionColumnCount(){
@@ -1154,6 +1178,34 @@ class IdmHotspot{
this.hotspotEl.style.setProperty(name, value); this.hotspotEl.style.setProperty(name, value);
} }
cssVersionColumnStyle(){
return `
@media (max-width: 756px){
#${this.hotspotEl.id}.hotspot__wrapper.idm__hotspot .product__version_single:nth-of-type(n + ${this.cssVariables?.version?.columnMobile}){
display: none;
}
}
@media (min-width: 757px) and (max-width: 978px){
#${this.hotspotEl.id}.hotspot__wrapper.idm__hotspot .product__version_single:nth-of-type(n + ${this.cssVariables?.version?.columnTablet}){
display: none;
}
}
@media (min-width: 979px){
#${this.hotspotEl.id}.hotspot__wrapper.idm__hotspot .product__version_single:nth-of-type(n + ${this.cssVariables?.version?.columnDesktop}){
display: none;
}
}
`
}
cssInsertStyleTag(){
this.hotspotEl.insertAdjacentHTML("beforeend", `
<style>
${this.cssVersionColumnStyle()}
</style>`)
}
// ======================================================== // ========================================================
// FUNKCJE POMOCNICZE // FUNKCJE POMOCNICZE
// ======================================================== // ========================================================
@@ -1208,7 +1260,7 @@ class IdmHotspot{
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: IDM_PRODUCT_GQL(`productId: ${newProdId}`), body: IDM_PRODUCT_GQL(`productId: ${newProdId}`, this.priceType),
}); });
const data = await res.json(); const data = await res.json();
@@ -1246,11 +1298,11 @@ class IdmHotspot{
return { return {
gross: { gross: {
value: priceNode?.getAttribute(`${name}`) !== null ? +priceNode.getAttribute(`${name}`) : undefined, value: priceNode?.getAttribute(`${name}`) !== null ? +priceNode.getAttribute(`${name}`) : undefined,
formatted: priceNode?.getAttribute(`${name}_formatted`) ?? undefined, formatted: priceNode?.getAttribute(`${name}_formatted`),
}, },
net: { net: {
value: priceNode?.getAttribute(`${name}_net`) !== null ? +priceNode.getAttribute(`${name}_net`) : undefined, 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: { price: {
gross: { gross: {
value: priceNode?.getAttribute("value") !== null ? +priceNode.getAttribute("value") : undefined, value: priceNode?.getAttribute("value") !== null ? +priceNode.getAttribute("value") : undefined,
formatted: priceNode?.getAttribute("price_formatted") ?? undefined, formatted: priceNode?.getAttribute("price_formatted"),
}, },
net: { net: {
value: priceNode?.getAttribute("price_net") !== null ? +priceNode.getAttribute("price_net") : undefined, 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, rebateCodeActive: priceNode?.getAttribute("rebate_code_active") === "y" ? true : false,
@@ -1314,21 +1366,21 @@ class IdmHotspot{
...this.xmlGetGrossNetPrices({priceNode, name: "unit_converted_price"}) ...this.xmlGetGrossNetPrices({priceNode, name: "unit_converted_price"})
}, },
// rebateNumber: {}, // rebateNumber: {},
lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date") ?? undefined, lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date"),
// advancePrice: {}, // advancePrice: {},
promotionDuration: { promotionDuration: {
promotionTill: { promotionTill: {
date: { date: {
date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2] ?? undefined, date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2],
month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1] ?? undefined, month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1],
year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0] ?? undefined, year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0],
// weekDay: "", // weekDay: "",
// formatted: "" // formatted: ""
}, },
time: { time: {
hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0] ?? undefined, hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0],
minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1] ?? undefined, minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1],
seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2] ?? undefined, seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2],
}, },
// timestamp: "" // timestamp: ""
}, },
@@ -1347,8 +1399,8 @@ class IdmHotspot{
node.querySelectorAll(":scope > trait").forEach(trait=>{ node.querySelectorAll(":scope > trait").forEach(trait=>{
const currParameter = awardedParameters.find(param=>param.id === trait.getAttribute("groupid")) || { const currParameter = awardedParameters.find(param=>param.id === trait.getAttribute("groupid")) || {
id: trait.getAttribute("groupid") ?? undefined, id: trait.getAttribute("groupid"),
name: trait.getAttribute("groupdescription") ?? undefined, name: trait.getAttribute("groupdescription"),
// description: "", // description: "",
values: [], values: [],
// contextValue: "", // contextValue: "",
@@ -1358,9 +1410,9 @@ class IdmHotspot{
} }
currParameter.values.push({ currParameter.values.push({
id: trait.getAttribute("traitid") ?? undefined, id: trait.getAttribute("traitid"),
name: trait.getAttribute("traitid") ?? undefined, name: trait.getAttribute("traitid"),
link: trait.getAttribute("link") ?? undefined, link: trait.getAttribute("link"),
// description: "", // description: "",
// search: { // search: {
// icon: "" // icon: ""
@@ -1389,7 +1441,8 @@ class IdmHotspot{
const data = []; const data = [];
allProducts.forEach(prod=>{ allProducts.forEach((prod, index)=>{
if(this.options.limit <= index) return;
// NODES // NODES
const priceNode = prod.querySelector(":scope >price"); const priceNode = prod.querySelector(":scope >price");
@@ -1415,21 +1468,21 @@ class IdmHotspot{
const enclosuresImages = []; const enclosuresImages = [];
prod.querySelectorAll(":scope > enclosures > images > enclosure").forEach(img=>{ prod.querySelectorAll(":scope > enclosures > images > enclosure").forEach(img=>{
enclosuresImages.push({ enclosuresImages.push({
position: img.getAttribute("position") ?? undefined, position: img.getAttribute("position"),
type: img.getAttribute("type") ?? undefined, type: img.getAttribute("type"),
typeSecond: img.getAttribute("type_second") ?? undefined, typeSecond: img.getAttribute("type_second"),
url: img.getAttribute("url") ?? undefined, url: img.getAttribute("url"),
urlSecond: img.getAttribute("url_second") ?? undefined, urlSecond: img.getAttribute("url_second"),
width: img.getAttribute("width") ?? undefined, width: img.getAttribute("width"),
height: img.getAttribute("height") ?? undefined, height: img.getAttribute("height"),
iconUrl: img.getAttribute("icon") ?? undefined, iconUrl: img.getAttribute("icon"),
iconUrlSecond: img.getAttribute("icon_second") ?? undefined, iconUrlSecond: img.getAttribute("icon_second"),
iconWidth: img.getAttribute("icon_width") ?? undefined, iconWidth: img.getAttribute("icon_width"),
iconHeight: img.getAttribute("icon_height") ?? undefined, iconHeight: img.getAttribute("icon_height"),
mediumUrl: img.getAttribute("medium") ?? undefined, mediumUrl: img.getAttribute("medium"),
mediumUrlSecond: img.getAttribute("medium_second") ?? undefined, mediumUrlSecond: img.getAttribute("medium_second"),
mediumWidth: img.getAttribute("medium_width") ?? undefined, mediumWidth: img.getAttribute("medium_width"),
mediumHeight: img.getAttribute("medium_height") ?? undefined, mediumHeight: img.getAttribute("medium_height"),
}) })
}) })
@@ -1442,11 +1495,11 @@ class IdmHotspot{
const weightNode = size.querySelector(":scope > weight"); const weightNode = size.querySelector(":scope > weight");
sizes.push({ sizes.push({
id: size?.getAttribute("type") ?? undefined, id: size?.getAttribute("type"),
name: size?.getAttribute("name") ?? undefined, name: size?.getAttribute("name"),
code: size?.getAttribute("code") ?? undefined, code: size?.getAttribute("code"),
codeProducer: size?.getAttribute("code_producer") ?? undefined, codeProducer: size?.getAttribute("code_producer"),
codeExtern: size?.getAttribute("code_extern") ?? undefined, codeExtern: size?.getAttribute("code_extern"),
amount: size?.getAttribute("amount") !== null ? +size.getAttribute("amount") : undefined, amount: size?.getAttribute("amount") !== null ? +size.getAttribute("amount") : undefined,
amount_mo: size?.getAttribute("amount_mo") !== null ? +size.getAttribute("amount_mo") : 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, 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, weight: weightNode?.getAttribute("g") !== null ? +weightNode.getAttribute("g") : undefined,
availability: { availability: {
visible: availabilityNode?.getAttribute("visible") === "y" ? true : false, visible: availabilityNode?.getAttribute("visible") === "y" ? true : false,
description: availabilityNode?.getAttribute("status_description") ?? undefined, description: availabilityNode?.getAttribute("status_description"),
status: availabilityNode?.getAttribute("status") ?? undefined, status: availabilityNode?.getAttribute("status"),
icon: availabilityNode?.getAttribute("status_gfx") ?? undefined, 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"), 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: "", // descriptionTel: "",
// iconTel: "", // iconTel: "",
}, },
@@ -1475,81 +1528,81 @@ class IdmHotspot{
versionsNode.querySelectorAll(":scope > version").forEach(ver=>{ versionsNode.querySelectorAll(":scope > version").forEach(ver=>{
versions.push({ versions.push({
id: ver?.getAttribute("id") !== null ? +ver?.getAttribute("id") : undefined, id: ver?.getAttribute("id") !== null ? +ver?.getAttribute("id") : undefined,
name: ver?.getAttribute("name") ?? undefined, name: ver?.getAttribute("name"),
icon: ver?.getAttribute("gfx") ?? undefined, icon: ver?.getAttribute("gfx"),
iconSecond: ver?.getAttribute("gfx_second") ?? undefined, iconSecond: ver?.getAttribute("gfx_second"),
iconSmall: ver?.getAttribute("gfx_small") ?? undefined, iconSmall: ver?.getAttribute("gfx_small"),
iconSmallSecond: ver?.getAttribute("gfx_small_second") ?? undefined, iconSmallSecond: ver?.getAttribute("gfx_small_second"),
productIcon: ver?.getAttribute("icon") ?? undefined, productIcon: ver?.getAttribute("icon"),
productIconSecond: ver?.getAttribute("icon_second") ?? undefined, productIconSecond: ver?.getAttribute("icon_second"),
productIconSmall: ver?.getAttribute("icon_small") ?? undefined, productIconSmall: ver?.getAttribute("icon_small"),
productIconSmallSecond: ver?.getAttribute("icon_small_second") ?? undefined, productIconSmallSecond: ver?.getAttribute("icon_small_second"),
link: ver?.getAttribute("link") ?? undefined, link: ver?.getAttribute("link"),
// parameterValues: [], // parameterValues: [],
}); });
}); });
// DATA // DATA
const typeParts = prod.getAttribute("product_type"); const typeParts = prod?.getAttribute("product_type").split("_");
data.push({ data.push({
id: prod?.getAttribute("id") !== null ? +prod?.getAttribute("id") : undefined, id: prod?.getAttribute("id") !== null ? +prod?.getAttribute("id") : undefined,
type: typeParts[1] === "item" ? typeParts[0] : typeParts[1], type: typeParts[1] === "item" ? typeParts[0] : typeParts[1],
code: prod?.getAttribute("code") ?? undefined, code: prod?.getAttribute("code"),
name: prod.querySelector(":scope > name")?.textContent ?? undefined, name: prod.querySelector(":scope > name")?.textContent,
versionName: prod.querySelector(":scope > versions")?.getAttribute("name") ?? undefined, versionName: prod.querySelector(":scope > versions")?.getAttribute("name"),
description: prod.querySelector(":scope > description")?.textContent ?? undefined, description: prod.querySelector(":scope > description")?.textContent,
// longDescription: prod.querySelector("vlongdescription")?.textContent ?? undefined, // longDescription: prod.querySelector("vlongdescription")?.textContent,
// longDescriptionSections: "", // longDescriptionSections: "",
link: prod?.getAttribute("link"), link: prod?.getAttribute("link"),
zones, zones,
icon: prod.querySelector(":scope > icon")?.textContent ?? undefined, icon: prod.querySelector(":scope > icon")?.textContent,
iconSecond: prod.querySelector(":scope > icon_second")?.textContent ?? undefined, iconSecond: prod.querySelector(":scope > icon_second")?.textContent,
iconSmall: prod.querySelector(":scope > icon_small")?.textContent ?? undefined, iconSmall: prod.querySelector(":scope > icon_small")?.textContent,
iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent ?? undefined, iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent,
price: this.xmlGetPriceFromNode(priceNode), price: this.xmlGetPriceFromNode(priceNode),
unit: { unit: {
id: sizesNode?.getAttribute("unit_id") ?? undefined, id: sizesNode?.getAttribute("unit_id"),
// name: "", name: sizesNode?.getAttribute("unit"),
singular: sizesNode?.getAttribute("unit_single") !== null ? +sizesNode?.getAttribute("unit_single") : undefined, singular: sizesNode?.getAttribute("unit_single"),
plural: sizesNode?.getAttribute("unit_plural") ?? undefined, plural: sizesNode?.getAttribute("unit_plural"),
fraction: sizesNode?.getAttribute("unit_fraction") ?? undefined, fraction: sizesNode?.getAttribute("unit_fraction"),
sellBy: sizesNode?.getAttribute("unit_sellby") !== null ? +sizesNode?.getAttribute("unit_sellby") : undefined, sellBy: sizesNode?.getAttribute("unit_sellby") !== null ? +sizesNode?.getAttribute("unit_sellby") : undefined,
precision: sizesNode?.getAttribute("unit_precision") !== null ? +sizesNode?.getAttribute("unit_precision") : 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: { producer: {
id: firmNode?.getAttribute("id") !== null ? +firmNode?.getAttribute("id") : undefined, id: firmNode?.getAttribute("id") !== null ? +firmNode?.getAttribute("id") : undefined,
name: firmNode?.getAttribute("name") ?? undefined, name: firmNode?.getAttribute("name"),
link: firmNode?.getAttribute("productslink") ?? undefined, link: firmNode?.getAttribute("productslink"),
searchIcons: { searchIcons: {
icon: firmNode?.getAttribute("icon") ?? undefined, icon: firmNode?.getAttribute("icon"),
}, },
// projectorIcons: {}, // projectorIcons: {},
}, },
category: { category: {
id: categoryNode?.getAttribute("id") !== null ? +categoryNode?.getAttribute("id") : undefined, id: categoryNode?.getAttribute("id") !== null ? +categoryNode?.getAttribute("id") : undefined,
name: categoryNode?.getAttribute("name") ?? undefined, name: categoryNode?.getAttribute("name"),
link: categoryNode?.getAttribute("productslink") ?? undefined link: categoryNode?.getAttribute("productslink")
}, },
group: { group: {
id: versionsNode?.getAttribute("id") !== null ? +versionsNode?.getAttribute("id") : undefined, 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, displayAll: versionsNode?.getAttribute("display_all") === "true" ? true : false,
link: versionsNode?.getAttribute("link") ?? undefined, link: versionsNode?.getAttribute("link"),
versions, versions,
groupParameters: this.xmlGetTraitsFromNode(versionsNode.querySelector(":scope > groupParameters")) groupParameters: this.xmlGetTraitsFromNode(versionsNode.querySelector(":scope > groupParameters"))
}, },
opinion: { opinion: {
rating: commentsNode?.getAttribute("avg") !== null ? +commentsNode?.getAttribute("avg") : undefined, rating: commentsNode?.getAttribute("avg") !== null ? +commentsNode?.getAttribute("avg") : undefined,
count: commentsNode?.getAttribute("count") !== null ? +commentsNode?.getAttribute("count") : undefined, count: commentsNode?.getAttribute("count") !== null ? +commentsNode?.getAttribute("count") : undefined,
link: commentsNode?.getAttribute("link") ?? undefined link: commentsNode?.getAttribute("link")
}, },
enclosuresImages, enclosuresImages,
// enclosuresAttachments: [], // enclosuresAttachments: [],
series: { series: {
id: seriesNode?.getAttribute("id") !== null ? +seriesNode?.getAttribute("id") : undefined, id: seriesNode?.getAttribute("id") !== null ? +seriesNode?.getAttribute("id") : undefined,
name: seriesNode?.getAttribute("name") ?? undefined, name: seriesNode?.getAttribute("name"),
link: seriesNode?.getAttribute("link") ?? undefined link: seriesNode?.getAttribute("link")
}, },
awardedParameters: this.xmlGetTraitsFromNode(prod.querySelector(":scope > traits")), awardedParameters: this.xmlGetTraitsFromNode(prod.querySelector(":scope > traits")),
// parameteresWithContext: [], // parameteresWithContext: [],
@@ -1602,7 +1655,7 @@ class IdmHotspot{
// Ustawienie wszystkich zmiennych CSS // Ustawienie wszystkich zmiennych CSS
this.cssSetAllVariables(); this.cssSetAllVariables();
// ca // funkcja wykonująca się po ramce rekomendacji
if(typeof this.options?.callbackFn === "function") this.options?.callbackFn(); if(typeof this.options?.callbackFn === "function") this.options?.callbackFn();
}catch(err){ }catch(err){
console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err); console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
@@ -1939,23 +1992,6 @@ document.addEventListener("DOMContentLoaded", ()=>{
// swiper: true, // 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){ async function idmPrepareHotspotObject(selectedContainerEl){
selectedContainerEl.classList.add("--init"); 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}; 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=>{ document.querySelectorAll(".hotspot__wrapper.idm__hotspot").forEach(currentHotspot=>{
idmPrepareHotspotObject(currentHotspot) idmPrepareHotspotObject(currentHotspot);
}) });

3
ramka.txt
View File

@@ -3,6 +3,9 @@
- wybór rozmiaru/wersji?? Wykluczenie powtarzających się wersji - wybór rozmiaru/wersji?? Wykluczenie powtarzających się wersji
wersja max 5 zdjęć i później + może???? wersja max 5 zdjęć i później + może????
limit dla produktów z linku
- zakres cen????????????? - zakres cen?????????????
- Wybór kolorystyczny??? - Wybór kolorystyczny???
- AAAAA - banner na hotspocie - AAAAA - banner na hotspocie

40
style.less
View File

@@ -1,5 +1,6 @@
.idm__hotspot .add_to_basket{ .idm__hotspot .add_to_basket, .idm__hotspot .add_to_basket__link{
display: flex; display: flex;
justify-content: center;
} }
.idm__hotspot .add_to_basket.--range{ .idm__hotspot .add_to_basket.--range{
flex-direction: column; flex-direction: column;
@@ -239,19 +240,33 @@
animation: idmPulseOpacity 3s infinite; animation: idmPulseOpacity 3s infinite;
} }
.idm__hotspot .product:has(.product__versions){ .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{ .product__versions{
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(var(--version-mobile-columns, 4), 1fr);
gap: 1rem; gap: 1rem;
z-index: 1; z-index: 1;
background: #fff; background: #fff;
clip-path: inset(0% 0 100% 0); clip-path: inset(0% 0 100% 0);
padding: 0.3rem 1rem;
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; 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); height: var(--idm-hotspot-version-height);
align-items: center; align-items: center;
@@ -267,6 +282,22 @@
align-items: center; align-items: center;
justify-content: 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{ &:hover{
border-color: #111; border-color: #111;
} }
@@ -275,6 +306,7 @@
box-shadow: 0 0 0 1px var(--primary-color, #111); box-shadow: 0 0 0 1px var(--primary-color, #111);
} }
} }
.product__version_more{ .product__version_more{
background: #f2f2f2; background: #f2f2f2;
} }