Страница: Спасибо за заказ! 2025 (мультиязычная)

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

Содержание

Что нового?
Скорость загрузки страницы
Код страницы — спасибо за заказ!
2. Подключение библиотек
3. Скрипт обработки Facebook Pixel
4. Иконка страницы
5. Стилизация страницы
6. HTML-содержимое
7. Скрипт получения данных
Полный код страницы «Спасибо за заказ!»

Что нового?

Мультиязычность с 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>

Так же прикрепляю архивом страницу:

Скачать старницу Спасибо за заказ!Скачать

Всех обнял и пожелал хорошего профита!