327 lines
12 KiB
Markdown
327 lines
12 KiB
Markdown
# Обновление страницы деталей услуги - SERVICE DETAIL
|
||
|
||
## Дата: 24 ноября 2025 г.
|
||
|
||
## Описание изменений
|
||
|
||
Полностью переработана страница деталей услуги с современным дизайном и расширенным функционалом.
|
||
|
||
---
|
||
|
||
## Что было сделано
|
||
|
||
### 1. Создан новый шаблон `service_detail_modern.html`
|
||
|
||
**Расположение:** `/smartsoltech/web/templates/web/service_detail_modern.html`
|
||
|
||
#### Структура страницы:
|
||
|
||
1. **Hero секция с информацией об услуге**
|
||
- Изображение услуги с hover-эффектом
|
||
- Категория услуги (badge)
|
||
- Название услуги
|
||
- Рейтинг и количество отзывов
|
||
- Цена услуги
|
||
- Краткое описание
|
||
- Кнопка "Оставить заявку"
|
||
|
||
2. **Секция подробного описания**
|
||
- Развернутое описание услуги
|
||
- Блок с преимуществами:
|
||
- ⏰ Быстрое выполнение
|
||
- 🏆 Качество
|
||
- 🎧 Поддержка 24/7
|
||
|
||
3. **Портфолио проектов**
|
||
- Отображение всех проектов по данной услуге
|
||
- Карточки проектов с изображениями
|
||
- Статус проекта (Завершен/В процессе)
|
||
- Дата завершения
|
||
- Ссылка на детальную страницу проекта
|
||
- Адаптивная сетка (3 колонки на desktop, 2 на tablet, 1 на mobile)
|
||
|
||
4. **Секция отзывов клиентов**
|
||
- Карточки отзывов с рейтингом
|
||
- Аватары клиентов (или инициалы)
|
||
- Дата публикации отзыва
|
||
- Адаптивная сетка
|
||
|
||
5. **CTA секция (Call-to-Action)**
|
||
- Привлекательный призыв к действию
|
||
- Анимированный фон с gradient
|
||
- Кнопка "Начать проект"
|
||
|
||
---
|
||
|
||
### 2. Добавлены CSS стили
|
||
|
||
**Расположение:** `/smartsoltech/static/assets/css/modern-styles.css`
|
||
|
||
#### Новые стили:
|
||
|
||
- `.service-hero` - Hero секция с gradient фоном
|
||
- `.service-image-wrapper` - Обертка для изображения с hover-эффектом
|
||
- `.badge-category` - Badge категории с gradient
|
||
- `.service-title` - Заголовок услуги (2.5rem, font-weight: 800)
|
||
- `.service-stats` - Статистика (рейтинг + цена)
|
||
- `.price-badge` - Отображение цены
|
||
- `.details-card` - Карточка с подробным описанием
|
||
- `.section-title` - Заголовки секций с подчеркиванием
|
||
- `.feature-box` - Блоки преимуществ с hover-эффектом
|
||
- `.portfolio-card` - Карточки проектов с анимацией
|
||
- `.portfolio-image` - Изображения проектов (250px высота, object-fit: cover)
|
||
- `.portfolio-placeholder` - Placeholder для проектов без изображения
|
||
- `.review-card` - Карточки отзывов
|
||
- `.cta-card` - CTA секция с анимированным фоном
|
||
|
||
#### Адаптивность:
|
||
|
||
- Desktop (≥992px): 3 колонки для проектов/отзывов
|
||
- Tablet (768-991px): 2 колонки, уменьшенные шрифты
|
||
- Mobile (<768px): 1 колонка, компактные отступы
|
||
|
||
---
|
||
|
||
### 3. Обновлен view
|
||
|
||
**Файл:** `/smartsoltech/web/views.py`
|
||
|
||
**Изменения:**
|
||
```python
|
||
def service_detail(request, pk):
|
||
# ...
|
||
return render(request, 'web/service_detail_modern.html', { # Изменен шаблон
|
||
'service': service,
|
||
'projects_in_category': projects_in_category,
|
||
'average_rating': average_rating,
|
||
'total_reviews': total_reviews,
|
||
'reviews': reviews,
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
### 4. Созданы template tags (опционально)
|
||
|
||
**Расположение:**
|
||
- `/smartsoltech/web/templatetags/__init__.py`
|
||
- `/smartsoltech/web/templatetags/custom_filters.py`
|
||
|
||
**Функции:**
|
||
- `mul` - умножение значений (для AOS задержек)
|
||
- `add` - сложение значений
|
||
|
||
---
|
||
|
||
## Использованные технологии
|
||
|
||
- **Django Templates** - шаблонизация
|
||
- **Bootstrap 5** - базовая сетка и компоненты
|
||
- **Custom CSS** - кастомные стили с CSS переменными
|
||
- **AOS (Animate On Scroll)** - анимации при прокрутке
|
||
- **Font Awesome** - иконки
|
||
- **CSS Animations** - кастомные анимации (pulse для CTA)
|
||
|
||
---
|
||
|
||
## Особенности дизайна
|
||
|
||
### Цветовая схема (из :root переменных):
|
||
- Primary: `#6366f1` (индиго)
|
||
- Secondary: `#8b5cf6` (фиолетовый)
|
||
- Accent: `#06d6a0` (бирюзовый)
|
||
- Gradient: `linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)`
|
||
|
||
### Анимации:
|
||
- **Hover на изображениях**: scale(1.05) + transform
|
||
- **Карточки**: translateY(-10px) + shadow
|
||
- **CTA background**: pulse анимация (4s infinite)
|
||
- **Кнопки**: transform + shadow на hover
|
||
|
||
### Эффекты:
|
||
- Rounded corners (border-radius: 1rem)
|
||
- Box shadows (0 20px 40px rgba)
|
||
- Smooth transitions (0.3s - 0.5s ease)
|
||
- Gradient backgrounds
|
||
|
||
---
|
||
|
||
## Интеграция с существующим функционалом
|
||
|
||
### Модальное окно заявки:
|
||
- Используется `{% include "web/modal_order_form.html" %}`
|
||
- 2 кнопки открытия: в Hero и в CTA секции
|
||
- JavaScript обработчики из `modal-init.js`, `service_request.js`
|
||
|
||
### QR-код генерация:
|
||
- Поддержка base64 QR-кодов (из предыдущего обновления)
|
||
- Telegram bot integration
|
||
- Верификация статуса заявки
|
||
|
||
---
|
||
|
||
## Модели данных
|
||
|
||
### Service (используемые поля):
|
||
- `name` - название услуги
|
||
- `description` - описание (используется как краткое и развернутое)
|
||
- `price` - цена
|
||
- `category` - ForeignKey к Category
|
||
- `image` - изображение услуги
|
||
- `reviews` - related_name для Review
|
||
- `projects` - related_name для Project
|
||
|
||
### Project (портфолио):
|
||
- `name` - название проекта
|
||
- `description` - описание
|
||
- `image` - изображение проекта
|
||
- `status` - статус (in_progress/completed)
|
||
- `completion_date` - дата завершения
|
||
- `service` - ForeignKey к Service
|
||
|
||
### Review (отзывы):
|
||
- `client` - ForeignKey к Client
|
||
- `service` - ForeignKey к Service
|
||
- `rating` - рейтинг (1-5)
|
||
- `comment` - текст отзыва
|
||
- `review_date` - дата отзыва
|
||
|
||
---
|
||
|
||
## Тестирование
|
||
|
||
### Проверить работу:
|
||
|
||
1. **Переход на страницу услуги:**
|
||
- Открыть http://localhost:8000/services/
|
||
- Нажать "Подробнее" на любой услуге
|
||
- Проверить загрузку `service_detail_modern.html`
|
||
|
||
2. **Hero секция:**
|
||
- ✅ Отображается изображение услуги
|
||
- ✅ Категория (badge)
|
||
- ✅ Название услуги
|
||
- ✅ Рейтинг со звездами
|
||
- ✅ Цена
|
||
- ✅ Описание
|
||
|
||
3. **Подробное описание:**
|
||
- ✅ Развернутое описание услуги
|
||
- ✅ 3 блока преимуществ с иконками
|
||
- ✅ Hover-эффекты на блоках
|
||
|
||
4. **Портфолио проектов:**
|
||
- ✅ Отображаются проекты по услуге
|
||
- ✅ Изображения проектов
|
||
- ✅ Статус (badge)
|
||
- ✅ Дата завершения
|
||
- ✅ Ссылка на детали проекта
|
||
- ✅ Placeholder для проектов без изображения
|
||
|
||
5. **Отзывы:**
|
||
- ✅ Карточки отзывов
|
||
- ✅ Рейтинг звездами
|
||
- ✅ Аватар клиента или инициалы
|
||
- ✅ Дата отзыва
|
||
|
||
6. **CTA секция:**
|
||
- ✅ Gradient фон с анимацией
|
||
- ✅ Кнопка "Начать проект"
|
||
- ✅ Открытие модального окна
|
||
|
||
7. **Модальное окно:**
|
||
- ✅ Открывается по клику на кнопки
|
||
- ✅ Форма заявки
|
||
- ✅ Генерация QR-кода
|
||
- ✅ Telegram bot integration
|
||
|
||
8. **Адаптивность:**
|
||
- ✅ Desktop (≥992px): 3 колонки
|
||
- ✅ Tablet (768-991px): 2 колонки
|
||
- ✅ Mobile (<768px): 1 колонка
|
||
|
||
---
|
||
|
||
## Команды для развертывания
|
||
|
||
```bash
|
||
# 1. Собрать статические файлы
|
||
docker-compose exec web python smartsoltech/manage.py collectstatic --noinput
|
||
|
||
# 2. Перезапустить контейнер
|
||
docker-compose restart web
|
||
|
||
# 3. Проверить логи
|
||
docker-compose logs -f web
|
||
```
|
||
|
||
---
|
||
|
||
## Возможные улучшения
|
||
|
||
### В будущем можно добавить:
|
||
|
||
1. **Расширенное описание услуги:**
|
||
- Отдельное поле `detailed_description` в модели Service
|
||
- WYSIWYG редактор в админке (CKEditor, TinyMCE)
|
||
- Поддержка HTML форматирования
|
||
|
||
2. **Галерея проектов:**
|
||
- Lightbox для просмотра изображений
|
||
- Фильтрация проектов по статусу
|
||
- Пагинация при большом количестве проектов
|
||
|
||
3. **Интерактивные элементы:**
|
||
- Карусель отзывов (Swiper.js)
|
||
- Модальное окно для просмотра проектов
|
||
- Форма для добавления отзыва
|
||
|
||
4. **SEO оптимизация:**
|
||
- Meta description для каждой услуги
|
||
- Open Graph теги
|
||
- Schema.org разметка (Service, Review, Offer)
|
||
|
||
5. **Аналитика:**
|
||
- Счетчик просмотров услуги
|
||
- Отслеживание конверсии (просмотр → заявка)
|
||
- Популярные услуги
|
||
|
||
---
|
||
|
||
## Структура файлов проекта
|
||
|
||
```
|
||
smartsoltech/
|
||
├── web/
|
||
│ ├── templates/
|
||
│ │ └── web/
|
||
│ │ ├── service_detail.html (старый шаблон)
|
||
│ │ └── service_detail_modern.html (новый шаблон) ✨
|
||
│ ├── templatetags/
|
||
│ │ ├── __init__.py ✨
|
||
│ │ └── custom_filters.py ✨
|
||
│ ├── views.py (обновлен)
|
||
│ └── models.py (без изменений)
|
||
├── static/
|
||
│ └── assets/
|
||
│ └── css/
|
||
│ └── modern-styles.css (обновлен) ✨
|
||
└── staticfiles/ (collectstatic)
|
||
```
|
||
|
||
---
|
||
|
||
## Заключение
|
||
|
||
Страница деталей услуги теперь имеет:
|
||
- ✅ Современный дизайн с градиентами и анимациями
|
||
- ✅ Развернутое описание услуги
|
||
- ✅ Портфолио проектов по услуге
|
||
- ✅ Секцию отзывов клиентов
|
||
- ✅ CTA секцию для увеличения конверсии
|
||
- ✅ Полную адаптивность для всех устройств
|
||
- ✅ Интеграцию с Telegram ботом
|
||
- ✅ Модальное окно для заявок с QR-кодом
|
||
|
||
Все изменения применены, статика собрана, контейнер перезапущен! 🚀
|