klient-prav.ru/DIALOG_LOG_2025-01-16.md

Лог диалога: Интеграция 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

Изменения:

// Для кейсов используем 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

---

Конец лога