Автоматическое заполнение формы заказа данными клиента через API
mdoservices.tilda.ws
Клиент обратился с задачей доработки JavaScript-скрипта для сайта на платформе Tilda. Необходимо было обеспечить автоматическое заполнение формы заказа данными клиента (почта, ФИО, телефон, адрес, лицевой счет), которые поступали через уникальную ссылку из мобильного приложения (например, https://mdoservices.tilda.ws/?personal_account_id=256&user_id=92664). Данные корректно извлекались через API, но не сохранялись при переходе между страницами сайта, что создавало неудобства для пользователей.
Решение: Использование localStorage для сохранения и заполнения данных
Для решения проблемы был доработан существующий скрипт, который теперь сохраняет данные клиента и автоматически заполняет форму на всех страницах сайта. Реализованное решение включает следующие шаги:
Извлечение параметров из URL и запрос данных через API
- Скрипт анализирует параметры URL (например,
personal_account_idиuser_id) с помощью JavaScript (URLSearchParams). - На основе этих параметров выполняется запрос к API для получения данных клиента, таких как почта, ФИО, телефон, адрес и лицевой счет.
Сохранение данных в localStorage
- Полученные данные сохраняются в
localStorage, чтобы они оставались доступными при переходе между страницами сайта. - Для каждого параметра создается уникальный ключ в
localStorage(например,client_email,client_name, и т.д.), что обеспечивает их надежное хранение в браузере.
Автоматическое заполнение формы
- Скрипт динамически находит поля формы на странице (по их
idилиname) и заполняет их сохраненными данными изlocalStorage. - Если пользователь переходит на другую страницу, скрипт проверяет наличие данных в
localStorageи автоматически подставляет их в соответствующие поля формы.
Интеграция скрипта в head сайта
- Скрипт был добавлен в секцию
<head>сайта через блок Tilda, чтобы он выполнялся на всех страницах. - Добавлена проверка на наличие параметров в URL, чтобы избежать ненужных запросов к API при их отсутствии.
Обработка ошибок и тестирование
- Реализована обработка ошибок для случаев, когда API недоступен или данные не могут быть получены.
- Проведено тестирование на различных страницах сайта и устройствах, чтобы гарантировать корректное заполнение формы и сохранение данных.
Результат
Разработанный скрипт обеспечил стабильное автоматическое заполнение формы заказа данными клиента, сохраняя их между страницами с помощью localStorage. Пользователи, переходящие из мобильного приложения по уникальной ссылке, теперь могут сразу видеть заполненные поля формы (почта, ФИО, телефон, адрес, лицевой счет), что упрощает процесс заказа. Решение полностью совместимо с платформой Tilda и протестировано для работы на всех страницах сайта. Клиент остался доволен результатом, что является для меня приоритетом.