PageBlocks. Удобное управление контентом сайта.

Всем привет.

Документация

PageBlocks позволяет легко и быстро интегрировать верстку. Больше никаких дополнительных полей(tv). Добавляйте, удаляйте и перемещайте блоки в интерфейсе ресурса.

Блоки контента

Разберем несколько блоков для примера:

1. Обычный блок

Блок имеет структуру: заголовок, описание, 2 кнопки и картинку.


Теперь давайте создадим такой блок в конструкторе блоков:

В чанке hero нам доступны след. переменные: title, desc, appstore, googleplay и img

2. Блок с повторяющими элементами.

Здесь мы будем использовать дополнительную таблицу внутри блока:


В чанке выводим таблицу через параметр blocks(имя поля, которое мы задали в блоке):

{foreach $blocks as $block}
    <div class="card">
        <div class="card-header">
            <div class="icon {$block.icon}"></div>
            <h2>{$block.title}</h2>
        </div>
        <div class="card-body">
            {$block.desc}
        </div>
    </div>
{/foreach}

3. Готовые блоки.

Есть блок FAQ, который нужно вывести и на других страницах. Но, заполнять такие блоки на каждой странице было бы тупо.


Поэтому мы заполним блок только в одном месте — в базе готовых блоков.
1. Создаем структуру блока


2. Заполняем блок


3. Добавляем на страницы


Но, можно еще вывести этот блок вручную через идентификатор блока.

{'!pdoResources' | snippet: [
    'frontend_css' => '',
    'class' => 'pageBlock',
    'loadModels' => 'pageBlocks',
    'sortby' => 'rank',
    'sortdir' => 'asc',
    'limit' => 1,
    'tpl' => 'tpl.PageBlocks',
    'where' => [
        'id' => 4, // faq block id
        'active' => 1
    ],
]}

При обновлении базового блока, все соответствующие блоки будут обновлены автоматически, кроме тех блоков, у которых отмечена галочка «Уникальный блок».

Доступность

Каждый блок можно сделать доступным только для конкретной страницы или шаблона.

Вывод блоков на странице

{'!pdoResources' | snippet: [
    'frontend_css' => '',
    'class' => 'pageBlock',
    'loadModels' => 'pageBlocks',
    'sortby' => 'rank',
    'sortdir' => 'asc',
    'limit' => 0,
    'tpl' => 'tpl.PageBlocks',
    'where' => [
        'resource_id' => $_modx->resource.id,
        'active' => 1
    ],
]}

Мультиязычность

1. Контексты. (например, Babel)
Используем тот же код, что и выше.

2. Без контекстов (например, localizator)
В системной настройке pageblocks_contexts добавляем необходимые языки, например English==web||Russian==ru. Где English — это название языка, web — имя контекста. В недалеком будущем будет автоматический перевод.

Выводим блоки:

{'!pdoResources' | snippet: [
    'frontend_css' => '',
    'class' => 'pageBlock',
    'loadModels' => 'pageBlocks',
    'sortby' => 'rank',
    'sortdir' => 'asc',
    'limit' => 0,
    'tpl' => 'tpl.PageBlocks',
    'where' => [
        'resource_id' => $_modx->resource.id,
        'context_key' => $_modx->config.localizator_key,
        'active' => 1
    ],
]}

Экспорт / Импорт

Есть возможность экспортировать/импортировать блоки в формат csv. Очень удобно для копирования блоков с одной страницы в другую, а также для импорта большого кол-во однотипных блоков, но об этом узнаете чуть позже))


Продолжение следует…

Ссылка на компонент

P.S. Вы всегда бесплатно можете протестировать компонент на модхосте

assets/components/pageblocks/js/mgr/misc/utils.js