(function dataChecker() { let promoStatus = document.querySelector('.promo') const now = new Date().getTime(); if (now > new Date(promoStatus.dataset.time)) { promoStatus.innerHTML += ``; } })(); const store = { initialProducts: [], // первая партия товаров при клике на ту или иную категорию productsLeft: [], // остаток товаров при клике на ту или иную категорию (будет обновляться при "показать ещё") categoriesArr: [ { name: { ru: 'Лучшие предложения', kk: 'Үздік ұсыныстар', }, slug: 'custom', subcategories: [], items: [], } ], // массив категорий, которые будут отрисовываться в панели слева translation: null, // перевод категорий locale: localStorage.getItem('locale'), // выбранный язык на странице locationId: JSON.parse(localStorage.getItem('cityMagentoId'))?.data || '10', } const PRODUCTS_DIVIDE_COUNT = 32; const DISCOUNT_RANGES = encodeURIComponent(JSON.stringify(['0-20', '21-40', '41-60', '61-80', '81-100'])); //DOM-элементы const categories = document.querySelector('#rcategories'); const list = categories.querySelector('#categories-list'); const burgerBtn = categories.querySelector('.categories__burger-btn'); const productsContainer = categories.querySelector('.products'); const categoriesPanel = categories.querySelector('.categories__panel'); const closeButton = categories.querySelector('.panel__close-btn'); const overlay = categories.querySelector('.overlay'); const showMoreBtn = categories.querySelector('.categories__show-more-btn'); ////////////////////////// let selectedButton = null; // переменная, где будет храниться текущая кнопка выбранной категории // Получаем перевод const getCategoriesTranslation = async () => { const response = await fetch('https://www.technodom.kz/under/category_translation.json'); return await response.json(); } // Получаем данные по категориям из JSON-файла const getCategories = async () => { const response = await fetch('https://www.technodom.kz/under/feed/with_discount.json'); return await response.json(); } Promise.all([getCategoriesTranslation(), getCategories()]).then(responses => { if (responses.length > 0) { const translation = responses[0]; const categories = responses[1]; store.translation = translation; createDataStructure(categories); } }).catch(error => console.log(error)); // Создаём нужную/удобную нам структуру данных с рус/каз заголовком и slug-ом const createDataStructure = (data) => { const { translation, categoriesArr } = store; data.forEach(category => { const obj = { name: { ru: category.name, kk: translation[category.external_id].kk || category.name, }, slug: category.external_id, }; if (category.children.length > 0) { obj.subcategories = category.children.map(subcategory => { return { name: { ru: subcategory.name, kk: translation[subcategory.external_id]?.kk || subcategory.name, }, slug: subcategory.external_id, } }); } categoriesArr.push(obj); }) generateListItems(); } // Генерируем пункты списка в панели слева const generateListItems = () => { const { categoriesArr, locale } = store; if (categoriesArr.length > 0) { categoriesArr.forEach((category) => { const listItem = document.createElement('li'); const isCustom = category.slug === 'custom'; listItem.className = 'list__item'; listItem.innerHTML = ` `; list.append(listItem); if (category.subcategories.length > 0) { generateSubCategories(category.subcategories, listItem); } }) handleInitialSetup(); } } // Генерируем вложенные категории, по клику на которые как раз будут приходить товары const generateSubCategories = (subcategories, listItem) => { const subList = document.createElement('ul'); subList.className = 'sublist sublist_hidden'; // subList.hidden = true; subcategories.forEach((subcategory) => { const listItem = document.createElement('li'); listItem.className = 'sublist__item'; listItem.innerHTML = ` `; subList.append(listItem); }) listItem.append(subList); } // Настраиваем первую активную кнопку. Если это "Лучшие предложения" или "Популярное", то вызываем handleCustomCategory. Если нет, то вызываем findAllProductsInCategory const handleInitialSetup = () => { selectedButton = categories.querySelector('.list__button[data-key="custom"]'); selectedButton.classList.add('button_active'); const slug = selectedButton.dataset.key; if (slug === 'custom') { handleCustomCategory(slug); } else { findAllProductsInCategory(slug); } } //делаем РАСКРЫВАЮЩИЙСЯ пункт списка активным при клике, сворачиваем все ранее раскрытые пункты const toggleListItem = ({ target }) => { if (target.closest('.list__item') && !target.closest('.sublist')) { const listItem = target.closest('.list__item'); if (listItem) { const allListItems = document.querySelectorAll('.list__item'); allListItems.forEach((li) => { if (li !== listItem) { li.classList.remove('list__item_active'); } }); listItem.classList.toggle('list__item_active'); const subList = listItem.querySelector('.sublist'); if (subList) { const allSubLists = document.querySelectorAll('.sublist'); allSubLists.forEach((sl) => { if (sl !== subList) { sl.classList.add('sublist_hidden'); if (sl.style.maxHeight) { sl.style.maxHeight = null; } } }); subList.style.maxHeight = subList.style.maxHeight ? null : subList.scrollHeight + 'px'; subList.classList.toggle('sublist_hidden'); } } } }; //по клику на обычную категорию вызываем finaAllProductsInCategory, по клику на кастомную - handleCustomCategory const handleClick = ({ target }) => { if (target.closest('.sublist__btn') || target.closest('.button')?.dataset.key) { const button = target.closest('.button') if (selectedButton) { selectedButton.classList.remove('button_active'); } selectedButton = button; selectedButton.classList.add('button_active'); const slug = button.dataset.key; if (slug) { toggleCategoriesPanel(); document.querySelector('.products').scrollIntoView({ behavior: 'smooth', }) if (slug !== 'custom') { findAllProductsInCategory(slug); } else { handleCustomCategory(slug); } } } } //имея slug категории, обращаемся в Rees, находим ВСЕ товары этой категории const findAllProductsInCategory = (slug) => { fetch(`https://api.r46.technodom.kz/products?categories=${slug}&filters={"Процент скидки":${DISCOUNT_RANGES}}&limit=1000&shop_id=74fd3b613553b97107bc4502752749`) .then(response => response.json()) .then(data => { if (data.products.length > 0) { setProducts(data.products); } }) } //из ответа Rees-а получаем человеческий массив веб-кодов, одну часть ставим на первую отрисовку, а вторую - на последующие отрисовки //тут же запрашиваем первую часть товаров const setProducts = (products) => { const mappedProducts = products.map(product => +product.barcode); store.initialProducts = mappedProducts.slice(0, PRODUCTS_DIVIDE_COUNT); store.productsLeft = mappedProducts.slice(PRODUCTS_DIVIDE_COUNT); getProductsFromRees(store.initialProducts); } //универсальная функция получения товаров из Rees-а const getProductsFromRees = (items, isInitial = true, reesCode = 'e75cb4f36c96deb2432c111c39eb05d4', slug) => { r46('recommend', reesCode, { locations: [store.locationId], items: [items], }, function (response) { handleReesResponse(response, isInitial, slug); }, function (error) { console.log(error); }); } //функция, отвечающая за кастомную категорию ("Популярное"/"Лучшие предложения") const handleCustomCategory = (slug) => { const customCategory = store.categoriesArr.find(category => category.slug === slug); if (customCategory?.items?.length > 0) { store.initialProducts = customCategory.items.slice(0, PRODUCTS_DIVIDE_COUNT); store.productsLeft = customCategory.items.slice(PRODUCTS_DIVIDE_COUNT); getProductsFromRees(store.initialProducts, true); } else { getProductsFromRees([], true, 'db50c130fd17db6c2043f1a27c58f700', slug); showMoreBtn.classList.add('categories__show-more-btn_hidden'); } } //обрабатываем ответ от Rees-а //isInitial - параметр, который говорит о том, товары приходят в первый раз или последующий const handleReesResponse = (response, isInitial, slug) => { if (!response.html) { if (isInitial) { showMoreBtn.classList.add('categories__show-more-btn_hidden'); productsContainer.innerHTML = `

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

`; } else { showMoreBtn.classList.add('categories__show-more-btn_hidden'); } } else { if (slug !== 'custom') { showMoreBtn.classList.remove('categories__show-more-btn_hidden'); } if (isInitial) { productsContainer.innerHTML = response.html; } else { productsContainer.innerHTML += response.html; } } } //функция, которая отвечает за пагинацию товаров const handleMoreProducts = () => { const products = store.productsLeft.slice(0, PRODUCTS_DIVIDE_COUNT); store.productsLeft = store.productsLeft.slice(PRODUCTS_DIVIDE_COUNT); console.log(store); getProductsFromRees(products, false); } //DOM-взаимодействия const toggleCategoriesPanel = () => { categoriesPanel.classList.toggle('categories__panel_hidden'); toggleOverlay(); } const toggleOverlay = () => { overlay.classList.toggle('overlay_hidden'); } list.addEventListener('click', toggleListItem); categories.addEventListener('click', handleClick); burgerBtn.addEventListener('click', toggleCategoriesPanel) closeButton.addEventListener('click', toggleCategoriesPanel) overlay.addEventListener('click', toggleCategoriesPanel) showMoreBtn.addEventListener('click', handleMoreProducts) const locale = localStorage.getItem('locale'); function changeProductsTitles(skus) { fetch('https://api.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 = 'ай'; } }

Получай кешбэк на 5000 тенге с Home Credit Bank!

Категории: