Vue.js + 1С-Битрикс: избранное без перезагрузки

Почему избранное на Битрикс и Vue.js теряется при перезагрузке

Самая частая причина потери списка избранного на Битрикс и Vue.js — хранение в localStorage без привязки к пользователю. Компонент Vue.js пишет массив идентификаторов товаров в браузерное хранилище, всё работает, пока посетитель не откроет сайт с другого устройства или не почистит кеш. При перезагрузке с очисткой хранилища список обнуляется, а на втором устройстве его просто нет — синхронизация избранного между браузером и учётной записью не выполняется.

Второй сценарий — хранение в сессии на стороне сервера. Пока сессия жива, избранное отдаётся в шаблон, но стоит сессии истечь или пользователю войти с другого браузера, как данные исчезают. Если при этом Vue.js-компонент подгружает список асинхронно, а серверный рендер отдаёт пустой контейнер, возникает рассинхрон: интерфейс показывает одно, база — другое. Пользователь добавляет товар повторно, в базе появляется дубль, а часть позиций теряется при слиянии списков.

Третий источник потерь — гонка запросов. Клик по «сердечку» отправляет запрос на добавление, но если пользователь быстро переключает страницы или товары, ответы приходят не в том порядке, и последний запрос перезаписывает список более ранним состоянием. Без серверного подтверждения и версионирования списка часть добавлений откатывается молча.

Корень проблемы один: избранное живёт в двух несвязанных местах — браузере и учётной записи. Пока нет единого источника правды и синхронизации избранного между ними, список будет теряться при каждой смене устройства, чистке кеша или истечении сессии. Разбираем, как это закрывается на связке Битрикс и Vue.js.

Что даёт связка Vue.js и 1С-Битрикс для списка избранного

Список избранного — типичный пример места, где классический серверный рендеринг начинает мешать. Пользователь нажимает «сердечко», и вместо мгновенной реакции браузер отправляет запрос, ждёт ответа и перерисовывает всю страницу целиком. При десятке товаров это незаметно, при каталоге на сотни позиций каждая такая перерисовка — лишний трафик, повторная отрисовка шаблона и потеря позиции скролла.

Связка Vue.js и 1С-Битрикс снимает это ограничение: интерфейсная часть берёт на себя реактивное обновление, а платформа остаётся источником данных и логики. Нажатие на иконку меняет состояние компонента сразу, запрос к серверу уходит фоном и обновляет только нужный фрагмент — без перезагрузки страницы. Пользователь видит результат мгновенно, а сервер обрабатывает точечный запрос вместо сборки страницы заново.

Что это даёт по нагрузке и опыту

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

Снижение нагрузки на сервер получается за счёт отказа от полной перерисовки: вместо генерации всей страницы отдаётся компактный ответ по конкретной операции. На каталогах с активной аудиторией это заметно разгружает обработку запросов и ускоряет отклик интерфейса.

Почему это не ломает существующий сайт

Компоненты избранного подключаются к текущему шаблону и не требуют переписывать каталог или корзину. Мы выносим в реактивный слой только те блоки, где важна мгновенная реакция, а остальные страницы продолжают работать как раньше. Такой подход даёт единый список избранного без перезагрузки страницы и без риска для уже работающих сценариев.

Способы хранения избранного: сравнение подходов

Выбор места хранения определяет, что увидит гость после закрытия вкладки и как поведёт себя каталог при высокой нагрузке. Ниже — четыре рабочие схемы, между которыми реально выбирают на проектах с 1С-Битрикс и Vue.js.

Сессия хороша там, где список живёт минуты: сравнить три позиции и уйти. Как только гость возвращается на следующий день, схема рассыпается — данных уже нет.

localStorage даёт мгновенную отрисовку без обращения к серверу, поэтому интерфейс не ждёт ответа. Плата — привязка к браузеру: с телефона список не виден, а очистка данных сайта стирает его бесследно.

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

Гибридная схема закрывает оба сценария: гость собирает список локально, при входе он сливается с серверным. Такой подход чаще всего и выбирают для каталогов с личным кабинетом.

Как мы внедряем избранное на Vue.js в Битрикс: этапы работ

Процесс разбит на этапы так, чтобы каждый следующий опирался на проверенный результат предыдущего, а не на предположения. Ниже — как это выглядит на проектах, где избранное уже частично работает или требует переноса на Vue.js.

Аудит и проектирование

1. Аудит текущей реализации. Смотрим, где сейчас хранится список: в сессии, в cookie, в пользовательских свойствах или в отдельной таблице. Проверяем, что происходит при очистке cookie, смене устройства и входе под тем же аккаунтом с другого браузера — именно здесь чаще всего теряются позиции.
2. Проектирование схемы хранения. Определяем, что живёт на клиенте, а что на сервере: гость получает локальное хранилище, авторизованный — запись, привязанную к пользователю. Фиксируем формат обмена и момент слияния двух списков при входе.
3. Настройка обмена с 1С. Согласуем, какие идентификаторы товаров и разделов приходят из каталога, чтобы избранное не «рассыпалось» после обновления номенклатуры. Проверяем поведение при снятии товара с публикации.

Проверка и передача

• Реализация интерфейса на Vue.js. Компонент избранного обновляется без перезагрузки страницы: добавление, удаление и счётчик меняются мгновенно, а запрос к серверу уходит фоном. Отдельно закрываем сценарий с несколькими открытыми вкладками.
• Проверка сценариев. Прогоняем гостя, авторизованного пользователя, вход в середине сессии, очистку хранилища и повторный визит. Смотрим не только на список, но и на счётчик в шапке и на страницу сравнения, если она есть.
• Сдача и документация. Передаём описание схемы хранения, точек интеграции и того, какие данные считаются источником истины. Команда заказчика дальше сама добавляет новые типы сущностей в избранное.

Такой порядок снимает главный риск — когда избранное работает в демо, но теряется у реального покупателя после смены устройства.

Что заказчик получает на руки после доработки

После доработки избранного на Vue.js и 1С-Битрикс заказчик получает не только рабочий функционал, но и полный комплект артефактов, по которым проект можно передать любой команде поддержки или развивать своими силами. Ниже — что именно фиксируется в документации и передаётся вместе с кодом.

• Конфигурация компонентов. Описание всех задействованных компонентов Битрикс, их параметров, привязок к инфоблокам и шаблонам, а также настроек Vue-приложения — с пояснением, какой параметр за что отвечает и что произойдёт при его изменении.
• Схема обмена данными. Диаграмма взаимодействия фронтенда и бэкенда: какие запросы уходят на сервер, в каком формате приходит ответ, как синхронизируется состояние избранного между вкладками и сессиями, где хранятся данные пользователя.
• Политики доступа. Разграничение прав на чтение и запись избранного, правила работы для авторизованных и гостевых пользователей, поведение при смене статуса, обработка конфликтов при параллельных действиях.
• Документация. Техническое описание архитектуры, инструкция по развёртыванию и настройке, перечень зависимостей и требований к окружению, комментарии в коде на ключевых участках логики.
• Регламент поддержки. Порядок обновления зависимостей и ядра Битрикс, правила регрессионного тестирования при изменениях, точки контроля производительности, контакты и сроки реакции по инцидентам.
• Набор тестовых сценариев. Проверки добавления, удаления и синхронизации избранного, поведение при потере соединения, корректность отображения для разных ролей — чтобы изменения в будущем не ломали уже работающий функционал.

Такой комплект снимает зависимость от конкретного исполнителя: новый инженер входит в проект по документации, а не по устным пояснениям. Опишите вашу задачу — вернёмся с оценкой и планом работ.

Кейс: как избранное перестало теряться при перезагрузке

Клиент — розничный магазин на 1С-Битрикс с каталогом в несколько тысяч позиций. Избранное хранилось в cookie браузера: список жил до первой очистки, при входе с телефона оказывался пустым, а после обновления страницы товары периодически пропадали. Покупатели воспринимали это как сбой и писали в поддержку — обращения по «пропаже списка» шли потоком, а часть корзин просто не доживала до оформления заказа.

Что изменили

Список избранного перенесли на сервер и привязали к профилю пользователя, а интерфейс переписали на Vue.js: добавление и удаление товара идёт без перезагрузки страницы, состояние сразу подтягивается из ответа сервера. Для гостей список складывается во временное хранилище и переносится в профиль при входе или регистрации — переход «гость → покупатель» больше не обнуляет подборку.

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

Что стало

Время отклика интерфейса на добавление в избранное сократилось с перезагрузки страницы до мгновенной реакции — покупатель видит результат сразу, без ожидания. Обращения в поддержку по пропаже списка прекратились: жаловаться стало не на что. Доля корзин, собранных из избранного, выросла — подборка перестала теряться на полпути к заказу.

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

Чем отличается хранение избранного в сессии от localStorage?

Сессия и localStorage решают одну задачу — сохранить список избранного между переходами по страницам, — но по-разному отвечают на вопрос «как долго живут данные и к кому они привязаны». Сессия хранится на стороне сервера и привязана к идентификатору посетителя: пока браузер держит сессионную cookie, сервер знает, что этот набор товаров принадлежит именно этому визиту. Закрыл вкладку или истёк срок сессии — список исчез. localStorage живёт в браузере, не сбрасывается при закрытии и не зависит от серверной сессии, поэтому переживает и перезапуск браузера, и возврат на сайт через несколько дней.

Привязка к устройству — второе принципиальное различие. Сессия и localStorage одинаково локальны: и то, и другое привязано к конкретному браузеру на конкретном устройстве. Если посетитель добавил товар с телефона, а открыл сайт с ноутбука — списка там не будет. Синхронизация между устройствами возможна только при серверном хранении, привязанном к учётной записи: тогда избранное следует за пользователем, а не за браузером.

Для серверной части разница тоже ощутима. Сессия нагружает сервер: каждый запрос списка — это обращение к хранилищу сессий, а при большом числе посетителей растёт объём данных, которые нужно держать в памяти. localStorage снимает эту нагрузку полностью: список читается и пишется в браузере, сервер о нём не знает, пока пользователь сам не отправит его, например при оформлении заказа или переносе в корзину.

На практике подходы комбинируют. Гостю отдают localStorage — быстро, без нагрузки на сервер, список сохраняется между визитами. После входа в учётную запись избранное переносится на серверную сторону и привязывается к пользователю — тогда оно доступно с любого устройства. Vue.js берёт на себя реактивное обновление интерфейса: счётчик и иконки меняются без перезагрузки страницы, а слой хранения остаётся тем, который выбран под сценарий.

Частые технические сомнения при доработке избранного

Избранное на Vue.js в связке с 1С-Битрикс чаще всего вызывает три технических сомнения: не сломает ли это существующий шаблон, что делать с уже накопленными списками и выдержит ли сервер возросшее число обращений. Разбираем каждое предметно — без общих слов.

Что произойдёт с уже накопленными списками избранного?

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

Выдержит ли сервер возросшую нагрузку?

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

Можно ли откатиться, если что-то пойдёт не так?

Да. Новый интерфейс включается отдельно от старого, поэтому откат — это переключение флага, а не развёртывание заново. Данные за период работы сохраняются в обеих структурах, так что после возврата к прежней версии списки остаются актуальными. Такой порядок позволяет обкатать избранное на части пользователей и снять сомнения до полного запуска.

Обсудим вашу задачу по избранному на Битрикс и Vue.js

Чтобы вернуться с оценкой и планом работ, а не с общими словами, нам нужно понять вашу текущую реализацию: как сейчас устроено избранное, где хранится состояние, как страницы получают данные о товарах. Опишите это в свободной форме — дальше мы зададим уточняющие вопросы и предложим решение.

Полезно приложить к описанию то, что уже есть под рукой:

• как сейчас работает избранное — перезагрузка страницы, отдельный раздел в личном кабинете или локальное хранилище браузера;
• где лежат данные — инфоблок, торговые предложения, внешний сервис, и есть ли привязка к авторизованному пользователю;
• как устроен фронтенд — Vue.js подключён точечно на отдельных блоках или уже собирается отдельным приложением;
• какие шаблоны и компоненты затрагиваются — карточка товара, каталог, корзина, шапка сайта;
• как сейчас устроены обмены с 1С — что и с какой периодичностью приходит на сайт;
• какие ограничения важны — нагрузка, кэширование, требования к скорости отклика интерфейса;
• есть ли тестовый контур, где можно проверить изменения до выката на рабочий сайт.

По этому описанию мы оценим объём: нужно ли переписать хранение состояния, добавить слой обмена между Vue.js и серверной частью, переработать шаблоны или достаточно точечных правок. Отдельно проверим, как решение поведёт себя при очистке кэша, смене браузера и у неавторизованного посетителя, — это типовые места, где избранное «теряется».

В ответ вы получите оценку работ, план по этапам с порядком выката и список того, что потребуется с вашей стороны: доступы, тестовый контур, контакт разработчика, который вёл проект. Если по описанию видно, что задачу можно закрыть малой кровью, мы так и скажем — без навязывания переписывания всего фронтенда.

Опишите текущую реализацию избранного — вернёмся с оценкой и планом работ.