From 4394550ff193bc3ace48a8cd3715cdc3f3b9e4a3 Mon Sep 17 00:00:00 2001 From: Fedor Date: Tue, 16 Dec 2025 11:40:31 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=B8=20?= =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20case=5Ftaxonomy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Добавлено отображение case_taxonomy вместо 'Разобрались' на странице кейса - Улучшена интеграция iframe формы с обработкой событий - Добавлен лог диалога по интеграции React формы --- .gitignore | 28 ++ DIALOG_LOG_2025-01-16.md | 148 +++++++ .../themes/clientprav-theme/page-form.php | 170 ++++++++ wp-content/themes/clientprav-theme/single.php | 381 ++++++++++++++++++ 4 files changed, 727 insertions(+) create mode 100644 .gitignore create mode 100644 DIALOG_LOG_2025-01-16.md create mode 100644 wp-content/themes/clientprav-theme/page-form.php create mode 100644 wp-content/themes/clientprav-theme/single.php diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d032f30 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ +# WordPress +wp-config.php +wp-content/uploads/ +wp-content/cache/ +wp-content/backup-db/ +wp-content/advanced-cache.php +wp-content/wp-cache-config.php + +# Node +node_modules/ +npm-debug.log + +# IDE +.idea/ +.vscode/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db + +# Logs +*.log + +# Environment +.env +.env.local diff --git a/DIALOG_LOG_2025-01-16.md b/DIALOG_LOG_2025-01-16.md new file mode 100644 index 0000000..85e29a1 --- /dev/null +++ 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 + +--- + +**Конец лога** + diff --git a/wp-content/themes/clientprav-theme/page-form.php b/wp-content/themes/clientprav-theme/page-form.php new file mode 100644 index 0000000..5b90770 --- /dev/null +++ b/wp-content/themes/clientprav-theme/page-form.php @@ -0,0 +1,170 @@ + + +
+
+ + + + + + Назад на главную + + + +
+

Получить помощь

+

+ Заполните форму, и мы поможем защитить ваши права бесплатно +

+
+ + +
+
+ +
+
+
+
+ + + + + + + +
+
+ + slug : ''; + if ($category_slug) : + ?> + + + + + Назад к списку + + + +
> +
+ + name : ''; + + // Для кейсов используем case_taxonomy вместо названия категории + if (has_category('cases')) { + $case_taxonomy = clientprav_get_case_taxonomy(get_the_ID()); + if (!empty($case_taxonomy)) { + $category_name = $case_taxonomy; + } + } + + if (!empty($category_name)) : + ?> +
+ + + +
+ + +

+ +

+ + + +
+
+
+ + + + +
+
Автор:
+ +
мин чтения
+
+ + +
+ + +
+
+ +
+
+ + + + Дата решения: +
+ +
+ + + + Срок: дней +
+ + +
+ + + + +
+ +
+ +
+
Юрист:
+ +
+ + + + + просмотра +
+ +
+
+ + + +
+ 'w-full h-full object-cover')); ?> +
+ +
+ + +
+ '
' . __('Страницы:', 'clientprav'), + 'after' => '
', + )); + ?> +
+ + + + + + +
+

Ситуация

+
+ +
+
+ + + + +
+

Как мы решали

+ +
+ $item) : ?> +
+
+
+ + + + + +
+ +
+ +
+ +
+
+
+
+
+
+ +
+ +
+ +
+ +
+ + + + +
+

Результат

+
+
+

+
+
+
+ + + + +
+
+ + + +
+

Подготовленные документы

+

Все эти документы мы подготовили бесплатно в рамках нашего сервиса

+
+
+
    + +
  • + + + + +
    • + +
+
+ + + +
+ + + +

Попали в похожую ситуацию?

+

Мы поможем защитить ваши права бесплатно. Расскажите о своей проблеме, и мы подготовим все необходимые документы.

+ + Получить помощь + +
+ + + + + +
+

Краткий ответ

+

+
+ + + +
+

Нужна помощь с защитой прав потребителей?

+

Наш сервис бесплатно поможет составить претензию, жалобу или исковое заявление

+ + Получить консультацию + +
+ + + + +
+

Нужна помощь с защитой прав потребителей?

+

Наш сервис бесплатно поможет составить претензию, жалобу или исковое заявление

+ + Получить консультацию + +
+ + + + 'post', + 'posts_per_page' => 3, + 'post__not_in' => array(get_the_ID()), + 'category__in' => $current_categories, + 'orderby' => 'date', + 'order' => 'DESC', + )); + if ($related_query->have_posts()) : + ?> +
+

+ +

+
+ have_posts()) : $related_query->the_post(); ?> + +
+
+
+
+ +
+
+ + + +
+ + +
+
+ + +
+
+
+ +