Метод ручной отрисовки виджетов

Описание

retailrocket.markup.render() — это метод, который позволяет вручную управлять отрисовкой маркап-блоков с рекомендациями на веб-странице.

В этой статье мы подробно разберем, как работает автоматическая отрисовка, зачем нужен retailrocket.markup.render() и как его использовать.

Как работает автоматическая отрисовка маркап-блоков?

При загрузке страницы основной трекинг-код Retail Rocket выполняет слеующие шаги:

1. Поиск маркап-блоков:
   С момента загрузки трекинг-кода он каждые 100 миллисекунд сканирует страницу, ищет элементы с атрибутом data-retailrocket-markup-block и продолжает это до полной загрузки страницы.
2. Загрузка верстки и рекомендаций:
   • Для каждого найденного блока код:
   • Подтягивает верстку блока по его ID
   • Определяет алгоритм рекомендаций, указанный в блоке
   • Запрашивает рекомендации и наполняет блок содержимым.
3. Остановка поиска:
   После события DOM Content Loaded (когда HTML загружен и DOM полностью построен) трекинг-код прекращает поиск новых блоков.

🚧

Важно

Если маркап-блок появляется на странице после DOMContentLoaded, автоматическая отрисовка его не обработает. Здесь и нужен retailrocket.markup.render().

Зачем нужен retailrocket.markup.render()?

Автоматическая отрисовка работает только для блоков, которые присутствуют на странице до события DOMContentLoaded. Однако на современных сайтах часто возникают ситуации, когда блоки добавляются динамически или страница не перезагружается. Метод retailrocket.markup.render() решает эту проблему, позволяя вручную инициализировать и отображать маркап-блоки. Вот ключевые причины его использования:

• Динамическое добавление блоков после загрузки страницы:
  Если блок появляется после DOMContentLoaded (например, во всплывающей форме, загружаемой через Ajax), трекинг-код его не увидит. Вызов retailrocket.markup.render() принудительно отрисовывает такой блок.
• Single Page Application (SPA):
  В SPA страницы не перезагружаются при навигации, и DOMContentLoaded срабатывает только один раз при первой загрузке. При каждом переходе на новую "страницу" нужно вызывать retailrocket.markup.render(), чтобы отобразить блоки.
• Обновление существующих блоков:
  Если содержимое блока нужно обновить (например, при изменении состояния корзины), повторный вызов retailrocket.markup.render() позволяет перерендерить блок с новыми рекомендациями.
• Добавление блоков по действию пользователя:
  Блоки могут появляться не сразу, а при определенных действиях: прокрутке страницы, клике на кнопку или открытии поп-апа. После добавления такого блока нужно вызвать retailrocket.markup.render().
• Сайты без перезагрузки страниц:
  Если сайт не обновляет страницу при переходах (например, при скроллинге или переключении вкладок), автоматическая отрисовка не сработает. В таких случаях retailrocket.markup.render() нужно вызывать вручную после добавления блоков.

📘

Примечание

Метод не возвращает никакого значения (возвращается undefined), что нормально. Чтобы убедиться, что блок отобразился, проверьте, страницу визуально, и что у блока добавился атрибут initialized=”true”.

Как использовать retailrocket.markup.render()?

Для корректной работы метода выполните следующие шаги:

1. Удалите атрибут initialized="true":
   Если в контейнере блока есть атрибут initialized="true", удалите его. Этот атрибут сигнализирует, что блок уже отрисован, и его наличие может заблокировать повторный рендеринг.
2. Сбросьте фильтр дубликатов (при необходимости):
   Если вы обновляете блок и хотите показать новые рекомендации, даже если они совпадают с предыдущими, выполните: delete retailrocket.modules.duplicates;
3. Вызовите метод:
   retailrocket.markup.render();