[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. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

[MODx] Генератор настроек MIGX

[MODx, MIGx] Документация на русском по MIGX

[MODX] Импорт и экспорт в MiniShop2. Реализация 1

[MODx] minishop2 tips

[JS] Маска для ввода телефона +7(___)___-__-__

[MODx, miniShop2] Генерация YML для выгрузки в маркет

Как включить HTTPS (SSL) в MODX - Подробная инструкция

[MODx] Подсказки по API

[OpenCart] Вывести на главную все категории с картинками

[MODx, MIGX] Примеры использования

[MODx] Сайт на обслуживании (выключить сайт)

Универсальная форма обратной связи — feedBackForm

[MODx, Gallery] Галерея. Вывести обложки альбомов и фотографии

[PHP, JSON] Пример перевода с помощью Yandex Translate API

Расширение свойств товаров minishop2

[Opencart] Вернуть английский язык, если вы его удалили

[OpenCart] Вывести модуль напрямую через контроллер

[MODx, Quip] Более рабочий вариант.

[MODX, MIGX] Вывести getImageList только если он не пустой

[MODX, MIGX] Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

[MODx] Создать источник файлов

Красивое адаптивное меню под pdoMenu

[MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

[PHP] Простое логирование

[MODX] Вывести список всех опций MiniShop2

Все записи