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
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**Конец лога**
|
|||
|
|
|