Модуль для ZoomX: ajax-блок

Захотелось, значит, поделиться своей разработкой — блок, загружаемый через ajax. Использую его для фильтров и форм. Ещё можно использовать для динамической корзины в miniShop. Нужно, например, если добавляются подарки. Сначала просто хотел скинуть код файлов, но потом решил оформить это в отдельный модуль. А модули для ZoomX, кажется, ещё никто не делал, да и разработчик не заявлял о такой возможности. Поэтому пришлось придумывать)

Сначала пример, как можно использовать эту штуку. При переключении вкладок через ajax подгружаются новинки, хиты или акционные товары.
<div class="tabs">
    <form class="tabs__buttons" hx-trigger="change" hx-post="ajax/product-tabs" hx-target=".products">
        <label>
            <input type="radio" name="filter" value="popular">
            <span>Хиты продаж</span>
        </label>
        <label>
            <input type="radio" name="filter" value="new" checked>
            <span>Новинки</span>
        </label>
        <label>
            <input type="radio" name="filter" value="favorite">
            <span>Акции</span>
        </label>
    </form>
</div>

<div class="products">
    {ajax key='product-tabs'}
        {$type = 'new'}
        {if in_array($filter, ['new', 'popular', 'favorite'])}
            {$type = $filter}
        {/if}
        
        {$products = 'msProducts'|snippet:[
            'limit' => 12,
            'parents' => null,
            'where' => ["{$type} = 1"],
            'return' => 'JSON'
        ]}
    
        <div class="grid">
            {foreach json_decode($products, true) as $item}
                {include 'parts/prod-card'}
            {foreachelse}
                <div>Ничего не найдено</div>
            {/foreach}
        </div>
    {/ajax}
</div>
И это всё, ни строчки js. Секрет тут в использовании библиотеки htmx. Добавляем к форме 3 атрибута: hx-trigger=«change» (при изменении) hx-post=«ajax/product-tabs» (обращаемся по этому адресу) hx-target=".products" (результат вставляем в .products) и всё. Библиотека обладает обширным функционалом, есть коллбэки, подробная документация, в общем, всем советую.

Как подключить модуль.
1. В head подключаем htmx.
<script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
2. В /core/app/modules/ajax/ копируем содержимое репозитория github.com/der-leksey/zoomx-ajax.
3. В начало routes.php добавляем
require_once MODX_CORE_PATH . 'app/modules/ajax/routes.php';

4. В начало elements.php добавляем
require_once MODX_CORE_PATH . 'app/modules/ajax/elements.php';


Можно, конечно, было сделать пакетом. Но собирать пакеты в MODx — то ещё удовольствие. И не факт, что он будет востребован, поэтому пока через клонирование репозитория. Модуль я решил не размещать в components, потому что это как бы не MODx-компонент в привычном смысле)

Теперь о том, как это работает на бэкенде.
Содержимое блока ajax записывается в кэш (при очистке кэша через админку не удалится) с ключом key (должен быть уникальным для всего сайта), парсится и выводится на сайт. Блоку можно задать массив params, так как переменные извне доступны не будут. При обращении к ajax/key сервер возвращает распарсенный html, подставляя туда параметры из post-запроса и переданные в params.

Собственно всё, можно использовать. Пример с фильтром — выше.
Вот пример, как сделать ajax-форму.
<form action="" class="form" hx-post="ajax/form-1">
            {ajax key='form-1'}
                { 'FormIt'|snippet:[
                    'param' => 'value',
                ]}
                Тут обычный код формы
            {/ajax}
</form>
Лёша
08 октября 2022, 00:00
modx.pro
2
1 020
+5

Комментарии: 3

Артур Шевченко
08 октября 2022, 00:10
0
Наверное, как эксперимент интересно, но вот так сходу не могу понять в чём преимущество перед классическим ajax-запросом? Аналогичную штуку на AjaxForm проще сделать, как по мне.
    Лёша
    08 октября 2022, 00:17
    0
    AjaxForm не использовал ни разу, использовал аналогичную штуку, только в виде сниппета и с jquery на фронте (ajaxChunk назывался, не я делал, коллега бывший).
    Преимущество тут в универсальности, можно что угодно аяксом загружать. Не нужно писать js и создавать tpl.
      Лёша
      08 октября 2022, 04:41
      0
      Ещё можно вложенные «аяксы» делать, например внутри формы регистрации форма для подтверждения телефона.
      И ajax-пагинацию, встроенная в pdoTools у меня почему-то не заводилась, у коллеги тоже
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      3