async function getTranslation() { const response = await fetch('https://www.technodom.kz/under/category_translation.json'); const translates = await response.json(); return translates; } const locale = localStorage.getItem('locale') ?? 'ru'; const bestOfferText = locale === 'ru' ? 'Лучшие предложения' : 'Үздік ұсыныстар'; const promise = getTranslation(); const translates = getTranslationList(promise); if (locale === 'kk') { document.querySelector('.categories__more-link-text').textContent = 'Көбірек көрсету'; document.querySelector('.categories__text').textContent = 'Барлық санат'; } function getTranslationList(resp) { const btns = document.querySelectorAll('.categories__list-item-name'); const translateList = []; resp.then((res)=> { for (let itm in res) { let obj = { cat: itm, ru: res[itm].ru, kk: res[itm].kk } translateList.push(obj); } btns.forEach(item => { if (locale !== 'ru') { let word = item.textContent; if (setTranslation(translateList, word)) { item.textContent = setTranslation(translateList, word); } } }); }); } function setTranslation(arr, word) { let result = arr.find((item) => { return item.ru === word; }); if(result) { return result.kk; } } function changeProductsTitles(skus) { fetch('https://tapi.technodom.kz/katalog/api/v1/products/titles', { headers: { 'Content-Language': 'kk-KK', }, method: 'POST', body: JSON.stringify({ skus, }) }).then(response => response.json()).then(data => { data.forEach(({ sku, name }) => { const productCard = document.querySelector(`[data-sku="${sku}"]`); productCard.querySelector('.product__title').textContent = name; changeInstallmentCaptions(productCard); }) }) } function changeInstallmentCaptions(cardElement) { const installmentCaption = cardElement.querySelector('.product__orange-caption'); const installmentMonthWord = cardElement.querySelector('.product__loan-month'); if (installmentCaption && installmentMonthWord) { installmentCaption.textContent = 'немесе '; installmentMonthWord.textContent = 'ай'; } } contentBtnBlog = document.querySelector('.content-btn__blog'); const productsState = { categories: [], selectedButton: null, reesCode: null, categoryId: null } function generateAndAppendNestedCategories(nestedCategories, categoryListItem) { const nestedCategoriesList = document.createElement("ul"); nestedCategoriesList.className = 'categories__nested-list' nestedCategories.forEach(category => { const nestedCategoryListItem = document.createElement("li"); nestedCategoryListItem.className = "categories__nested-list-item" const categoryBtn = document.createElement("button"); categoryBtn.className = 'categories__btn'; categoryBtn.setAttribute("data-key", category.external_id); const categoryListItemImg = document.createElement("img"); categoryListItemImg.className = 'categories__list-item-img'; categoryListItemImg.src = `https://new.technodom.kz/under/category-images/${category.external_id}.png`; categoryListItemImg.width = 24; categoryListItemImg.height = 24; categoryBtn.append(categoryListItemImg); const categoryListItemName = document.createElement("span"); categoryListItemName.className = 'categories__list-item-name'; categoryBtn.append(categoryListItemName); categoryListItemName.textContent = category.name; nestedCategoryListItem.append(categoryBtn); nestedCategoriesList.append(nestedCategoryListItem) categoryListItem.append(nestedCategoriesList) }) } function getGoodsFromRees(code, reesObject = {}) { const categoriesMoreLink = document.querySelector('.categories__more-link'); const categoriesMoreLinkContainer = document.querySelector( '.categories__more-link-container' ); // eslint-disable-next-line no-undef r46( 'recommend', code, reesObject, function (response) { console.log(response) if (response.recommends.length < 16) { categoriesMoreLink.style.display = 'none'; categoriesMoreLinkContainer.style.display = 'none'; } else { categoriesMoreLink.style.display = 'block'; categoriesMoreLinkContainer.style.display = 'block'; } if (!response.html) { document.querySelector( '#products-tree' ).innerHTML = `

Извините, но товары в этой категории закончились.

`; categoriesMoreLinkContainer.style.display = 'none'; return; } categoriesMoreLinkContainer.style.display = 'block'; categoriesMoreLink.dataset.page > 1 ? (document.querySelector('#products-tree').innerHTML += response.html) : (document.querySelector('#products-tree').innerHTML = response.html); if (locale === 'kk') { changeProductsTitles(response.recommends); } }, function (error) { console.error(error); } ); } function generateTreeButtons(productsState) { const bestOffers = `

` document.querySelector('.buttons__buttons').insertAdjacentHTML('afterbegin', bestOffers); if (productsState.categories.length > 0) { productsState.categories.forEach(category => { const categoryListItem = document.createElement("li"); categoryListItem.className = "categories__list-item"; const categoryListItemBtn = document.createElement("button"); categoryListItemBtn.className = 'categories__list-item-button'; const categoryListItemImg = document.createElement("img"); categoryListItemImg.className = 'categories__list-item-img'; categoryListItemImg.src = `https://new.technodom.kz/under/category-images/${category.dataAttribute}.png`; categoryListItemImg.width = 24; categoryListItemImg.height = 24; categoryListItemBtn.append(categoryListItemImg); const categoryListItemName = document.createElement("span"); categoryListItemName.className = 'categories__list-item-name'; categoryListItemBtn.append(categoryListItemName); categoryListItemName.textContent = category.name; categoryListItemBtn.addEventListener("click", e => { if (!e.currentTarget.nextElementSibling.classList.contains("categories__nested-list--active") && !e.currentTarget.classList.contains("categories__list-item-button--active")) { document.querySelectorAll('.categories__nested-list').forEach(list => list.classList.remove("categories__nested-list--active")); document.querySelectorAll('.categories__list-item-button').forEach(btn => btn.classList.remove("categories__list-item-button--active")); e.currentTarget.classList.add("categories__list-item-button--active"); e.currentTarget.nextElementSibling.classList.add("categories__nested-list--active"); } else { e.currentTarget.classList.remove("categories__list-item-button--active"); e.currentTarget.nextElementSibling.classList.remove("categories__nested-list--active"); } }) categoryListItem.append(categoryListItemBtn); //Если у родительской категории есть дочерние/вложенные категории, то вызываем функцию для генерации их разметки if (category.nestedCategories) { generateAndAppendNestedCategories(category.nestedCategories, categoryListItem); } document.querySelector('.buttons__buttons').append(categoryListItem); }); productsRequest(document.querySelector('.categories__btn').dataset.key) // createReesObject(document.querySelector('.categories__btn').dataset.key, productsState); productsState.selectedButton = document.querySelector('.categories__btn'); productsState.selectedButton.classList.add("categories__btn--active"); getTranslationList(promise); const categoriesButtons = document.querySelectorAll('.categories__btn'); categoriesButtons.forEach(item => { item.addEventListener("click", function (e) { let target = e.currentTarget; highlightButton(target, productsState); }) }) } } function fetchToJson(productsState) { //Получаем список родительских категорий из json-файла, создаём объект каждой категории и пушим в массив categories fetch("https://www.technodom.kz/under/feed/with_discount.json") .then((response) => response.json()) .then((data) => { data.forEach(category => { const obj = { name: category.name, dataAttribute: category.external_id, } if (category.children.length > 0) { obj.nestedCategories = [...category.children] } productsState.categories.push(obj); }) generateTreeButtons(productsState) }); } function productsRequest(reesParam) { const productSetting = {}; let reesRecommend = ''; if (reesParam === 'best-offer') { reesRecommend = '5318a7a835f59712f57a46c43c24027b'; } else { reesRecommend = '2c67ed3652aee4ce883c8240d39d23ca'; productSetting.category = reesParam; } console.log(productSetting) window.p69( {code: reesRecommend, ...productSetting}, document.querySelector('#r46reco'), (res) => console.log(res), (err) => console.log(err) ) } // function createReesObject(categoryBtnDataset, productsState, pageCount = 1) { // const locationId = JSON.parse(localStorage.getItem("cityMagentoId"))?.data; // productsState.categoryId = categoryBtnDataset; // const reesObject = { // categories: [], // items: [], // page: pageCount, // locations: [locationId], // }; // if (categoryBtnDataset === 'best-offer') { // productsState.reesCode = '0d64e028be504b3ba1eb4765c3a9c42c'; // } else { // reesObject.categories = [categoryBtnDataset]; // productsState.reesCode = 'b409080ec72e7011b690158751af155c'; // } // getGoodsFromRees(productsState.reesCode, reesObject); // } function highlightButton(target, productsState) { if (target.className === "buttons__top-close-btn" || target.parentElement.className === "buttons__top-close-btn") { console.log(target) return } const categoriesMoreLink = document.querySelector('.categories__more-link'); const categoriesButtonsContainer = document.querySelector( '.categories__buttons-container' ); const categoriesOverlay = document.querySelector('.categories__overlay'); if (productsState.selectedButton) { productsState.selectedButton.classList.remove("categories__btn--active"); } productsState.selectedButton = target; categoriesMoreLink.dataset.page = '1'; productsRequest(productsState.selectedButton.dataset.key) // createReesObject(productsState.selectedButton.dataset.key, productsState); productsState.selectedButton.classList.add('categories__btn--active'); categoriesButtonsContainer.scrollIntoView({ block: 'start', behavior: 'smooth', }); if (window.screen.width < 780) { categoriesOverlay.classList.add('categories__overlay--hidden'); document.documentElement.style.overflowY = 'auto'; categoriesButtonsContainer.classList.add('buttons--hidden'); } document.querySelector('.categories__burger-btn').scrollIntoView({ block: 'start', behavior: 'smooth', }); } fetchToJson(productsState) const categoriesButtonsContainer = document.querySelector('.categories__buttons-container'); const categoriesOverlay = document.querySelector('.categories__overlay'); const categoriesButtonsCloseBtn = document.querySelector('.buttons__top-close-btn'); const categoriesListItems = document.querySelectorAll('.categories__list-item'); const categoriesMoreLinkContainer = document.querySelector( '.categories__more-link-container' ); const categoriesMoreLink = document.querySelector('.categories__more-link'); const burgerBtns = document.querySelectorAll('.categories__burger-btn'); // categoriesButtonsContainer.addEventListener("click", function (e) { // let target = e.target; // if (target.className === "categories__list-item-img" || target.className === "categories__list-item-name") { // target = e.target.parentElement; // } // highlightButton(target, productsState); // }) Array.from(burgerBtns).forEach(burgerBtn => { burgerBtn.addEventListener("click", function () { categoriesOverlay.classList.remove("categories__overlay--hidden"); document.documentElement.style.overflowY = "hidden"; categoriesButtonsContainer.classList.remove("buttons--hidden"); }) }) categoriesButtonsCloseBtn.addEventListener("click", () => { categoriesOverlay.classList.add("categories__overlay--hidden"); document.documentElement.style.overflowY = "auto"; categoriesButtonsContainer.classList.add("buttons--hidden"); }) categoriesOverlay.addEventListener("click", (e) => { if (e.target === categoriesOverlay) { categoriesOverlay.classList.add("categories__overlay--hidden") document.documentElement.style.overflowY = "auto"; categoriesButtonsContainer.classList.add("buttons--hidden"); } }) categoriesMoreLink.addEventListener('click', function () { const next = +this.dataset.page + 1; this.dataset.page = next.toString(); productsRequest(productsState.selectedButton.dataset.key) // createReesObject(productsState.selectedButton.dataset.key, productsState, next); });

Категории