4394550ff1
- Добавлено отображение case_taxonomy вместо 'Разобрались' на странице кейса - Улучшена интеграция iframe формы с обработкой событий - Добавлен лог диалога по интеграции React формы
149 lines
5.9 KiB
Markdown
149 lines
5.9 KiB
Markdown
# Лог диалога: Интеграция React формы в WordPress
|
||
|
||
**Дата:** 16 января 2025
|
||
**Тема:** Обсуждение интеграции сложной React формы из Docker в WordPress
|
||
|
||
---
|
||
|
||
## Контекст
|
||
|
||
У пользователя есть сложная форма обращений на React, которая:
|
||
- Развёрнута в Docker контейнере (`ticket_form_frontend_prod`)
|
||
- Находится по адресу: `https://aiform.clientright.ru/`
|
||
- Использует Vite, React, TypeScript, Ant Design
|
||
- Имеет множество шагов, запросов и ответов
|
||
- Текущая интеграция в WordPress через iframe в `page-form.php`
|
||
|
||
---
|
||
|
||
## Обсуждённые темы
|
||
|
||
### 1. Использование taxonomy для кейсов
|
||
|
||
- Поле `case_taxonomy` используется для фильтрации кейсов в архиве
|
||
- Добавлено отображение `case_taxonomy` вместо "Разобрались" на странице отдельного кейса
|
||
- Изменён файл: `wp-content/themes/clientprav-theme/single.php`
|
||
|
||
**Изменения:**
|
||
```php
|
||
// Для кейсов используем case_taxonomy вместо названия категории
|
||
if (has_category('cases')) {
|
||
$case_taxonomy = clientprav_get_case_taxonomy(get_the_ID());
|
||
if (!empty($case_taxonomy)) {
|
||
$category_name = $case_taxonomy;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. Обсуждение форм в WordPress
|
||
|
||
**Варианты интеграции форм:**
|
||
1. **REST API WordPress** - форма отправляет данные на WordPress API
|
||
2. **Отправка на внешний сервер/API** - форма отправляет на n8n webhook
|
||
3. **Встроенный React-компонент** - форма собирается в JS файл и встраивается в WordPress
|
||
|
||
**Текущее решение:** iframe с формой на `aiform.clientright.ru`
|
||
|
||
### 3. Интеграция React формы из Docker
|
||
|
||
**Найденная структура:**
|
||
- Путь к форме: `/var/www/fastuser/data/www/crm.clientright.ru/ticket_form/frontend/`
|
||
- Сборщик: Vite
|
||
- Технологии: React 18.3.1, TypeScript, Ant Design 5.21.6
|
||
- Контейнер: `ticket_form_frontend_prod` (порт 5176)
|
||
|
||
**План перехода на встроенный компонент:**
|
||
1. Создать точку входа `src/wordpress-entry.tsx`
|
||
2. Настроить Vite для сборки библиотеки
|
||
3. Собрать форму: `npm run build`
|
||
4. Скопировать в WordPress: `dist/ticket-form.js` → `wp-content/themes/clientprav-theme/assets/js/`
|
||
5. Подключить через `functions.php` с шорткодом `[ticket_form]`
|
||
6. Настроить API-прокси через WordPress REST API
|
||
|
||
**Важные моменты:**
|
||
- Размер файла может быть 2-5 MB (с Ant Design)
|
||
- Нужен CSS Ant Design через CDN
|
||
- Backend API на порту 8200
|
||
- Зависимости: React, ReactDOM, Ant Design
|
||
|
||
**Рекомендация:** Для сложной формы лучше оставить iframe (проще поддерживать, изоляция)
|
||
|
||
---
|
||
|
||
## Изменённые файлы
|
||
|
||
### 1. `wp-content/themes/clientprav-theme/single.php`
|
||
- Добавлено отображение `case_taxonomy` для кейсов вместо названия категории
|
||
|
||
### 2. `wp-content/themes/clientprav-theme/page-form.php`
|
||
- Улучшена интеграция iframe с обработкой событий:
|
||
- Автоматическая высота iframe
|
||
- Обработка успешной отправки формы
|
||
- Обработка ошибок
|
||
- Отслеживание прогресса
|
||
|
||
### 3. Создан пример React формы
|
||
- `react-form-example/` - пример простой формы для WordPress
|
||
- Включает: структуру проекта, webpack.config.js, пример компонента
|
||
|
||
---
|
||
|
||
## Следующие шаги
|
||
|
||
1. **Решение по форме:**
|
||
- Оставить iframe (текущее решение)
|
||
- Или перейти на встроенный React компонент
|
||
|
||
2. **Если переходить на встроенный компонент:**
|
||
- Настроить сборку Vite для библиотеки
|
||
- Создать точку входа для WordPress
|
||
- Настроить API-прокси
|
||
- Протестировать интеграцию
|
||
|
||
3. **Улучшения iframe (если оставляем):**
|
||
- Добавить уведомления после отправки
|
||
- Интеграция с Google Analytics
|
||
- Сохранение данных в WordPress
|
||
|
||
---
|
||
|
||
## Полезные ссылки
|
||
|
||
- Форма: https://aiform.clientright.ru/
|
||
- Docker контейнер: `ticket_form_frontend_prod`
|
||
- Путь к коду: `/var/www/fastuser/data/www/crm.clientright.ru/ticket_form/frontend/`
|
||
- Docker compose: `/var/www/fastuser/data/www/crm.clientright.ru/ticket_form/docker-compose.yml`
|
||
|
||
---
|
||
|
||
## Технические детали
|
||
|
||
**Структура формы:**
|
||
```
|
||
frontend/
|
||
├── src/
|
||
│ ├── pages/
|
||
│ │ └── ClaimForm.tsx # Основной компонент формы
|
||
│ ├── components/
|
||
│ │ └── form/ # Компоненты шагов формы
|
||
│ ├── api/ # API запросы
|
||
│ └── utils/ # Утилиты
|
||
├── vite.config.ts # Конфигурация Vite
|
||
└── package.json # Зависимости
|
||
```
|
||
|
||
**Зависимости формы:**
|
||
- react: ^18.3.1
|
||
- react-dom: ^18.3.1
|
||
- antd: ^5.21.6
|
||
- @ant-design/icons: ^5.5.1
|
||
- axios: ^1.7.7
|
||
- @tanstack/react-query: ^5.59.16
|
||
- zustand: ^5.0.1
|
||
- socket.io-client: ^4.8.1
|
||
|
||
---
|
||
|
||
**Конец лога**
|
||
|