Мы обновили страницу «Спасибо за заказ», добавив поддержку мультиязычности и современных технологий для улучшения взаимодействия с пользователем.

Что нового?
Мультиязычность с i18next
Теперь страница автоматически определяет язык пользователя с помощью библиотеки i18next и загружает соответствующий перевод. Эта система гибкая, надежная и легко масштабируется для работы с любым количеством языков.
Адаптивный дизайн
Дизайн страницы полностью адаптивный, что делает ее удобной для просмотра на любом устройстве — от смартфона до настольного компьютера.
Интеграция с Facebook Pixel
На странице реализована обработка и отправка данных в Facebook Pixel. Для этого используется метод сохранения пикселя в sessionStorage
. Подробнее о данном подходе можно прочитать в нашей статье: Что делать, если не работает Facebook Pixel.
Передача данных клиента
Через API на страницу передаются имя и номер телефона клиента. Это позволяет:
- Проверить корректность данных.
- Дать возможность пользователю вернуться на главную страницу и повторно отправить заявку в случае ошибки.
Скорость загрузки страницы

Благодаря оптимизации кода и структуры, показатели скорости загрузки страницы впечатляют:
- FCP (First Contentful Paint): 0,9 сек
- Speed Index: 1,2 сек
- LCP (Largest Contentful Paint): 1,6 сек
Код страницы — спасибо за заказ!
Ниже представлен код страницы с комментариями, объясняющими основные функции.
Если у вас есть вопросы или предложения, пишите в комментариях или свяжитесь с нами через форму на сайте.
1. Общие настройки HTML
<!DOCTYPE html> <html lang="">
Описание: Задает язык документа. Здесь атрибут lang
пуст, что рекомендуется заменить на нужный язык по умолчанию, например lang="en"
.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-i18n="order_title">Thank you for your order</title>
- Описание:
- Указывает кодировку UTF-8.
- Делает страницу адаптивной с помощью метатега
viewport
. - Заголовок страницы использует атрибут
data-i18n
для поддержки перевода.
2. Подключение библиотек
<script src="https://unpkg.com/i18next@21.8.11/dist/umd/i18next.min.js"></script> <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://unpkg.com/jquery-i18next@1.2.0/dist/umd/jquery-i18next.min.js"></script>
- Описание: Подключает библиотеки:
i18next
для перевода текста на странице.jQuery
и плагинjquery-i18next
для удобной интеграции перевода.
3. Скрипт обработки Facebook Pixel
<script> (function () { const pxl = sessionStorage.getItem('pxl'); const subid = sessionStorage.getItem('external_id'); if (pxl) { const img = new Image(1, 1); img.style.display = 'none'; img.src = `https://www.facebook.com/tr?id=${pxl}&ev=Lead&noscript=1${subid ? `&external_id=${subid}&event_id=${subid}` : ''}`; document.body.appendChild(img); } })(); </script>
- Описание:
- Извлекает идентификаторы пикселя и
subid
изsessionStorage
. - Если данные найдены, создает невидимый объект изображения (
Image
) для отправки событий в Facebook Pixel.
- Извлекает идентификаторы пикселя и
4. Иконка страницы
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><text y=%2222%22 font-size=%2220%22>✨</text></svg>">
- Описание: Устанавливает простую иконку страницы (SVG-изображение со звездочкой).
5. Стилизация страницы
<style> /* Основные стили */ body { font-family: 'Roboto', sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; visibility: hidden; }
Описание: Определяет базовые стили, такие как шрифт, цвет фона и адаптивное расположение контента.
.container { background-color: #ffffff; padding: 40px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); text-align: center; max-width: 500px; width: 100%; }
- Описание: Оформляет основной контейнер: белый фон, тень, скругленные углы.
6. HTML-содержимое
<body> <div class="container"> <h1 data-i18n="order_received">Your order has been received!</h1> <p data-i18n="order_message">Thank you for placing your order...</p> <div class="user-data"> <ul> <li> <svg><!-- Иконка имени --></svg> <span data-i18n="name">Name: </span><span id="name"></span> </li> <li> <svg><!-- Иконка телефона --></svg> <span data-i18n="phone">Phone: </span><span id="phone"></span> </li> </ul> </div> <a href="index.html" class="button" data-i18n="button_home">Back to Home</a> <div class="info-box" data-i18n="info_box">We will contact you shortly...</div> </div> </body>
- Описание:
- Заголовок (
h1
) и текст (p
) используют атрибутыdata-i18n
для перевода. - Контейнер
user-data
отображает переданные через URL параметрыname
иphone
. - Кнопка возвращает пользователя на главную страницу.
- Заголовок (
7. Скрипт получения данных
<script> const urlParams = new URLSearchParams(window.location.search); const name = urlParams.get('name'); const phone = urlParams.get('phone'); document.getElementById('name').textContent = name || 'Not provided'; document.getElementById('phone').textContent = phone || 'Not provided'; document.body.style.visibility = 'visible'; </script>
Описание:
- Извлекает параметры
name
иphone
из URL. - Если данные не переданы, отображает текст «Not provided».
- После загрузки данных делает страницу видимой (
visibility: visible
).
Полный код страницы «Спасибо за заказ!»
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-i18n="order_title">Thank you for your order</title> <script src="https://unpkg.com/i18next@21.8.11/dist/umd/i18next.min.js"></script> <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://unpkg.com/jquery-i18next@1.2.0/dist/umd/jquery-i18next.min.js"></script> <script> (function () { const pxl = sessionStorage.getItem('pxl'); const subid = sessionStorage.getItem('external_id'); if (pxl) { const img = new Image(1, 1); img.style.display = 'none'; img.src = `https://www.facebook.com/tr?id=${pxl}&ev=Lead&noscript=1${subid ? `&external_id=${subid}&event_id=${subid}` : ''}`; document.body.appendChild(img); } })(); </script> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><text y=%2222%22 font-size=%2220%22>✨</text></svg>"> <style> body { font-family: 'Roboto', sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; visibility: hidden; } .container { background-color: #ffffff; padding: 40px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); text-align: center; max-width: 500px; width: 100%; } h1 { font-size: 28px; color: #27ae60; margin-bottom: 20px; } p { font-size: 18px; color: #333; line-height: 1.6; } .user-data { font-size: 16px; color: #333; margin-top: 20px; text-align: left; } .user-data ul { list-style: none; padding: 0; margin: 0; } .user-data li { display: flex; align-items: center; margin-bottom: 15px; background: #f9f9f9; padding: 15px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-weight: 500; color: #2c3e50; } .user-data li svg { margin-right: 15px; fill: #2980b9; width: 28px; height: 28px; } .user-data li span { font-size: 18px; color: #2c3e50; } .button { background-color: #2980b9; color: white; padding: 15px 30px; text-decoration: none; border-radius: 8px; display: inline-block; margin-top: 30px; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: #1e6e99; } .info-box { border: 2px solid #8e44ad; padding: 25px; border-radius: 12px; background-color: #f7e6ff; color: #333; font-size: 17px; margin-top: 30px; line-height: 1.5; } @media (max-width: 600px) { .container { padding: 20px; } h1 { font-size: 24px; } p, .info-box { font-size: 16px; } .button { padding: 12px 20px; font-size: 16px; } } </style> </head> <body> <div class="container"> <h1 data-i18n="order_received">Your order has been received!</h1> <p data-i18n="order_message">Thank you for placing your order. If you made a mistake, click the <a href="index.html" style="color: #2980b9; text-decoration: underline;" data-i18n="button_home">Back to Home</a> button and submit the order again.</p> <div class="user-data"> <ul> <li> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8zm-1-13h2v6h-2v-6zm1 9c-1.104 0-2-.896-2-2h2v-2h2v2h2c0 1.104-.896 2-2 2z" /> </svg> <span data-i18n="name">Name: </span><span id="name"></span> </li> <li> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.33-.11-.68-.05-.95.18l-2.2 1.65c-3.12-1.63-5.68-4.18-7.31-7.31l1.65-2.2c.23-.27.29-.62.18-.95-.37-1.12-.57-2.32-.57-3.57 0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-4c0-.55-.45-1-1-1zm-1 3.9c-7.52-.5-13.4-6.38-13.9-13.9h2.03c.2 1.15.49 2.25.88 3.32l-1.44 1.92c1.85 3.32 4.5 5.97 7.82 7.82l1.92-1.44c1.07.39 2.17.68 3.32.88v2.03z" /> </svg> <span data-i18n="phone">Phone: </span><span id="phone"></span> </li> </ul> </div> <a href="index.html" class="button" data-i18n="button_home">Back to Home</a> <div class="info-box" data-i18n="info_box"> We will contact you shortly to confirm your order. Please stay in touch. </div> </div> <script> const urlParams = new URLSearchParams(window.location.search); const name = urlParams.get('name'); const phone = urlParams.get('phone'); document.getElementById('name').textContent = name || 'Not provided'; document.getElementById('phone').textContent = phone || 'Not provided'; async function loadTranslation(lang) { try { const texts = [ "Your order has been received!", "Thank you for placing your order. If you made a mistake, click the \"Back to Home\" button and submit the order again.", "Back to Home", "Name:", "Phone:", "We will contact you shortly to confirm your order. Please stay in touch." ]; const translationPromises = texts.map(text => fetchTranslation(text, lang)); const translations = await Promise.all(translationPromises); return { translation: { "order_received": translations[0], "order_message": translations[1], "button_home": translations[2], "name": translations[3], "phone": translations[4], "info_box": translations[5] } }; } catch (error) { console.error("Ошибка загрузки перевода:", error); return null; } } async function fetchTranslation(text, lang) { try { const response = await fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=en|${lang}`); const data = await response.json(); return data.responseData.translatedText; } catch (error) { console.error("Ошибка загрузки перевода:", error); return text; } } i18next.init({ lng: navigator.language.split('-')[0], debug: true, resources: {} }, async function (err, t) { const lang = i18next.language; const translation = await loadTranslation(lang); if (translation) { i18next.addResourceBundle(lang, 'translation', translation.translation); jqueryI18next.init(i18next, $, { useOptionsAttr: true }); $('body').localize(); document.body.style.visibility = 'visible'; } else { document.body.style.visibility = 'visible'; } }); </script> </body> </html>
Так же прикрепляю архивом страницу:
Всех обнял и пожелал хорошего профита!
