{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
productsuid: [
Number(currentUid)
],
getoptions: true,
flag_root: 'withroot'
})
}
);
if (!response.ok) {
throw new Error(
'getproductsbyuid HTTP ' +
response.status
);
}
const data =
await response.json();
if (
!Array.isArray(data.products) ||
!data.products.length
) {
throw new Error(
'Текущий товар не получен из Tilda'
);
}
return data.products[0];
}
/*
* =========================================
* ПОЛУЧАЕМ ID РАЗДЕЛА ТОВАРА
* =========================================
*/
function getProductPartUid(product) {
if (!product.partuids) {
return null;
}
try {
const parts =
typeof product.partuids === 'string'
? JSON.parse(product.partuids)
: product.partuids;
if (
Array.isArray(parts) &&
parts.length
) {
return String(parts[0]);
}
} catch (error) {
console.error(
'[Model Colors] Ошибка partuids',
error
);
}
return null;
}
/*
* =========================================
* ЗАГРУЖАЕМ ТОВАРЫ ТОЛЬКО НУЖНОГО РАЗДЕЛА
* =========================================
*/
async function getSectionProducts(partUid) {
const url =
API_BASE +
'getproductslist/' +
'?storepartuid=' +
encodeURIComponent(partUid) +
'&recid=' +
encodeURIComponent(CATALOG_RECID) +
'&getallparts=true' +
'&getoptions=true' +
'&slice=1' +
'&size=100';
const response =
await fetch(url);
if (!response.ok) {
throw new Error(
'getproductslist HTTP ' +
response.status
);
}
const data =
await response.json();
if (!Array.isArray(data.products)) {
throw new Error(
'В разделе отсутствует products'
);
}
return data.products;
}
/*
* =========================================
* СТРОИМ ПЕРЕКЛЮЧАТЕЛЬ ЦВЕТОВ
* =========================================
*/
async function initModelColors() {
const template =
document.querySelector(
'.uc-product .model-color-template'
);
if (!template) {
throw new Error(
'Не найден .model-color-template'
);
}
const currentUid =
document.querySelector('#allrecords')
?.dataset
?.storeProductuid;
if (!currentUid) {
throw new Error(
'Не удалось определить UID текущего товара'
);
}
/*
* 1. Получаем текущий товар
*/
const currentProduct =
await getCurrentProduct(currentUid);
/*
* 2. Получаем его модель
*/
const currentModel =
getCharacteristic(
currentProduct,
'Модель'
);
if (!currentModel) {
throw new Error(
'У товара не заполнена характеристика "Модель"'
);
}
/*
* 3. Получаем раздел товара
*/
const partUid =
getProductPartUid(
currentProduct
);
if (!partUid) {
throw new Error(
'Не удалось определить раздел товара'
);
}
/*
* 4. Загружаем только этот раздел
*/
const sectionProducts =
await getSectionProducts(
partUid
);
/*
* 5. Оставляем товары только нашей модели
*/
const modelProducts =
sectionProducts.filter(
function (product) {
const model =
getCharacteristic(
product,
'Модель'
);
return (
model &&
String(model)
.trim()
.toLowerCase() ===
String(currentModel)
.trim()
.toLowerCase()
);
}
);
if (!modelProducts.length) {
throw new Error(
'Не найдены товары модели ' +
currentModel
);
}
/*
* 6. Создаём цвета
*/
const parent =
template.parentElement;
parent
.querySelectorAll(
'.model-color-item'
)
.forEach(function (element) {
element.remove();
});
modelProducts.forEach(
function (product) {
const colorName =
getProductColor(product);
if (
!colorName ||
!product.url
) {
return;
}
const swatch =
template.cloneNode(true);
swatch.classList.remove(
'model-color-template'
);
swatch.classList.add(
'model-color-item'
);
swatch.style.display = '';
/*
* ВАЖНО:
* красим только .tn-atom.
* Внешний DIV не красим,
* иначе снова появятся
* квадратные углы.
*/
const shape =
swatch.querySelector(
'.tn-atom'
);
if (shape) {
shape.style.setProperty(
'background-color',
getColorHex(colorName),
'important'
);
}
swatch.style.cursor =
'pointer';
swatch.setAttribute(
'title',
colorName
);
swatch.setAttribute(
'aria-label',
colorName
);
const active =
String(product.uid) ===
String(currentUid);
if (active) {
swatch.style.outline =
'2px solid #1c1c1c';
swatch.style.outlineOffset =
'3px';
swatch.style.cursor =
'default';
} else {
swatch.style.outline = '';
swatch.addEventListener(
'click',
function () {
window.location.href =
product.url;
}
);
}
parent.appendChild(
swatch
);
});
/*
* Скрываем исходный Rectangle-шаблон
*/
template.style.display =
'none';
console.log(
'[Model Colors]',
{
uid: currentUid,
model: currentModel,
partUid: partUid,
colors: modelProducts.map(
function (product) {
return {
uid: product.uid,
title: product.title,
color:
getProductColor(product),
url: product.url
};
}
)
}
);
}
/*
* =========================================
* ЖДЁМ ГОТОВНОСТИ TILDA
* =========================================
*/
function waitForModelColors(
attempt = 0
) {
const template =
document.querySelector(
'.uc-product .model-color-template'
);
const currentUid =
document.querySelector(
'#allrecords'
)
?.dataset
?.storeProductuid;
if (
template &&
currentUid
) {
initModelColors()
.catch(function (error) {
template.style.display =
'none';
console.error(
'[Model Colors]',
error
);
});
return;
}
/*
* Максимум 15 секунд ожидания
*/
if (attempt >= 150) {
console.error(
'[Model Colors] Не дождались данных',
{
template: !!template,
currentUid:
currentUid || null
}
);
return;
}
setTimeout(
function () {
waitForModelColors(
attempt + 1
);
},
100
);
}
/*
* =========================================
* ЗАПУСК
* =========================================
*/
if (
document.readyState ===
'loading'
) {
document.addEventListener(
'DOMContentLoaded',
function () {
waitForModelColors();
}
);
} else {
waitForModelColors();
}
})();