Загрузка...
';
fetch('/product/' + index)
- .then(response => response.text())
+ .then(response => {
+ if (!response.ok) throw new Error(`Ошибка ${response.status}: ${response.statusText}`);
+ return response.text();
+ })
.then(data => {
modalContent.innerHTML = data;
initializeSwiper();
+ })
+ .catch(error => {
+ console.error('Ошибка загрузки деталей продукта:', error);
+ modalContent.innerHTML = `Не удалось загрузить информацию о товаре. ${error.message}
`;
});
}
@@ -485,8 +597,10 @@ CATALOG_TEMPLATE = '''
slidesPerView: 1,
spaceBetween: 20,
loop: true,
+ grabCursor: true,
pagination: { el: '.swiper-pagination', clickable: true },
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
+ zoom: { maxRatio: 3, containerClass: 'swiper-zoom-container' },
autoplay: { delay: 5000, disableOnInteraction: true, },
});
}
@@ -496,7 +610,9 @@ CATALOG_TEMPLATE = '''
const select = document.getElementById(selectId);
const label = document.getElementById(labelId);
const validVariants = variants ? variants.filter(v => v && v.trim() !== "") : [];
+
select.innerHTML = '';
+
if (validVariants.length > 0) {
validVariants.forEach(variant => {
const option = document.createElement('option');
@@ -512,25 +628,51 @@ CATALOG_TEMPLATE = '''
}
}
+
function openQuantityModal(index) {
selectedProductIndex = index;
const product = products[index];
+ if (!product) {
+ console.error("Product not found for index:", index);
+ alert("Ошибка: товар не найден.");
+ return;
+ }
+
setupVariantSelect('colorSelect', 'colorLabel', product.colors);
- setupVariantSelect('modelSelect', 'modelLabel', product.models);
+ setupVariantSelect('modelSelect', 'modelLabel', product.models); // NEW MODEL SETUP
+
document.getElementById('quantityInput').value = 1;
- document.getElementById('quantityModal').style.display = 'block';
+ const modal = document.getElementById('quantityModal');
+ if(modal) {
+ modal.style.display = 'block';
+ document.body.style.overflow = 'hidden';
+ }
}
function confirmAddToCart() {
if (selectedProductIndex === null) return;
- const quantity = parseInt(document.getElementById('quantityInput').value);
+
+ const quantityInput = document.getElementById('quantityInput');
+ const quantity = parseInt(quantityInput.value);
const colorSelect = document.getElementById('colorSelect');
const modelSelect = document.getElementById('modelSelect');
+
const color = colorSelect.style.display !== 'none' && colorSelect.value ? colorSelect.value : 'N/A';
- const model = modelSelect.style.display !== 'none' && modelSelect.value ? modelSelect.value : 'N/A';
+ const model = modelSelect.style.display !== 'none' && modelSelect.value ? modelSelect.value : 'N/A'; // NEW MODEL
+
+ if (isNaN(quantity) || quantity <= 0) {
+ alert("Пожалуйста, укажите корректное количество (больше 0).");
+ quantityInput.focus();
+ return;
+ }
+
const product = products[selectedProductIndex];
+ if (!product) {
+ alert("Ошибка добавления: товар не найден.");
+ return;
+ }
- const cartItemId = `${product.name}-${color}-${model}`;
+ const cartItemId = `${product.name}-${color}-${model}`; // Include model in unique ID
const existingItemIndex = cart.findIndex(item => item.id === cartItemId);
if (existingItemIndex > -1) {
@@ -543,20 +685,24 @@ CATALOG_TEMPLATE = '''
photo: product.photos && product.photos.length > 0 ? product.photos[0] : null,
quantity: quantity,
color: color,
- model: model
+ model: model // NEW
});
}
+
localStorage.setItem('soolaCart', JSON.stringify(cart));
closeModal('quantityModal');
updateCartButton();
- showNotification(`${product.name} добавлен!`);
+ showNotification(`${product.name} добавлен в корзину!`);
}
function updateCartButton() {
const cartCountElement = document.getElementById('cart-count');
const cartButton = document.getElementById('cart-button');
+ if (!cartCountElement || !cartButton) return;
+
let totalItems = 0;
cart.forEach(item => { totalItems += item.quantity; });
+
if (totalItems > 0) {
cartCountElement.textContent = totalItems;
cartButton.style.display = 'flex';
@@ -569,7 +715,10 @@ CATALOG_TEMPLATE = '''
function openCartModal() {
const cartContent = document.getElementById('cartContent');
const cartTotalElement = document.getElementById('cartTotal');
+ if (!cartContent || !cartTotalElement) return;
+
let total = 0;
+
if (cart.length === 0) {
cartContent.innerHTML = 'Ваша корзина пуста.
';
cartTotalElement.textContent = '0.00';
@@ -577,27 +726,35 @@ CATALOG_TEMPLATE = '''
cartContent.innerHTML = cart.map(item => {
const itemTotal = item.price * item.quantity;
total += itemTotal;
- const photoUrl = item.photo ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/60x60.png?text=N/A';
- let variantText = [];
- if (item.color !== 'N/A') variantText.push(item.color);
- if (item.model !== 'N/A') variantText.push(item.model);
- const variantDisplay = variantText.length > 0 ? `(${variantText.join(', ')})` : '';
+ const photoUrl = item.photo
+ ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${item.photo}`
+ : 'https://via.placeholder.com/60x60.png?text=N/A';
+ let variantText = [];
+ if (item.color !== 'N/A') variantText.push(`Цвет: ${item.color}`);
+ if (item.model !== 'N/A') variantText.push(`Модель: ${item.model}`); // NEW MODEL DISPLAY
+
+ const variantDisplay = variantText.length > 0 ? ` (${variantText.join(', ')})` : '';
+
return `
-
-
+
+
${item.name}${variantDisplay}
-
${item.price.toFixed(2)} x ${item.quantity}
+
${item.price.toFixed(2)} ${currencyCode} × ${item.quantity}
-
${itemTotal.toFixed(2)}
-
+
${itemTotal.toFixed(2)} ${currencyCode}
+
`;
}).join('');
cartTotalElement.textContent = total.toFixed(2);
}
- document.getElementById('cartModal').style.display = 'block';
+ const modal = document.getElementById('cartModal');
+ if (modal) {
+ modal.style.display = 'block';
+ document.body.style.overflow = 'hidden';
+ }
}
function removeFromCart(itemId) {
@@ -608,70 +765,198 @@ CATALOG_TEMPLATE = '''
}
function clearCart() {
- cart = [];
- localStorage.removeItem('soolaCart');
- openCartModal();
- updateCartButton();
+ if (confirm("Вы уверены, что хотите очистить корзину?")) {
+ cart = [];
+ localStorage.removeItem('soolaCart');
+ openCartModal();
+ updateCartButton();
+ }
}
function formulateOrder() {
- if (cart.length === 0) return;
+ if (cart.length === 0) {
+ alert("Корзина пуста! Добавьте товары перед формированием заказа.");
+ return;
+ }
+
+ const orderData = {
+ cart: cart
+ };
+
+ const formulateButton = document.querySelector('.formulate-order-button');
+ if (formulateButton) formulateButton.disabled = true;
+
+ showNotification("Формируем заказ...", 5000);
+
fetch('/create_order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ cart: cart })
+ body: JSON.stringify(orderData)
+ })
+ .then(response => {
+ if (!response.ok) {
+ return response.json().then(err => { throw new Error(err.error || 'Не удалось создать заказ'); });
+ }
+ return response.json();
})
- .then(r => r.json())
.then(data => {
if (data.order_id) {
localStorage.removeItem('soolaCart');
cart = [];
+ updateCartButton();
+ closeModal('cartModal');
window.location.href = `/order/${data.order_id}`;
+ } else {
+ throw new Error('Не получен ID заказа от сервера.');
}
+ })
+ .catch(error => {
+ console.error('Ошибка при формировании заказа:', error);
+ alert(`Ошибка: ${error.message}`);
+ if (formulateButton) formulateButton.disabled = false;
});
}
+
function filterProducts() {
const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
- const activeCategory = document.querySelector('.category-filter.active').dataset.category;
+ const activeCategoryButton = document.querySelector('.category-filter.active');
+ const activeCategory = activeCategoryButton ? activeCategoryButton.dataset.category : 'all';
+ const grid = document.getElementById('products-grid');
+ let visibleProducts = 0;
+
+ const existingNoResults = grid.querySelector('.no-results-message');
+ if (existingNoResults) existingNoResults.remove();
+
+ const allProductElements = document.querySelectorAll('.products-grid .product');
+ if (allProductElements.length === 0 && products.length > 0) return; // Wait for initial render if products exist
+
document.querySelectorAll('.products-grid .product').forEach(productElement => {
const name = productElement.getAttribute('data-name');
+ const description = productElement.getAttribute('data-description');
const category = productElement.getAttribute('data-category');
- const matchesSearch = !searchTerm || name.includes(searchTerm);
+
+ const matchesSearch = !searchTerm || name.includes(searchTerm) || description.includes(searchTerm);
const matchesCategory = activeCategory === 'all' || category === activeCategory;
- productElement.style.display = (matchesSearch && matchesCategory) ? 'flex' : 'none';
+
+ if (matchesSearch && matchesCategory) {
+ productElement.style.display = 'flex';
+ visibleProducts++;
+ } else {
+ productElement.style.display = 'none';
+ }
});
+
+ if (visibleProducts === 0) {
+ if (products.length > 0) {
+ const p = document.createElement('p');
+ p.className = 'no-results-message';
+ p.textContent = 'По вашему запросу товары не найдены.';
+ grid.appendChild(p);
+ } else if (!grid.querySelector('.no-results-message')) {
+ const p = document.createElement('p');
+ p.className = 'no-results-message';
+ p.textContent = 'Товары пока не добавлены.';
+ grid.appendChild(p);
+ }
+ }
}
- function showNotification(message) {
- const placeholder = document.getElementById('notification-placeholder');
+ function setupFilters() {
+ const searchInput = document.getElementById('search-input');
+ const categoryFilters = document.querySelectorAll('.category-filter');
+
+ if(searchInput) searchInput.addEventListener('input', filterProducts);
+
+ categoryFilters.forEach(filter => {
+ filter.addEventListener('click', function() {
+ categoryFilters.forEach(f => f.classList.remove('active'));
+ this.classList.add('active');
+ filterProducts();
+ });
+ });
+ filterProducts();
+ }
+
+ function showNotification(message, duration = 3000) {
+ let placeholder = document.getElementById('notification-placeholder');
+ if (!placeholder) {
+ const newPlaceholder = document.createElement('div');
+ newPlaceholder.id = 'notification-placeholder';
+ newPlaceholder.style.position = 'fixed';
+ newPlaceholder.style.bottom = '70px';
+ newPlaceholder.style.left = '50%';
+ newPlaceholder.style.transform = 'translateX(-50%)';
+ newPlaceholder.style.zIndex = '1002';
+ document.body.appendChild(newPlaceholder);
+ placeholder = newPlaceholder;
+ }
+
+
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = message;
placeholder.appendChild(notification);
+
void notification.offsetWidth;
+
notification.classList.add('show');
+
setTimeout(() => {
notification.classList.remove('show');
- setTimeout(() => notification.remove(), 500);
- }, 3000);
+ notification.addEventListener('transitionend', () => notification.remove());
+ }, duration);
}
+
+ function initTelegramWebApp() {
+ if (window.Telegram && window.Telegram.WebApp) {
+ const tg = window.Telegram.WebApp;
+ tg.ready();
+
+ if (tg.initDataUnsafe && tg.initDataUnsafe.user) {
+ const user = tg.initDataUnsafe.user;
+ const userInfoDiv = document.getElementById('user-info');
+ const userAvatarImg = document.getElementById('user-avatar');
+ const userNameSpan = document.getElementById('user-name');
+
+ if (userInfoDiv && userAvatarImg && userNameSpan) {
+ if (user.photo_url) {
+ userAvatarImg.src = user.photo_url;
+ } else {
+ userAvatarImg.style.display = 'none';
+ }
+ userNameSpan.textContent = user.first_name + (user.last_name ? ' ' + user.last_name : '');
+ userInfoDiv.style.display = 'flex';
+ }
+ } else {
+ console.log("Telegram Web App user data not found.");
+ }
+ } else {
+ console.log("Telegram Web App script not loaded or not in Telegram environment.");
+ }
+ }
document.addEventListener('DOMContentLoaded', () => {
- initTelegramAuth();
+ applyInitialTheme();
updateCartButton();
- document.getElementById('search-input').addEventListener('input', filterProducts);
- document.querySelectorAll('.category-filter').forEach(filter => {
- filter.addEventListener('click', function() {
- document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
- this.classList.add('active');
- filterProducts();
- });
+ setupFilters();
+ initTelegramWebApp();
+
+ window.addEventListener('click', function(event) {
+ if (event.target.classList.contains('modal')) {
+ closeModal(event.target.id);
+ }
+ });
+
+ window.addEventListener('keydown', function(event) {
+ if (event.key === 'Escape') {
+ document.querySelectorAll('.modal[style*="display: block"]').forEach(modal => {
+ closeModal(modal.id);
+ });
+ }
});
- window.onclick = function(event) {
- if (event.target.classList.contains('modal')) closeModal(event.target.id);
- }
});
+
+ ![{{ product['name'] }}](https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }})
+ alt="{{ product['name'] }}"
+ loading="lazy">
{% else %}
{% endif %}
@@ -364,6 +455,7 @@ CATALOG_TEMPLATE = '''