${specs.map(spec => `
${spec.label} ${spec.value}
`).join('')}
`
: '';
// Формирование бейджа
const badgeHtml = badge
? `
${badge}
`
: '';
// Формирование категории
const categoryHtml = category
? `
${category}
`
: '';
return `
${badgeHtml}
${categoryHtml}
${name || 'Товар без названия'} ${description || 'Описание отсутствует'}
${specsHtml}
`;
}
/**
* Отрисовка товаров
*/
function renderProducts() {
if (state.loading) {
elements.container.innerHTML = `
`;
return;
}
if (state.error) {
elements.container.innerHTML = `
Ошибка загрузки
${state.error}
Попробовать снова
`;
return;
}
if (state.products.length === 0) {
elements.container.innerHTML = `
Товары не найдены
В данный момент товары отсутствуют или загружаются
`;
return;
}
// Отрисовка карточек товаров
elements.container.innerHTML = state.products.map(createProductCard).join('');
// Инициализация обработчиков событий
initEventHandlers();
// Анимация появления карточек
animateCards();
}
/**
* Отрисовка пагинации
*/
function renderPagination() {
if (state.totalPages <= 1) {
elements.pagination.style.display = 'none';
return;
}
let paginationHtml = '';
// Кнопка "Назад"
if (CONFIG.currentPage > 1) {
paginationHtml += `
`;
}
// Номера страниц
for (let i = 1; i <= state.totalPages; i++) {
if (
i === 1 ||
i === state.totalPages ||
Math.abs(i - CONFIG.currentPage) <= 2
) {
paginationHtml += `
`;
} else if (
Math.abs(i - CONFIG.currentPage) === 3
) {
paginationHtml += `
`;
}
}
// Кнопка "Вперед"
if (CONFIG.currentPage < state.totalPages) {
paginationHtml += `
`;
}
elements.pagination.innerHTML = paginationHtml;
elements.pagination.style.display = 'flex';
// Обработчики для кнопок пагинации
document.querySelectorAll('.hp-catalog__pagination-btn').forEach(btn => {
btn.addEventListener('click', function() {
const page = parseInt(this.dataset.page);
if (!isNaN(page) && page !== CONFIG.currentPage) {
CONFIG.currentPage = page;
loadProducts();
}
});
});
}
/**
* Загрузка товаров с сервера
*/
async function loadProducts() {
if (state.loading) return;
state.loading = true;
state.error = null;
renderProducts();
try {
// Формирование URL с параметрами
const params = new URLSearchParams({
projectid: CONFIG.projectId,
page: CONFIG.currentPage,
perpage: CONFIG.perPage,
...CONFIG.filters
});
// В реальном проекте здесь будет запрос к API Tilda
// Для демонстрации используем моковые данные
const response = await mockTildaAPI(params);
if (!response.success) {
throw new Error(response.error || 'Не удалось загрузить товары');
}
// Обработка данных
state.products = response.data.products || [];
state.totalPages = response.data.totalPages || 1;
// Отрисовка
renderProducts();
renderPagination();
} catch (error) {
console.error('Ошибка загрузки товаров:', error);
state.error = error.message || 'Произошла ошибка при загрузке товаров';
renderProducts();
} finally {
state.loading = false;
}
}
/**
* Мок-функция для имитации API Tilda
* В реальном проекте замените на реальный запрос
*/
async function mockTildaAPI(params) {
// Имитация задержки сети
await new Promise(resolve => setTimeout(resolve, 800));
// Демонстрационные данные (в реальном проекте данные придут с сервера)
const mockProducts = [
{
id: '1',
name: 'Переносной кондиционер ArcticCool 12V',
price: 12990,
image: 'https://static.tildacdn.com/tild3465-3962-4737-a434-346631323561/photo-1564910820521-.jpg',
description: 'Компактное устройство для охлаждения воздуха в салоне автомобиля. Работает от прикуривателя, не требует установки.',
category: 'Переносные кондиционеры',
badge: 'Хит продаж',
specs: [
{ label: 'Мощность охлаждения', value: '150 Вт' },
{ label: 'Напряжение', value: '12 В DC' },
{ label: 'Расход воздуха', value: '280 м³/ч' },
{ label: 'Уровень шума', value: '45 дБ' }
]
},
{
id: '2',
name: 'Автокомпрессор Denso DCP1750',
price: 24500,
image: 'https://static.tildacdn.com/tild3935-6630-4065-b065-313664633635/photo-1481568038925-.jpg',
description: 'Оригинальный компрессор кондиционера для большинства европейских и японских автомобилей. Высокая надежность и эффективность.',
category: 'Компрессоры',
badge: '',
specs: [
{ label: 'Производительность', value: '175 см³' },
{ label: 'Тип хладагента', value: 'R134a' },
{ label: 'Совместимость', value: 'Универсальный' },
{ label: 'Гарантия', value: '24 месяца' }
]
},
{
id: '3',
name: 'Хладагент R134a Premium 1кг',
price: 1890,
image: 'https://static.tildacdn.com/tild3633-6632-4435-b064-313634643539/photo-1706288456864-.jpg',
description: 'Высокочистый фреон для заправки и дозаправки автомобильных систем кондиционирования. Соответствует всем стандартам качества.',
category: 'Хладагенты',
badge: 'Новинка',
specs: [
{ label: 'Чистота', value: '99.9%' },
{ label: 'Масса нетто', value: '1 кг' },
{ label: 'Температура кипения', value: '-26.1°C' },
{ label: 'Давление', value: '10 бар' }
]
},
{
id: '4',
name: 'Сервисная станция ACS-Pro 5000',
price: 189000,
image: 'https://static.tildacdn.com/tild6535-3765-4433-b163-643331336431/photo-1613214150132-.jpg',
description: 'Профессиональное оборудование для полного обслуживания автомобильных кондиционеров: диагностика, эвакуация, заправка, вакуумирование.',
category: 'Оборудование',
badge: '',
specs: [
{ label: 'Производительность', value: '500 г/мин' },
{ label: 'Вакуумный насос', value: '4 л/сек' },
{ label: 'Тип хладагента', value: 'R134a/R1234yf' },
{ label: 'Дисплей', value: 'LCD 7"' }
]
},
{
id: '5',
name: 'Вентилятор-охладитель CoolBreeze Pro',
price: 2490,
image: 'https://static.tildacdn.com/tild3364-3435-4831-b861-323034386233/photo-1780853891031-.jpg',
description: 'Мощный вентилятор с функцией охлаждения для быстрого снижения температуры в салоне. Устанавливается на панель приборов.',
category: 'Аксессуары',
badge: 'Акция',
specs: [
{ label: 'Мощность', value: '35 Вт' },
{ label: 'Режимы', value: '3 скорости' },
{ label: 'Крепление', value: 'На панель' },
{ label: 'Управление', value: 'Сенсорное' }
]
},
{
id: '6',
name: 'Датчик температуры салона',
price: 1290,
image: 'https://static.tildacdn.com/tild3466-6466-4534-a531-643236333336/photo-1734199218250-.jpg',
description: 'Беспроводной датчик температуры для точного контроля климата в салоне автомобиля. Работает с большинством систем кондиционирования.',
category: 'Датчики',
badge: '',
specs: [
{ label: 'Диапазон', value: '-40...+85°C' },
{ label: 'Точность', value: '±0.5°C' },
{ label: 'Питание', value: 'Батарейка CR2032' },
{ label: 'Связь', value: 'Bluetooth 5.0' }
]
},
{
id: '7',
name: 'Набор для заправки R134a',
price: 3490,
image: 'https://static.tildacdn.com/tild3834-3635-4135-a162-313461383162/photo-1718565524318-.jpg',
description: 'Комплект для самостоятельной заправки автомобильного кондиционера хладагентом R134a. Включает все необходимое для работы.',
category: 'Наборы',
badge: 'Популярный',
specs: [
{ label: 'Хладагент', value: 'R134a, 340г' },
{ label: 'Масло', value: 'PAG 46, 50мл' },
{ label: 'Манометр', value: 'Да' },
{ label: 'Шланг', value: '1.5м' }
]
},
{
id: '8',
name: 'Ультразвуковой увлажнитель воздуха',
price: 2890,
image: 'https://static.tildacdn.com/tild3837-3232-4335-b562-383338383134/photo-1706288456864-.jpg',
description: 'Портативный увлажнитель для поддержания оптимального уровня влажности в салоне автомобиля. Улучшает работу кондиционера.',
category: 'Аксессуары',
badge: '',
specs: [
{ label: 'Емкость', value: '280 мл' },
{ label: 'Производительность', value: '30 мл/ч' },
{ label: 'Время работы', value: '9 часов' },
{ label: 'Питание', value: 'USB-C' }
]
}
];
// Имитация пагинации
const page = parseInt(params.get('page')) || 1;
const perpage = parseInt(params.get('perpage')) || 10;
const startIndex = (page - 1) * perpage;
const endIndex = startIndex + perpage;
return {
success: true,
data: {
products: mockProducts.slice(startIndex, endIndex),
total: mockProducts.length,
totalPages: Math.ceil(mockProducts.length / perpage),
page: page
}
};
}
/**
* Инициализация обработчиков событий
*/
function initEventHandlers() {
// Обработчики кнопок "Купить"
document.querySelectorAll('.hp-card__button').forEach(button => {
button.addEventListener('click', function() {
const productId = this.dataset.productId;
const product = state.products.find(p => p.id === productId);
if (product) {
// Визуальная обратная связь
const originalText = this.textContent;
this.textContent = 'Добавлено ✓';
this.style.background = 'linear-gradient(135deg, #238636, #2ea043)';
// Возврат к исходному состоянию через 2 секунды
setTimeout(() => {
this.textContent = originalText;
this.style.background = '';
}, 2000);
// Здесь можно добавить логику добавления в корзину
console.log('Товар добавлен в корзину:', product);
// Вызов события для Tilda
if (typeof tcart !== 'undefined') {
tcart.add(product.id, product.name, product.price, 1);
}
}
});
});
}
/**
* Анимация появления карточек
*/
function animateCards() {
const cards = document.querySelectorAll('.hp-card');
cards.forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
// Наблюдатель за пересечением
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
observer.observe(card);
});
}
/**
* Повторная попытка загрузки товаров
*/
window.__retryLoadProducts = function() {
loadProducts();
};
// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
loadProducts();
});
})();
${category}
