feat: улучшения формы и отображение case_taxonomy

- Добавлено отображение case_taxonomy вместо 'Разобрались' на странице кейса - Улучшена интеграция iframe формы с обработкой событий - Добавлен лог диалога по интеграции React формы
2025-12-16 11:40:31 +03:00
commit 4394550ff1
4 changed files with 727 additions and 0 deletions
--- a/DIALOG_LOG_2025-01-16.md
+++ b/DIALOG_LOG_2025-01-16.md
@@ -0,0 +1,148 @@
+# Лог диалога: Интеграция 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
+
+---
+
+**Конец лога**
+