MODX PageBlocks - быстрая посадка верстки на MODX

Содержание

Предварительная настройка PageBlocks
Посадка верстки на PageBlocks
Посадка обычных блоков на конструктор
Посадка микс блока простой + с повторяющимися элементами
Разбор кода
Заполнение блоков данными
Вывод блоков на страницу

В данном уроке разберем платный компонент для MODX, под названием PageBlocks — так сказать отличную и более юзабильную альтернативу MIGX.

Страница компонента и его официальная документация находится здесь: https://modstore.pro/packages/other/pageblocks. Смотрите урок: как покупать и устанавливать дополнения с modstore.

Если вы разрабатываете на MODX 3, перед покупкой и установкой компонента, уточните у разработчика совместимость с ним.

Т.к. с оф. документацией как-то туговато и ее понимают далеко не все, решил написать свою версию для новичков. В рамках данного урока посадим на данный компонент парочку блоков.

Предварительная настройка PageBlocks

После активации пакета, у вас добавится в системных настройках раздел PageBlocks.

У каких то системных настроек есть описания, у каких то нет. Но суть, нам главное проверить следующую настройку: Создание чанка (pageblocks_create_chunk) если выключено, то включите, должно стоять ДА.

Все остальное, настраивайте по своему усмотрению, теперь можно переходить к натяжке блоков.

Посадка верстки на PageBlocks

PageBlocks, использует точно такой же синтаксис как и MIGX (на fenom), по этому если научились сажать компоненты на migx при помощи fenom, проблем быть не должно.

Посадка обычных блоков на конструктор

К обычным блокам относятся блоки в которых нет динамики (слайдеров, блоков faq, блоков с перечислениями и тому подобного). Т.е. обычные статические блоки типа этого.

Данный блок мы сажали на MIGX в первом уроке, я его натянул на PageBlocks — делается это однотипно посадки следующего блока:

Для создания блоков при помощи конструктора, идем в Пакеты — PageBlocks — Конструктор блоков, на открывшейся странице, жмем по кнопке Создать.

В сплывающем окне заполняем поля:

Название блока: любое и на любом языке (потом будите его видеть при наполнении).
Имя чанка: тоже любой только уже на транслите, например «zapis_na_priem».
И добавляем поля, ключи полей пишем только в транслите, например «pole_one».

Важно! Femon, плохо дружит с тире (name-pole), по этому старайтесь все имена указывать через нижнее подчеркивание (name_pole).

Поля содержат следующие данные:

Заполнять обязательно только Заголовок, ключ и тип поля. Ниже перечислены поля с их данными, которые я создал для выше указанного блока:

Заголовок: Заголовок, Ключ: title, Тип поля: Текст.
Заголовок: Текст, Ключ: text, Тип поля: Текст.
Заголовок: Название кнопки, Ключ: name_button, Тип поля: текст.
Заголовок: Ссылка, Ключ: link, Тип поля: текст.

После создания полей можно перейти во вкладку доступность, и указать где этот блок будет доступен, например только на главной странице.

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

Далее идем во вкладку чанк и помещаем туда HTML нашего блока, предварительно сразу можно подготовить его и прописать в него вместо статического контента, вывод полей {$name_polya}.

Конечный код блока с учетом ранее созданных полей должен принять вид:

<section class="section border-0 m-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1200">
	<div class="container">
		<div class="row align-items-center justify-content-center">
			<div class="col-sm-9 col-md-12 col-lg-7 text-center text-lg-end mb-4 mb-lg-0">
				<h2 class="font-weight-bold text-color-primary text-7 line-height-1 mb-1 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1700">{$title}</h2>
				<p class="font-weight-bold text-4 mb-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1900">{$text}</p>
			</div>
			<div class="col-lg-5 text-center text-lg-start ps-lg-4">
				<a href="{$link}" class="btn btn-primary btn-outline custom-btn-border-radius font-weight-bold text-3 btn-px-5 btn-py-3 ms-lg-2 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1500">{$name_button}</a>
			</div>
		</div>
	</div>
</section>

Разбор кода: Здесь все просто остался обычный html, в местах где нужно поставить текст из поля указан вывод поля {$name_polya}.

После сохранения блока у вас должен появиться новый чанк, и именем который вы указали при создании блока (проверьте).

Если чанк не появился, перепроверьте настройки. Далее код чанка можно редактировать и в pageBlock и в чанках.

Теперь посадим блок с повторяющимися элементами.

Посадка микс блока простой + с повторяющимися элементами

Блок выглядит следующим образом

Его html код:

<div class="container py-5 my-5">
	<div class="row justify-content-center pb-3 mb-4">
		<div class="col-lg-9 col-xl-8 text-center">
			<div class="overflow-hidden">
				<h2 class="font-weight-bold text-color-dark line-height-1 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">Frequently Asked Questions</h2>
			</div>
			<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
				<hr class="my-0 appear-animation" data-appear-animation="customLineProgressAnim" data-appear-animation-delay="650">
			</div>
			<p class="font-weight-light text-3-5 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
		</div>
	</div>
	<div class="row row-gutter-sm">	    
		<div class="col-md-8 col-lg-9 mb-5 mb-md-0">
			<svg class="custom-svg-2 overflow-visible" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 185 151">
				<g data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.1, 'transition': true, 'transitionDuration': 2000, 'isInsideSVG': true}">
					<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="850" d="M34.81,102.81L5.18,73.18c-2.13-2.13-2.13-5.59,0-7.72l29.63-29.63c2.13-2.13,5.59-2.13,7.72,0l29.63,29.63
						c2.13,2.13,2.13,5.59,0,7.72l-29.63,29.63C40.4,104.94,36.94,104.94,34.81,102.81z"/>
				</g>
				<g data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.2, 'transition': true, 'transitionDuration': 2500, 'isInsideSVG': true}">
					<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" d="M92.49,35.35L80.4,23.26c-1.75-1.75-1.75-4.59,0-6.34L92.49,4.83c1.75-1.75,4.59-1.75,6.34,0l12.09,12.09
						c1.75,1.75,1.75,4.59,0,6.34L98.83,35.35C97.08,37.1,94.24,37.1,92.49,35.35z"/>
				</g>
				<g data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 3000, 'isInsideSVG': true}">
					<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1150" d="M129.88,148.41l-43.21-43.21c-2.13-2.13-2.13-5.59,0-7.72l43.21-43.21c2.13-2.13,5.59-2.13,7.72,0l43.21,43.21
						c2.13,2.13,2.13,5.59,0,7.72l-43.21,43.21C135.46,150.54,132.01,150.54,129.88,148.41z"/>
				</g>
			</svg>
			<div class="accordion custom-accordion-style-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" id="accordion1">
				<div class="card card-default">
					<div class="card-header" id="collapse1HeadingOne">
						<h4 class="card-title m-0">
							<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1One" aria-expanded="false" aria-controls="collapse1One">
								1 - Why Choose Porto Auto Services?
							</a>
						</h4>
					</div>
					<div id="collapse1One" class="collapse" aria-labelledby="collapse1HeadingOne" data-bs-parent="#accordion1">
						<div class="card-body">
							<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
						</div>
					</div>
				</div>
				<div class="card card-default">
					<div class="card-header" id="collapse1HeadingTwo">
						<h4 class="card-title m-0">
							<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Two" aria-expanded="false" aria-controls="collapse1Two">
								2 - Cras a elit sit amet leo accumsan?
							</a>
						</h4>
					</div>
					<div id="collapse1Two" class="collapse" aria-labelledby="collapse1HeadingTwo" data-bs-parent="#accordion1">
						<div class="card-body">
							<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
						</div>
					</div>
				</div>
				<div class="card card-default">
					<div class="card-header" id="collapse1HeadingThree">
						<h4 class="card-title m-0">
							<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Three" aria-expanded="false" aria-controls="collapse1Three">
								3 - Hel officitur felis ultricis nan?
							</a>
						</h4>
					</div>
					<div id="collapse1Three" class="collapse" aria-labelledby="collapse1HeadingThree" data-bs-parent="#accordion1">
						<div class="card-body">
							<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
						</div>
					</div>
				</div>
				<div class="card card-default">
					<div class="card-header" id="collapse1HeadingFour">
						<h4 class="card-title m-0">
							<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Four" aria-expanded="false" aria-controls="collapse1Four">
								4 - Wuspaisse hendreirit vehicula leo?
							</a>
						</h4>
					</div>
					<div id="collapse1Four" class="collapse" aria-labelledby="collapse1HeadingFour" data-bs-parent="#accordion1">
						<div class="card-body">
							<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
						</div>
					</div>
				</div>
				<div class="card card-default">
					<div class="card-header" id="collapse1HeadingFive">
						<h4 class="card-title m-0">
							<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Five" aria-expanded="false" aria-controls="collapse1Five">
								5 - Lintegers aliquet ullamcorper dollor, quis sollic tudin?
							</a>
						</h4>
					</div>
					<div id="collapse1Five" class="collapse" aria-labelledby="collapse1HeadingFive" data-bs-parent="#accordion1">
						<div class="card-body">
							<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4 col-lg-3 text-center text-md-start">
			<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000">
				<h3 class="font-weight-bold text-color-dark text-transform-none text-5-5 mb-3">Our Mission</h3>
				<p class="pb-1 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<a href="demo-auto-services-about-us.html" class="btn btn-primary custom-btn-border-radius font-weight-bold btn-px-5 py-3 mb-2">VIEW MORE</a>
				<hr class="my-4">
			</div>
			<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1100">
				<h3 class="font-weight-bold text-color-dark text-transform-none text-5-5 pt-2 mb-3">Any Questions?</h3>
				<p class="pb-1 mb-2">Lorem ipsum dolor sit amet, consect etur adipiscing elit.</p>
				<a href="demo-auto-services-contact.html" class="btn btn-primary custom-btn-border-radius font-weight-bold btn-px-5 py-3">CONTACT US</a>
			</div>
		</div>
	</div>
</div>

Здесь акардионы — это блок с повторяющимися элементами, в принципе и сайтбар (сбоку от аккордионов), можно назвать повторяющимися элементами (заголовок, текст и кнопка). А получается: обвертка, заголовок и текст — это обычная статика (получается обычный блок).

Создаем блок faq и добавляем в него 2 обычных поля:

Заголовок: Заголовок, Ключ: title, Тип поля: Текст.
Заголовок: Текст, Ключ: text, Тип поля: Текстовая область.

И сохраняем данный блок.

А вот для блоков с повторяющимися полями нам сначала нужно создать таблицы со своим набором полей. Для этого переключитесь во вкладку Таблицы и создайте первую таблицу «faq_table» со следующим набором полей.

Заголовок: Вопрос, Ключ: vopros, Тип поля: Текст.
Заголовок: Ответ, Ключ: otvet, Тип поля: Текстовая область.

После создания полей, переключитесь во вкладку Столбцы сетки и добавляем в нее созданные поля.

Сохраняем таблицу и создаем еще одну faq_sidebar, со следующими полями:

Заголовок: Заголовок, Ключ: fs_zag, Тип поля: Текст.
Заголовок: Текст, Ключ: fs_text, Тип поля: Текстовая область.
Заголовок: Название кнопки, Ключ: fs_name_button, Тип поля: Текст.
Заголовок: Ссылка, Ключ: fs_button_link, Тип поля: Текст.
Заголовок: Вывести разделитель?, Ключ: fs_razdelitel, Тип поля: Флажки (checkbox), Возможные значения: .Да==1.

После этого добавляем первые 2 поля в столбцы сетки и сохраняем таблицу.

Возвращаемся во вкладку «Конструктор блоков», редактируем наш блок FAQ, добавляем в него 2 новых поля:

Заголовок: Добавить вопросы и ответы, Ключ: faq_table, Тип поля: Таблица, Таблица: faq_table.
Заголовок: Добавить данные в сайтбар, Ключ: faq_sidebar, Тип поля: Таблица, Таблица: faq_sidebar.
Сохраняем.

Ну и осталось добавить код в чанк, с учетом вывода полей он стал следующим:

<div class="container py-5 my-5">
	<div class="row justify-content-center pb-3 mb-4">
		<div class="col-lg-9 col-xl-8 text-center">
			<div class="overflow-hidden">
				<h2 class="font-weight-bold text-color-dark line-height-1 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">{$title}</h2>
			</div>
			<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
				<hr class="my-0 appear-animation" data-appear-animation="customLineProgressAnim" data-appear-animation-delay="650">
			</div>
			<p class="font-weight-light text-3-5 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{$text}</p>
		</div>
	</div>
	<div class="row row-gutter-sm">	    
		<div class="col-md-8 col-lg-9 mb-5 mb-md-0">
			<svg class="custom-svg-2 overflow-visible" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 185 151">
				<g data-plugin-float-element data-plugin-options=" { 'startPos': 'top', 'speed': 0.1, 'transition': true, 'transitionDuration': 2000, 'isInsideSVG': true } ">
					<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="850" d="M34.81,102.81L5.18,73.18c-2.13-2.13-2.13-5.59,0-7.72l29.63-29.63c2.13-2.13,5.59-2.13,7.72,0l29.63,29.63
						c2.13,2.13,2.13,5.59,0,7.72l-29.63,29.63C40.4,104.94,36.94,104.94,34.81,102.81z"/>
				</g>
				<g data-plugin-float-element data-plugin-options=" { 'startPos': 'top', 'speed': 0.2, 'transition': true, 'transitionDuration': 2500, 'isInsideSVG': true } ">
					<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" d="M92.49,35.35L80.4,23.26c-1.75-1.75-1.75-4.59,0-6.34L92.49,4.83c1.75-1.75,4.59-1.75,6.34,0l12.09,12.09
						c1.75,1.75,1.75,4.59,0,6.34L98.83,35.35C97.08,37.1,94.24,37.1,92.49,35.35z"/>
				</g>
				<g data-plugin-float-element data-plugin-options=" { 'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 3000, 'isInsideSVG': true } ">
					<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1150" d="M129.88,148.41l-43.21-43.21c-2.13-2.13-2.13-5.59,0-7.72l43.21-43.21c2.13-2.13,5.59-2.13,7.72,0l43.21,43.21
						c2.13,2.13,2.13,5.59,0,7.72l-43.21,43.21C135.46,150.54,132.01,150.54,129.88,148.41z"/>
				</g>
			</svg>
			<div class="accordion custom-accordion-style-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" id="accordion1">
                {foreach $faq_table as $idx => $row}
				<div class="card card-default">
					<div class="card-header" id="collapse{$idx}Heading{$idx}">
						<h4 class="card-title m-0">
							<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse{$idx}" aria-expanded="false" aria-controls="collapse{$idx}">{$row.vopros}</a>
						</h4>
					</div>
					<div id="collapse{$idx}" class="collapse" aria-labelledby="collapse{$idx}Heading{$idx}" data-bs-parent="#accordion{$idx}">
						<div class="card-body">
							<p class="mb-0">{$row.otvet}</p>
						</div>
					</div>
				</div>
                {/foreach}
			</div>
		</div>
		<div class="col-md-4 col-lg-3 text-center text-md-start">
            {foreach $faq_sidebar as $row}
			<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="10{$idx}0">
				<h3 class="font-weight-bold text-color-dark text-transform-none text-5-5 mb-3">{$row.fs_zag}</h3>
				<p class="pb-1 mb-2">{$row.fs_text}</p>
				<a href="{$row.fs_button_link}" class="btn btn-primary custom-btn-border-radius font-weight-bold btn-px-5 py-3 mb-2">{$row.fs_name_button}</a>
				{if $row.fs_razdelitel == 1}<hr class="my-4">{/if}
			</div>
            {/foreach}
		</div>
	</div>
</div>

Разбор кода

Все поля, что не в таблицах мы вызываем так {$name_pole}.

В вот поля в таблицах вызываем через массив:

{foreach $name_polya as $row}
	{$row.name_polya} {$row.name_polya_two}
{/foreach}

Если нужно получать idx (порядковый номер блока: 0,1,2,…), тогда массив вызываем так:

{foreach $name_polya as $idx => $row}
	{$idx} {$row.name_polya} {$row.name_polya_two}
{/foreach}

Бывает что, вам нужно нумеровать блоки, но нумеровать их вручную не айс да и нумерацию начинать с нуля тоже не айс, тогда можно поступить так {$idx + 1}.

Так тут действуют все модификаторы fenom, т.е. в чанках например можно проверять поля на пустоту (если не заполнили поле то и не выводить его код:

{if $name_polya} что-то {if $name_polya} что-то {/if}

Можно вызывать сниппеты, системные настройки, TV и т.д.

Заполнение блоков данными

Открываем нужную страницу (ресурс), во вкладке «PageBlocks» щелкаем по кнопке «Создать блок». В сплывающем окне выбираем нужный блок.

И заполняем все поля данными

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

Для того чтобы вывести все заполненные блоки, достаточно в нужном месте вывести сниппет PageBlocks, без каких либо параметров.

[[!PageBlocks]]
или на fenom
{'!PageBlocks' | snippet}

Вот так легко и просто можно посадить готовую верстку на CMS MODX при помощи компонента PageBlock. В следующих уроках: установим и настроим визуальный редактор контента и создадим дополнительные шаблоны и основные страницы.

< Делаем редактор блоков на Migx

MODX TinyMCE RTE — настройка визуального редактора >

MODX PageBlocks — компонент для быстрой посадки верстки на MODX