[MODX] Загрузка сниппета после загрузки страницы через AjaxSnippet

AjaxSnippet — инструмент, который позволяет загрузить часть страницы через AJAX — сниппет, или чанк. Помимо того, что это экономит время пользователя, также это позволяет добиться высокой сорости загрузки страницы и получить благосклонность у Google PageSpeed.

Параметры сниппета

&as_mode
onload
Как загружать контент: сразу после загрузки страницы, или при клике на ссылку-триггер?
Варианты значений:
onload
onclick
none
&as_target
CSS селектор элемента, в который будет загружен ответ от сервера. По умолчанию, ответ будет вставлен на место вывода чанка-обёртки.
&as_trigger
Текст ссылки-триггера для режима "OnClick". По умолчанию - запись из словаря "as_trigger".
&propertySet
Если вы хотите использовать набор параметров сниппета - укажите его имя.
&snippet
pdoResources
Сниппет, который нужно запустить через Ajax.
&wrapper
Чанк-обёртка. Обязательно должен содержать элемент с id="".

Пример использования

[[AjaxSnippet?
    &snippet=`pdoResources`
    &parents=`0`
    &tpl=`@INLINE <p>[[+id]] - [[+pagetitle]]</p>`
    &as_mode=`onload`
]]

Включить возможность использования тегов FENOM и @INLINE-шаблонов

Версия пакета 1.1.1-pl не поддедживает вставку @INLINE-чанков и Fenom. Чтобы добавить эту возможность нужно открыть сниппет и на 14 и 15 строке дописать:

$pdo = $modx->getService('pdoTools');
if (!empty($wrapper)) {$wrapper = $pdo->parseChunk($wrapper);}

Загрузка msMiniCart после загрузки страницы через AjaxSnippet

Кэширование сниппета msMiniCart — задача не простая. У меня не получилось реализовать ее должном образом, и поэтому приходится вызывать этот сниппет некэшированным всегда. А это влияет на скорость загрузки страницы не лучшим образом. Судя по отчету сниппета debugParser, на это уходит ~0.1 секунды. И в условиях, когда требование Google PageSpeed составляет 0.2 секунды на всю страницу это время становится критичным.

Поэтому (с точки зрения скорости загрузки страницы), исключить msMiniCart из загрузки страницы, и догрузить его через AJAX — хорошее решение.

Пример реализации

1. Доработка сниппета
Сперва выполните указания под заголовком «Включить возможность использования тегов FENOM и @INLINE-шаблонов» (см. выше)

2. Вызов сниппета
Я предпочитаю вызвать сниппет с параметром &as_target, чтобы не создавать лишний элемент в DOM, поэтому в параметр &wrapper передаю заглушку, которая не позволит считать его пустым, и указываю селектор элемента в &as_target

[[!AjaxSnippet?
  &snippet=`msMiniCart`
  &tpl=`tpl.msMiniCart`
  &as_target=`.header_cart`
  &wrapper=`@INLINE <span></span>`
]]

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

Похожие статьи

Наш сайт использует куки, нажмите «ОК» если вы не против
OK