Посадка сложных блоков на MIGX, или как выводить MIGX в MIGX

Содержание

Натяжка блока с текстом и слайдером на MIGX
Создание конфигураций
Создание TV с конфигурацией MIGX
Ввод данных
Вывод блока на страницу

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

Html разметка данного блока:

<section class="section border-0 m-0">
	<div class="container pb-3 my-5">
		<div class="row justify-content-center pb-3 mb-4">
			<div class="col text-center">
				<h2 class="font-weight-bold text-color-dark line-height-1 mb-0">See What Clients Are Saying</h2>
				<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
					<hr class="my-0">
				</div>
				<p class="font-weight-bold text-3-5 mb-1">We are very proud of the service we provide and stand by every product we carry.</p>
				<p class="font-weight-light text-3-5 mb-0">Read our testimonials from our happy customers.</p>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="owl-carousel nav-outside nav-style-1 nav-dark nav-arrows-thin nav-font-size-lg custom-carousel-box-shadow-1 mb-0" data-plugin-options=" { 'responsive': { '0': { 'items': 1}, '479': { 'items': 1}, '768': { 'items': 2}, '979': { 'items': 2}, '1199': { 'items': 3}}, 'autoplay': true, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': true, 'margin': 15, 'stagePadding': '75' } ">
					<div>
						<div class="card custom-border-radius-1">
							<div class="card-body">
								<div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center mb-0">
									<blockquote>
										<p class="text-color-dark text-3 font-weight-light px-0 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</blockquote>
									<div class="testimonial-author">
										<p><strong class="font-weight-extra-bold">John Smith</strong></p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="card custom-border-radius-1">
							<div class="card-body">
								<div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center mb-0">
									<blockquote>
										<p class="text-color-dark text-3 font-weight-light px-0 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</blockquote>
									<div class="testimonial-author">
										<p><strong class="font-weight-extra-bold">John Doe</strong></p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="card custom-border-radius-1">
							<div class="card-body">
								<div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center mb-0">
									<blockquote>
										<p class="text-color-dark text-3 font-weight-light px-0 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</blockquote>
									<div class="testimonial-author">
										<p><strong class="font-weight-extra-bold">John Smith</strong></p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="card custom-border-radius-1">
							<div class="card-body">
								<div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center mb-0">
									<blockquote>
										<p class="text-color-dark text-3 font-weight-light px-0 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</blockquote>
									<div class="testimonial-author">
										<p><strong class="font-weight-extra-bold">John Doe</strong></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

Натяжка блока с текстом и слайдером на MIGX

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

Создание конфигураций

Данный блок у нас получается поделится на 2: обвертка + текст и слайды, давайте создадим их.

Идем в управление MIGX и добавляем новый элемент с именем customer_reviews, в поле замены пишем «Добавить отзывы» и переходим на вкладку «Formtabs».

На вкладке «Formtabs» жмем по кнопке «Добавить элемент», и в сплывающем окне снова «Добавить элемент». И создаем по очереди элементы.

Fieldname – title, Caption – Заголовок.
Fieldname – subtitle, Caption – Подзаголовок.
Fieldname – text, Caption – Текст.
Fieldname – slides, Caption – Добавить слайды, Input TV Type – Input TV type — migx, Configs — customer_reviews_config (здесь мы указываем имя 2й конфигурации).
Сохранить и закрыть. После чего переходим во вкладку Columns и создаем колонки.

Header – Заголовок, Field – title.
Header – Подзаголовок, subtitle.
Header – Текст, Field – text.

Сохраняем и закрываем. Теперь создаем еще одну конфигурацию:

Name: customer_reviews_config (ее мы указали в поле slides).

Замена «Добавить элемент»: Добавить отзывы. И переходим к созданию полей.

Создаем поля:

Fieldname – text_reviews, Caption – Текст отзыва.
Fieldname – name, Caption – Имя человека оставившего отзыв.

Переходим во вкладку Columns и создаем колонки:

Header – Текст отзыва, Field – text_reviews
Header – Имя, name.

Создание TV с конфигурацией MIGX

В дереве MODX на вкладке «Элементы», нажмите + напротив пункта «Дополнительные поля» и вводим следующее:

«Имя» — customer_reviews; «Подпись» — Блок с отзывами, «Категория» — MIGX.
Во вкладке «Параметры ввода» в «Тип ввода» выбираем migx, а в поле «Конфигурации» вводим customer_reviews.
Во вкладке «Доступно для шаблонов» выбираем те шаблоны, для которых будет доступен ввод в это поле.

Ввод данных

Откроем документ, для которого присвоено поле customer_reviews с MIGX с конфигурацией и введём в него какие-нибудь данные.

Не забудьте сохранить изменения.

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

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

1. Обвертка и текст (чанк customer_reviews)

<section class="section border-0 m-0">
	<div class="container pb-3 my-5">
		<div class="row justify-content-center pb-3 mb-4">
			<div class="col text-center">
				<h2 class="font-weight-bold text-color-dark line-height-1 mb-0">See What Clients Are Saying</h2>
				<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
					<hr class="my-0">
				</div>
				<p class="font-weight-bold text-3-5 mb-1">We are very proud of the service we provide and stand by every product we carry.</p>
				<p class="font-weight-light text-3-5 mb-0">Read our testimonials from our happy customers.</p>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="owl-carousel nav-outside nav-style-1 nav-dark nav-arrows-thin nav-font-size-lg custom-carousel-box-shadow-1 mb-0" data-plugin-options=" { 'responsive': { '0': { 'items': 1}, '479': { 'items': 1}, '768': { 'items': 2}, '979': { 'items': 2}, '1199': { 'items': 3}}, 'autoplay': true, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': true, 'margin': 15, 'stagePadding': '75' } ">

					Здесь идут слайды

				</div>
			</div>
		</div>
	</div>
</section>

Ну и давайте зразу заполним данный чанк полями из первой конфигурации:

<section class="section border-0 m-0">
    <div class="container pb-3 my-5">
    	<div class="row justify-content-center pb-3 mb-4">
    		<div class="col text-center">
    			<h2 class="font-weight-bold text-color-dark line-height-1 mb-0">[[+title]]</h2>
    			<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
    				<hr class="my-0">
    			</div>
    			<p class="font-weight-bold text-3-5 mb-1">[[+subtitle]]</p>
    			<p class="font-weight-light text-3-5 mb-0">[[+text]]</p>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col">
    			<div class="owl-carousel nav-outside nav-style-1 nav-dark nav-arrows-thin nav-font-size-lg custom-carousel-box-shadow-1 mb-0" data-plugin-options=" { 'responsive': { '0': { 'items': 1}, '479': { 'items': 1}, '768': { 'items': 2}, '979': { 'items': 2}, '1199': { 'items': 3}}, 'autoplay': true, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': true, 'margin': 15, 'stagePadding': '75' } ">
        			Здесь слайды
				</div>
			</div>
		</div>
	</div>
</section>

2. Слайды, ну вернее нам нужен, только 1 слайд (чанк customer_reviews_slide):

<div>
	<div class="card custom-border-radius-1">
		<div class="card-body">
			<div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center mb-0">
				<blockquote>
					<p class="text-color-dark text-3 font-weight-light px-0 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</blockquote>
				<div class="testimonial-author">
					<p><strong class="font-weight-extra-bold">John Doe</strong></p>
				</div>
			</div>
		</div>
	</div>
</div>

И тоже сразу заполним его полями из второй конфигурации:

<div>
	<div class="card custom-border-radius-1">
		<div class="card-body">
			<div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center mb-0">
				<blockquote>
					<p class="text-color-dark text-3 font-weight-light px-0 mb-2">[[+text_reviews]]</p>
				</blockquote>
				<div class="testimonial-author">
					<p><strong class="font-weight-extra-bold">[[+name]]</strong></p>
				</div>
			</div>
		</div>
	</div>
</div>

Теперь нам нужно связать 2 этих чанка (получится migx в migx), для этого вместо текста Здесь слайды, делаем вызов
getImageList, в конечном итоге код чанка будет следующим:

<section class="section border-0 m-0">
    <div class="container pb-3 my-5">
    	<div class="row justify-content-center pb-3 mb-4">
    		<div class="col text-center">
    			<h2 class="font-weight-bold text-color-dark line-height-1 mb-0">[[+title]]</h2>
    			<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
    				<hr class="my-0">
    			</div>
    			<p class="font-weight-bold text-3-5 mb-1">[[+subtitle]]</p>
    			<p class="font-weight-light text-3-5 mb-0">[[+text]]</p>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col">
    			<div class="owl-carousel nav-outside nav-style-1 nav-dark nav-arrows-thin nav-font-size-lg custom-carousel-box-shadow-1 mb-0" data-plugin-options=" { 'responsive': { '0': { 'items': 1}, '479': { 'items': 1}, '768': { 'items': 2}, '979': { 'items': 2}, '1199': { 'items': 3}}, 'autoplay': true, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': true, 'margin': 15, 'stagePadding': '75' } ">
        			[[!getImageList?
                    &tpl=`customer_reviews_slide`
                    &value=`[[+slides]]`
                   ]]
				</div>
			</div>
		</div>
	</div>
</section>

Ну и остается сделать общий вывод migx в месте этого блока:

[[getImageList?
&tvname=`customer_reviews`
&tpl=`customer_reviews`
]]

На Fenom вообще можно ничего не бить на чанки, так весь код блока будет таким:

{set $rows = json_decode($_modx->resource.customer_reviews, true)}
<section class="section border-0 m-0">
	<div class="container pb-3 my-5">
        {foreach $rows as $row}
		<div class="row justify-content-center pb-3 mb-4">
			<div class="col text-center">
				<h2 class="font-weight-bold text-color-dark line-height-1 mb-0">{$row.title}</h2>
				<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
					<hr class="my-0">
				</div>
				<p class="font-weight-bold text-3-5 mb-1">{$row.subtitle}</p>
				<p class="font-weight-light text-3-5 mb-0">{$row.text}</p>
			</div>
		</div>
		{/foreach} 
		<div class="row">
			<div class="col">
				<div class="owl-carousel nav-outside nav-style-1 nav-dark nav-arrows-thin nav-font-size-lg custom-carousel-box-shadow-1 mb-0" data-plugin-options=" { 'responsive': { '0': { 'items': 1}, '479': { 'items': 1}, '768': { 'items': 2}, '979': { 'items': 2}, '1199': { 'items': 3}}, 'autoplay': true, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': true, 'margin': 15, 'stagePadding': '75' } ">
                {set $items = $row.slides | fromJSON}
                {foreach $items as $idx => $item}
					<div>
						<div class="card custom-border-radius-1">
							<div class="card-body">
								<div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center mb-0">
									<blockquote>
										<p class="text-color-dark text-3 font-weight-light px-0 mb-2">{$item.text_reviews}</p>
									</blockquote>
									<div class="testimonial-author">
										<p><strong class="font-weight-extra-bold">{$item.name}</strong></p>
									</div>
								</div>
							</div>
						</div>
					</div>
                {/foreach}
				</div>
			</div>
		</div>
	</div>
</section>

Получаем рабочий блок

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

Если еще дальше пойти в изучение MIGX, то можно сделать целый редактор блоков (с возможностью перетаскивания и т.п.). Как раз об этом речь пойдет в следующем уроке: Делаем редактор блоков на Migx.

< MIGX | MODX Revo

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