[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

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

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

jQuery.Maskedinput js - документация на русском с примерами

[MODX] Подсказки по работе и заготовки для MiniShop2

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

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

[MODX] Примеры работы с API

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

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

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

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

Пример перевода с помощью Yandex Translate API

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

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

[MODX, MiniShop2] Примеры выборки where, optionFilters, innerJoin

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

Отключить автозаполнение input

Настройка Webpack - несколько точек входа и разделение на чанки

[MODX] pThumb - ресайз изображений. Примеры использования.

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

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

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

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

Все записи

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