Как добавить автоматическое сохранение просмотра в Elementor для WordPress

При создании сложных страниц в Elementor часто возникает задача сохранить состояние просмотра пользователя — например, прокрутку, открытые вкладки или выбранные элементы форм. Это особенно актуально для длинных лендингов и многостраничных форм, где потеря позиции раздражает посетителей.

Почему важно автоматическое сохранение состояния просмотра в Elementor

Элементы на странице, созданной в Elementor, могут быть достаточно объемными и интерактивными. Если пользователь случайно обновит страницу или перейдет назад, он потеряет текущее место просмотра и придется искать нужный блок заново. Автоматическое сохранение просмотра помогает улучшить UX, удержать посетителей и повысить конверсию.

При этом стандартного функционала в Elementor для сохранения позиции прокрутки или состояния элементов нет, поэтому приходится использовать кастомные решения на JavaScript и PHP.

Основные сценарии сохранения состояния просмотра

• Сохранение позиции прокрутки страницы или конкретного блока.
• Сохранение открытых вкладок или аккордеонов.
• Запоминание выбранных значений в формах.

Все это можно реализовать с помощью локального хранилища браузера (localStorage), сессий или AJAX-запросов к серверу.

Как реализовать сохранение позиции прокрутки в Elementor

Самый простой и востребованный кейс — это сохранение позиции вертикальной прокрутки страницы. Рассмотрим минимальный пример кода, который надо подключить в теме или через плагин, чтобы пользователь при обновлении страницы оказывался на том же месте.

function wpelementor_enqueue_scroll_script() {
    wp_enqueue_script('wpelementor-scroll-save', get_stylesheet_directory_uri() . '/js/scroll-save.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wpelementor_enqueue_scroll_script');

В файле scroll-save.js разместим следующий код:

jQuery(document).ready(function($) {
    // Восстановим позицию прокрутки
    if(sessionStorage.getItem('wpelementor-scroll-pos')) {
        $(window).scrollTop(sessionStorage.getItem('wpelementor-scroll-pos'));
    }

    // Сохраним позицию при прокрутке
    $(window).on('scroll', function() {
        sessionStorage.setItem('wpelementor-scroll-pos', $(window).scrollTop());
    });
});

Здесь используется sessionStorage, чтобы хранить позицию прокрутки только в текущей сессии браузера. Если нужно сохранять между сессиями, замените на localStorage.

Сохранение состояния вкладок и аккордеонов в Elementor

Elementor использует свои виджеты вкладок и аккордеонов с классами .elementor-tab-title и .elementor-accordion-item. Чтобы сохранить, какая вкладка была открыта, можно сохранять индекс выбранного элемента в localStorage и восстанавливать при загрузке.

Пример кода для вкладок:

jQuery(document).ready(function($) {
    var tabs = $('.elementor-tabs-wrapper');
    tabs.each(function(index) {
        var tabWrapper = $(this);
        var storageKey = 'wpelementor-tabs-' + index;

        // Восстановить активную вкладку
        var activeIndex = localStorage.getItem(storageKey);
        if(activeIndex !== null) {
            tabWrapper.find('.elementor-tab-title').removeClass('elementor-active');
            tabWrapper.find('.elementor-tab-content').removeClass('elementor-active');
            tabWrapper.find('.elementor-tab-title').eq(activeIndex).addClass('elementor-active');
            tabWrapper.find('.elementor-tab-content').eq(activeIndex).addClass('elementor-active');
        }

        // Сохранять при клике
        tabWrapper.find('.elementor-tab-title').on('click', function() {
            var idx = $(this).index();
            localStorage.setItem(storageKey, idx);
        });
    });
});

Аналогично можно сделать для аккордеонов, отслеживая открытый индекс.

Сохранение данных форм Elementor с помощью AJAX и localStorage

Если на странице используются формы (например, с плагином WPForms или встроенным виджетом Elementor), можно сохранять введенные данные в localStorage, чтобы при обновлении формы не сбрасывались.

Пример для сохранения данных текстового поля формы с классом .elementor-field-textual:

jQuery(document).ready(function($) {
    $('.elementor-field-textual').each(function() {
        var field = $(this);
        var id = field.attr('id');

        // Восстановить значение
        var saved = localStorage.getItem('wpelementor-form-' + id);
        if(saved) {
            field.val(saved);
        }

        // Сохранять при изменении
        field.on('input', function() {
            localStorage.setItem('wpelementor-form-' + id, field.val());
        });
    });
});

Такой подход легко расширяется на другие типы полей, включая чекбоксы и селекты.

Расширенные решения с использованием плагинов WPShop

Для более сложных задач хранения и восстановления состояния можно использовать плагины из каталога WPShop. Например, плагин WPRemark позволяет создавать динамические комментарии и отзывы с AJAX, где важна сохранность пользовательских данных между обновлениями.

Также можно рассмотреть Clearfy Pro для оптимизации загрузки скриптов и уменьшения конфликтов при кастомных решениях с JavaScript.

Советы по отладке и тестированию

При внедрении сохранения состояния обязательно протестируйте на разных браузерах и устройствах. Особенно внимательно проверяйте работу с кэшированием страниц и плагинами кеша — они могут мешать корректной работе localStorage и sessionStorage.

Для отладки используйте инструменты разработчика в браузере (F12), вкладку Application для localStorage и sessionStorage. Также полезно логировать действия в консоль для проверки срабатывания событий.

Итог

Автоматическое сохранение просмотра в Elementor — полезная функция, которая значительно улучшает пользовательский опыт. Ее можно реализовать простым JavaScript-кодом с использованием sessionStorage или localStorage, а также интеграцией с AJAX. В сочетании с продвинутыми плагинами из WPShop можно получить надежное и гибкое решение для любого проекта на WordPress с Elementor.