(function initPromoSlider() { // ------------------------------------------------------------------- // 1. ДАННЫЕ // Каждый слайд хранит ДВЕ версии — русскую (ru) и казахскую (kk). // В каждой: широкое фото для десктопа (desktop), узкое для телефона // (mobile) и описание (alt) для доступности. // // ВАЖНО: заполните обе ветки (ru и kk) у ВСЕХ слайдов реальными // именами файлов. Если оставить API + "" — на этом языке будет // битое фото. // ------------------------------------------------------------------- const API = "https://api.technodom.kz/f3/api/v1/images/"; // Определяем язык ОДИН раз. "kk" — казахский, любое другое — русский. const isKazakh = localStorage.getItem("locale") === "kk"; // Двухъязычный массив: обе версии рядом const SLIDES_ALL = [ { ru: { alt: "iPhone — слайд 1", desktop: API + "4304c894d0a29671c39da50a3666c9ee-1318x400.png", mobile: API + "4ee304b7973f300ac3df8a87636a024e-580x300.png" }, kk: { alt: "iPhone — слайд 1", desktop: API + "c29f200333769c4008aaf3df921c34bf-1318x400-1.png", mobile: API + "8b458761a101fb28335cbb302e4ae460-580x300-1.png" }, }, { ru: { alt: "iPhone — слайд 2", desktop: API + "8511e0d8abe9a4bc2b6a757870b8f3f4-1318x400-2.png", mobile: API + "6e1c3ed4586de1da86b48d6e34df8c0e-580x300-2.png" }, kk: { alt: "iPhone — слайд 2", desktop: API + "83f7608e5e57c09d3eb19299a06a5db2-1318x400-4.png", mobile: API + "66b99a79dfb2cad26d5ac548c27faa29-580x300-4.png" }, }, { ru: { alt: "iPhone — слайд 3", desktop: API + "9c7779d9fd4311ac2907b3f72133af29-1318x400-3.png", mobile: API + "bd622e48713702c6d8b81703f02014cf-580x300-3.png" }, kk: { alt: "iPhone — слайд 3", desktop: API + "d391fcf76fa0fe7a4da0d7ef5823b9e7-1318x400-5.png", mobile: API + "5cfff77ba60a59ff00352d81a3a21b8c-580x300-5.png" }, }, ]; // Выбираем язык ОДИН раз для всего массива. Дальше SLIDES — уже // одноязычный, с полями alt/desktop/mobile на верхнем уровне, // поэтому buildSlide трогать не нужно. const SLIDES = SLIDES_ALL.map((item) => (isKazakh ? item.kk : item.ru)); const MOBILE_QUERY = "(max-width: 600px)"; // при какой ширине берём mobile-фото // ------------------------------------------------------------------- // 2. НАХОДИМ КОНТЕЙНЕР // Если блока нет — тихо выходим, чтобы скрипт не падал на других страницах. // ------------------------------------------------------------------- const slider = document.querySelector("[data-slider]"); if (!slider) return; const total = SLIDES.length; // ------------------------------------------------------------------- // 3. СОСТОЯНИЕ // Здесь слайдер хранит свою «память»: что показывает сейчас // и что происходит с пользователем (листает, тянет и т.д.). // ------------------------------------------------------------------- // --- Группа 1: значения, которые меняются во время работы --- // Какой слайд показываем прямо сейчас. 0 — это первый слайд. let currentIndex = 0; // Сюда положим таймер автопрокрутки, чтобы потом его можно было выключить. // Пока таймера нет — держим null (то есть «пусто»). let autoTimer = null; // Признак: тянет ли пользователь слайд пальцем/мышью прямо сейчас. let isDragging = false; // Координата, с которой начался свайп. Нужна, чтобы понять, // в какую сторону и насколько сильно потянули. let dragStartX = 0; // --- Группа 2: ссылки на элементы страницы --- // Пока пустые. Их заполнит функция buildSlider(), когда построит разметку. let track; // лента

let dotElements; // список кнопок-точек внизу // --- Группа 3: настройка доступности (задаётся один раз) --- // Проверяем: включил ли пользователь в системе режим «меньше анимации». // Если да — ниже мы не будем автоматически листать слайды. const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // ------------------------------------------------------------------- // 4. ПОСТРОЕНИЕ РАЗМЕТКИ (безопасно, через createElement) // // Все пути к фото берутся из НАШЕГО массива и вставляются через // setAttribute — как данные, не как исполняемый HTML. Мы не используем // innerHTML со склейкой строк, поэтому XSS через содержимое исключён. // ------------------------------------------------------------------- // Один слайд:

— их РОВНО столько, сколько слайдов (баг с лишними точками ушёл) const dotsNav = document.createElement("nav"); dotsNav.className = "promo__slider-dots"; dotsNav.setAttribute("aria-label", "Навигация по слайдам"); dotElements = SLIDES.map((_, i) => buildDot(i)); dotElements.forEach((dot) => dotsNav.appendChild(dot)); // Делаем контейнер каруселью и наполняем его slider.setAttribute("aria-roledescription", "карусель"); slider.setAttribute("aria-label", "Акция iPhone"); slider.setAttribute("lang", isKazakh ? "kk" : "ru"); // язык для скринридера slider.append(track, prevBtn, nextBtn, dotsNav); } // ------------------------------------------------------------------- // 5. ОТОБРАЖЕНИЕ СОСТОЯНИЯ // render() — единственное место, где меняется вид. // ------------------------------------------------------------------- function render() { track.style.transform = "translateX(-" + (currentIndex * 100) + "%)"; dotElements.forEach((dot, i) => { const active = i === currentIndex; dot.classList.toggle("is-active", active); // для существующего CSS dot.setAttribute("aria-current", active ? "true" : "false"); }); slideElements.forEach((li, i) => { li.setAttribute("aria-hidden", i !== currentIndex); // прячем невидимое от читалки }); } function goTo(index) { currentIndex = (index + total) % total; // зацикливание (как в оригинале) render(); } function next() { goTo(currentIndex + 1); } function prev() { goTo(currentIndex - 1); } // ------------------------------------------------------------------- // 6. АВТОПРОКРУТКА // restartAuto() перезапускает таймер после ручного действия, чтобы // слайд не «убежал» сразу после клика. // ------------------------------------------------------------------- function startAuto() { if (prefersReducedMotion) return; // уважаем настройку доступности clearInterval(autoTimer); autoTimer = setInterval(next, 4000); } function stopAuto() { clearInterval(autoTimer); } function restartAuto() { stopAuto(); startAuto(); } // ------------------------------------------------------------------- // 7. КЛАВИАТУРА: листаем стрелками, когда фокус внутри слайдера // ------------------------------------------------------------------- slider.addEventListener("keydown", (e) => { if (e.key === "ArrowLeft") { prev(); restartAuto(); } if (e.key === "ArrowRight") { next(); restartAuto(); } }); // ------------------------------------------------------------------- // 8. СВАЙП / ПЕРЕТАСКИВАНИЕ (сохранено из оригинала) // ------------------------------------------------------------------- function onDragStart(x) { isDragging = true; dragStartX = x; stopAuto(); } function onDragEnd(x) { if (!isDragging) return; isDragging = false; const diff = dragStartX - x; if (Math.abs(diff) > 40) { diff > 0 ? next() : prev(); } // порог 40px startAuto(); } slider.addEventListener("mousedown", (e) => onDragStart(e.clientX)); slider.addEventListener("mouseup", (e) => onDragEnd(e.clientX)); slider.addEventListener("mouseleave", (e) => { if (isDragging) onDragEnd(e.clientX); }); slider.addEventListener("touchstart", (e) => onDragStart(e.touches[0].clientX), { passive: true }); slider.addEventListener("touchend", (e) => onDragEnd(e.changedTouches[0].clientX)); // Пауза автопрокрутки при наведении и при фокусе с клавиатуры slider.addEventListener("mouseenter", stopAuto); slider.addEventListener("mouseleave", startAuto); slider.addEventListener("focusin", stopAuto); slider.addEventListener("focusout", startAuto); // ------------------------------------------------------------------- // 9. ЗАПУСК // ------------------------------------------------------------------- buildSlider(); render(); startAuto(); })(); (function initReveal() { const els = document.querySelectorAll('.promo__reveal'); if (!els.length) return; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1 }); els.forEach(el => observer.observe(el)); })(); 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(r => r.json()) .then(data => { data.forEach(({ sku, name }) => { const card = document.querySelector(`[data-sku="${sku}"]`); if (!card) return; card.querySelector('.product__title').textContent = name; changeInstallmentCaptions(card); }); }); } function changeInstallmentCaptions(cardElement) { const installmentCaption = cardElement.querySelector('.product__orange-caption'); const installmentMonthWord = cardElement.querySelector('.product__loan-month'); const buyBtn = cardElement.querySelector('.product__buy-button'); if (buyBtn) buyBtn.textContent = 'Сатып алу'; if (installmentCaption && installmentMonthWord) { installmentCaption.textContent = 'немесе '; installmentMonthWord.textContent = 'ай'; } } r46("recommend", "f5dbf43e44852c2f0c64743ce2d982c5", { locations: [JSON.parse(localStorage.getItem('cityMagentoId'))?.data], items: [274375, 274372, 284603, 284605, 284606, 284607, 293857, 293861, 293859, 293876, 293877, 293878, 293880, 293881, 293883, 293883, 293886], }, function (response) { console.log(response); document.querySelector('#r46reco').innerHTML = response.html; if (locale === 'kk') changeProductsTitles(response.recommends); }, function (error) { console.error(error); });

Өзіңіздің iPhone-ыңызды Technodom-нан таңдап алыңыз

Товары, участвующие в акции: