Хочу поделиться простеньким и удобным решением, написанным только что - универсальный запуск сниппетов через Ajax.
Логика работы очень простая:
Прототип этой идеи я уже давно описывал.
Теперь вы можете легко ускорить загрузку своего сайта - просто оборачивайте не особо важные сниппеты в AjaxSnippet и они дозагрузятся через ajax:
[[!AjaxSnippet?
&snippet=`pdoResources`
&parents=`0`
&tpl=`@INLINE <p>[[+idx]]. <a href="[[+link]]">[[+pagetitle]]</a></p>`
&useWeblinkUrl=`1`
]]
Всего 61 строка кода, три параметра, никаких чанков, дополнительных скриптов или стилей. По умолчанию выводится вот такой прелоадер.
После вывода результата вызывается jQuery событие as_complete, куда передаются полученные данные и вы можете что-то еще с ними сделать.
$(document).on('as_complete', document, function(e,d) {
console.log(d);
});
Если сниппет вызывается через пагинатор - то помимо результата в output, вы получите еще 2 значения: pagination и total. Можно сделать ajax пагинацию.
Пакет в нашем репозитории. Исходный код на GitHub.
Посмотреть в работе можно прямо здесь - блок с последними комментариями и тикетами теперь грузится при помощи AjaxSnippet.
Насколько я понял получается что, сначала пользователю выдается готовая страница при этом единовременная нагрузка на сервер меньше (потому что отпадают запросы в базу для генерации к примеру тех же комментариев). И дополнительно после загрузки страницы происходит подгрузка по AJax. Тема походу должна ускорять нагруженные проекты.
Сейчас Василий закидает меня дровами или чем по хуже.
Есть 1 очень важное НО если вы ориентируетесь на СЕО то поисковая система не увидит контент подгруженный после загрузки страницы. Вот тут можно посмотреть( pr-cy.ru/simulator ) с точки зрения робота , на сайте вместо прямого эфира размещен Этот самый прелоадер
Но плагин супер ))) им по идее можно грузить не важные для поисковых систем элементы сайта. Или вобще все если вы не ориентированы на поисковую выдачу
Тут не готовое решение, а всего лишь болванка для твоей реализации.
Это наоборот хорошо, я специально убираю элементы страницы, которые не хочу показывать поисковику, только вот я это делал через ж..., а тут готовый сниппет, надо будет по разбираться с ним. Быстро посмотрев могу сказать только одно неудобство, он подгружает непосредственно вызов других сниппетов, а хорошо бы скрывать целые блоки кода, но сниппет же не для сеошников писался ))).
Так ты напиши свой сниппет, который будет выводить нужные тебе блоки кода - и вызывай его.
Ну и для многих сниппетов можно указывать &tplWrapper - чанк обертку для заворачивания результатов.
Пропиши в нем все нужное, а для результатов оставь [[+output]] и получишь через ajax готовый блок со всеми наворотами.
Фигня все это
&totalVar у pdoResources не срабатывает. Вызов примерно такой:
Попробуй подумать, когда обрабатывается плейсхолдер и когда ты получаешь данные от сниппета.
А потом попробуй внимательно прочитать заметку, обращая снимание на javascript событие as_complete и
То есть, total и html с пагинацией ты получаешь в javascript и нужно его куда-то вставить на странице.
Доброго дня! Спасибо за новый мастхэвчик! С pdoResources все работает чудесно. С eventsCalendar2 подружить "нахрапом" не удалось :) А очень бы хотелось календарик подгружать в последнюю очередь.
Для календаря нужно отдельно зарегать его скрипты и стили, тогда может и заработает.
Единственное стоит отметить, что если перед вызовом AjaxSnippet будет стоять "тяжелый" вызов не кешированного сниппета (Ну допустим), то он выполнится 2 раза. А если AjaxSnippet будет несколько вызовов, то и все сниппеты что находятся выше в шаблоне будут выполняться это число раз +1, что увеличит нагрузку на сервер.
Мне кажется лучше всего использовать плагин, который будет обрабатывать сниппет с параметром ajax=
itemlist
(Перед обработкой парсером сниппетов), запрос при этом должен быть $_POST['action']='itemlist':Василий как всегда молодец, спасибо за отличный сниппет!
Подумаю про плагин, спасибо.
Добавил плагин, можно обновляться.
У меня на сайте отклик ускорился раза в 2.
Можно пойти еще дальше, добавить параметр &mode который может принимать параметры:
0 - обычный режим работы, то есть результат работы показывается сразу, но мы можем обновлять данные этого блока по ajax 1 - режим работы как сейчас, загружать по готовности страницы 2 - режим работы при котором мы дополнительно указываем параметр
при первоночальной загрузке показывается tplAjaxLink, при клике по которой подгружается уже результат работы скрипта.
А как скрыть прелоадер?
Собственно разобрался, только вручную, никаких параметров.
Как я понял, скрипт не работает асинхронно и страница еще продолжала грузится на протяжении некоторого времени, попытка подгрузить кол-во новых статей в той или иной категории, а также помечать непосредственно сами блоки статей с аннотацией, вызвало не той реакции которую я ожидал, загрузка страницы увеличилась в разы, но я думаю это личной мой единичный случай и скрипт предназначен для других целей. Моя попытка внедрить, предварительно была ошибочной т.к. кол-во запросов много и проще было бы сформировать один запрос, отправить, получить ответ и уже работать с массивом, что уже не входит в рамки повседневных задач, но скрипт в качестве примера реализации аналогичных задач, весьма не плохой).
Пример того, о чем я писал и что хотел подгружать:
Василий, а логика чанка-обертки как в pdoResources или другая? У меня он выводится даже если сниппет ничего не вернул. Так и надо?
Прочитай еще раз принцип работы.
При загрузки страницы сниппет не выполняется. То есть, сниппета как бы нет, он ничего не возвращает.
А вот когда страница загружена, уходит ajax запрос и тогда уже можно говорить о работе сниппета, и о том, что он вернул.
В этом и смысл - выполнить сниппет после загрузки страницы. А место под его ответ готовится всегда.
Понял. Принцип я понимаю, просто думал что там проверка есть, тк она туда прям просится) Ну раз нет - выкручусь по другому)
Проверка на наличие сниппета есть, но сам он не запускается.
Я про проверку на результат работы сниппета. Логично было бы не показывать обертку, пока сниппет ничего не вернул, или потом ее сразу скрывать если . Но это такие мелочи)
tagLister так славно "спрятался" в AjaxSnippet, что вдвое быстрее стала главная загружаться)) Спасибо Василий!
На здоровье!
Щикарно:) Повесил его на TwitterX и время первой загрузки не из кэша сократилось на 2 скунды:)
P.S TwitterX ждет ответ от Twitter`а и из за этого страница загружается на 1-2 секунды дольше.
Василий, привет. Не могу понять зачем в $post передается as_action: "'.$key.'". За что отвечает этот as_action?
Разобрался, данный параметр используется в плагине.
Добрый день, можно ли при отработке сниппета, получать какой-то оригинальный id операции? Поясню, например, на странице идет вызов пяти иногда трех ajaxsnippet-ов (используются условия). После отработки сниппетов "результаты" обрабатываются плагинами jquery (собирается меню/табы и т.д.) Инициализация этих плагинов должна проходить не как обычно в $(document).ready, а по событию "ajaxComplete" соответственно, каждый плагин проинициализируется столько раз, сколько было закончено аякс запросов. Думал сделать переменную и увеличивать по инкременту с каждым событием ajaxComplete и просто сделать условие, если эта переменная равна количеству всех запросов то делать инициализацию всех плагинов, но это во-первых не очень красиво для пользователя, который в первое время видит в "разобранном" виде некоторые блоки, пока не отработают все запросы, да и во-вторых как я писал, не известно сколько запросов будет идти на странице, у одного товара 3, у другого - 5. А дальше на странице еще по аяксу добавляется товар в корзину, отправляются комменты, заявки и т.д. Поэтому хотелось бы иметь какой-то id по окончанию выполнения каждого ajaxsnippet, чтобы потом точно перебирать эти id и для каждого выполнять соответствующую инициализацию плагинов. Василий, подскажите, как это сделать?
В заметке же написано:
Если сниппет отдаст какой-то id, то его можно получить в jQuery при этом событии.
какую из переменных объекта "d" вы бы использовали? key всегда разный генериться, snippet вывода везде один и тот же, а output выводиться по разным шаблонам и его парсить будет очень сложно
Ну раз "очень сложно", то больше ничем не могу помочь.
спасибо, легче уж переписать сниппет, чтобы можно было по-человечески подавать в него параметр с нужным мне id и выводить в его в этот объект "d" и "перенести" прелоадер к себе на сервер.
кстати, сегодня прелоадер, используемый в ajaxsnippet с вашего сервера не хочет грузиться.
Зачем вообще вы так сделали с сниппете? бедный ваш сервер...
Видел, что можно по окончанию запроса получать объект "d" в котором какой-то ключ операции (генерируется всегда разный), весь вывод и название сниппета для вывода. Это получается только надо "рыться" в output и исходя из его содержимого делать то что я хочу...не очень круто ведь содержимое output не выводится по одному шаблону
Здравствуйте. Вопрос вот в чем: На странице в боковой колонке был реализован вызов getResources для отображения списка самых просматриваемых тем. Решил выводить через AjaxSnippet, но после выполнения сниппета не отрабатывает {%hp-[[+id]]%}. Вернее не отрабатывает сниппет HPCount, так как пользователю выводится {%hp-123%}. Вероятно нет инициализации HPCount вызываемом в футере. Вызов [[!HPCount]] в чанке шаблона getResources результата тоже не дал. Может кто посоветует как выйти из этой ситуации?
чанк rating-lst
Василий привет. Спасибо за отличные компоненты к modx и их описания . Хочу вывести снипет login. Делаю так
и сам чанк с формой
В таком исполнении форма появляется? Ввожу правильные или неправильные данные, login-pass вижу ромашку, далее перезагрузка страницы. В консоли хрома никаких ошибок нет. Сама форма логина исправно работает без AjaxSnippet. В чем моя ошибка и как нужно правильно реализовывать?
Отправка формы авторизации Login через ajax
Сергей, спасибо за ссылку, видел ее и реализовал по ней. Для себя хотел попробовать реализовать AjaxSnippet от Василия, посмотреть как оно будет работать. Я уверен что все должно работать но в манах есть только один пример.
На хабре писал Василий
Василий, вы можете сказать почему не работает Ajaxsnippet + login