Webdesign Создание сайта Part-8 Посадка на MODX

Посадка секции "Партнеры компании" - Слайдер

[maxbutton id="12" url="#ietm-section-otzivi" text="Посадка Item-секции ОТЗЫВЫ КЛИЕНТОВ" ]

[maxbutton id="12" url="#contacts" text="Посадка секции КОНТАКТЫ" ]

[maxbutton id="12" url="#bottom_menu" text="Посадка нижнего МЕНЮ" ]

Сразу создадим Новую категорию:

Далее выводим с помощью PdoResources

*
*

        [[pdoResources? 
        &parents=`14`
        &depth=`0`
        &tpl=`logoitem_partner_chank`
        &includeTVs=`image`
        &processTVs=`image`
        &limit=`10`
        &includeContent=`1`
        ]]

*
*

[[pdoResources?

&parents=`14`

&depth=`0`

&tpl=`logoitem_partner_chank`

&includeTVs=`image`

&processTVs=`image`

&limit=`10`

&includeContent=`1`

]]

Для нового Портфолио:

Расшифровка строк:

И уже видим вывод 4-х копий 1-го Item-a:

Теперь создадим (добавим) ПУНКТ МЕНЮ - для того что бы можно было ссылаться на "Дочерние ресурсы":

Не дает указать "Внутренняя страница", поэтому пока указываем (пустой шаблон).

А не удается - потому что нужно создать "Шаблон" с именем "Внутренняя страница" - и тогда сможем указать ее...

И только после "СОХРАНЕНИЯ" появится вкладка "Дочерние ресурсы"

заполняем далее вкладки:

Теперь уже более точно отредактируем СНИППЕТ вывода в чанке: "s-brands"

Финальный код снипов-вывода:

ВСЕ ТАКИ НУЖНО УКАЗАТЬ ЦИФРУ РЕСУРСА))) &parents=14

*
        [[pdoResources? 
        &parents=`14`
        &depth=`0`
        &tpl=`logoitem_partner_chank`
        &includeTVs=`image`
        &processTVs=`image`
        &limit=`10`
        &includeContent=`1`
        ]]
*
*

[[pdoResources?

&parents=`14`

&depth=`0`

&tpl=`logoitem_partner_chank`

&includeTVs=`image`

&processTVs=`image`

&limit=`10`

&includeContent=`1`

]]

Сохраним!

Далее,

Создадим Пустой Шаблон , который мы привяжем к определенным ресурсам и зададим - Дополнительное поле

[images] - (оно уже есть, просто укажем)

МОЖНО ДАЖЕ ПРОСТО БЕЗ КАТЕГОРИИ

которое мы упомянули в PdoResources

Далее заполняем вкладки:

И давайте позаполняем "ДОЧЕРНИЕ РЕСУРСЫ"

Так заполняем Первый "Дочерний ресурс":

И так все КОПИРУЕМ))

Финальный код снипов:

*
*
				<!-- Item-Logo -->
				<div class="item-carousel">
					<a href="#">
						<img src="[[+tv.image]]" alt="[[+pagetitle]][[+description]]">
					</a>
				</div>
				<!-- Item-Logo -->
*
*

</a>

</div>

Далее,

[maxbutton id="14" text="Посадка Item-секции ОТЗЫВЫ КЛИЕНТОВ" ]

Эту секцию будем сажать на MODX:

Создадим новую категорию:

Сначала лучше "посадить" ЗАГОЛОВОК СЕКЦИИ, что бы дополнительные поля у нас шли в нужном порядке:

Создадим дополнительное поле для ЗАГОЛОВКА:

Параметры ввода:

Доступность для шаблонов:

И сделаем вывод уже ЗАГОЛОВКА холдером:

*
*

[[*zagolovok_otzivi]]

*
*

[[*zagolovok_otzivi]]

Отлично! Без скрина поверим что все ок!

Давайте создадим "Дополнительное поле" MIGX:

Теперь отредактируем КОНФИГУРАЦИЮ:

Вкладки формы:

*
*
[ {"caption":"Info", "fields": [ {"field":"image","caption":"Фотография","inputTVtype":"image"}, {"field":"Name","caption":"Имя"},
{"field":"Dolzhnost","caption":"Должность"},
{"field":"Deviz","caption":"Девиз"},
{"field":"description","caption":"Описание","inputTVtype":"richtext"} ]} ]
*
*

[ {"caption":"Info", "fields": [ {"field":"image","caption":"Фотография","inputTVtype":"image"}, {"field":"Name","caption":"Имя"},

{"field":"Dolzhnost","caption":"Должность"},

{"field":"Deviz","caption":"Девиз"},

{"field":"description","caption":"Описание","inputTVtype":"richtext"} ]} ]

Разметка колонок:

*
*
[
{"header": "Имя клиента", "width": "140", "sortable": "true", "dataIndex": "Name"},
{"header": "Должность", "width": "90", "sortable": "true", "dataIndex": "Dolzhnost"},
{"header": "Фотография", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]
*
*

[

{"header": "Имя клиента", "width": "140", "sortable": "true", "dataIndex": "Name"},

{"header": "Должность", "width": "90", "sortable": "true", "dataIndex": "Dolzhnost"},

{"header": "Фотография", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}

]

И более подробный вывод Item-мов:

Соответствующий код MIGX полей:

Вкладки формы:

*
*

[
{"caption":"Info", "fields":[ 
{"field":"foto_client","caption":"Фотография","inputTVtype":"image"}, 
{"field":"Name","caption":"Имя"},
{"field":"Dolzhnost","caption":"Должность"},
{"field":"Deviz","caption":"Девиз"},
{"field":"text_otziv","caption":"Отзыв клиента","inputTVtype":"richtext"}
]}
]

*
*

[

{"caption":"Info", "fields":[

{"field":"foto_client","caption":"Фотография","inputTVtype":"image"},

{"field":"Name","caption":"Имя"},

{"field":"Dolzhnost","caption":"Должность"},

{"field":"Deviz","caption":"Девиз"},

{"field":"text_otziv","caption":"Отзыв клиента","inputTVtype":"richtext"}

]}

]

Разметка колонок:

*
*

[
{"header": "Фотография", "width": "50", "sortable": "false", "dataIndex": "foto_client","renderer": "this.renderImage"},
{"header": "Имя клиента", "width": "140", "sortable": "true", "dataIndex": "Name"},
{"header": "Должность", "width": "90", "sortable": "true", "dataIndex": "Dolzhnost"},
{"header": "Девиз", "width": "90", "sortable": "true", "dataIndex": "Deviz"},
{"header": "Отзыв клиента", "width": "90", "sortable": "true", "dataIndex": "text_otziv"}
]

*
*

[

{"header": "Фотография", "width": "50", "sortable": "false", "dataIndex": "foto_client","renderer": "this.renderImage"},

{"header": "Имя клиента", "width": "140", "sortable": "true", "dataIndex": "Name"},

{"header": "Должность", "width": "90", "sortable": "true", "dataIndex": "Dolzhnost"},

{"header": "Девиз", "width": "90", "sortable": "true", "dataIndex": "Deviz"},

{"header": "Отзыв клиента", "width": "90", "sortable": "true", "dataIndex": "text_otziv"}

]

Теперь заполним наши Дополнительные поля:

И остальные ПРО-КОПИРУЕМ:

GO в ЧАНК:

Этот код ВРЕМЕННЫЙ!!! Может его вообще позже уберем, пока просто оставим что бы видеть вывод:

&parents - id = 0 - это индекс ресурса (родительский элемент)

Теперь сделаем вывод именно по ресурсам из уже заполненных (нами) Дополнительных MIGX-полей:

Код финальный (Под-Чанка):

*
*

		<div class="col-sm-4">

			<div class="item-otzivi">

				<div class="foto-img-wrap">
					<img src="[[+image]]" alt="[[+description]]">
				</div>

				<div class="head-otzivi">
					<h4>[[+Name]]</h4>
					<p>[[+Dolzhnost]]</p>
				</div>

				<div class="text-otzivi">
					<h4>[[+Deviz]]</h4>
					<p>[[+description]]</p>
				</div>

			</div>

		</div>

*
*

</div>

<p>[[+Dolzhnost]]</p>

</div>

<h4>[[+Deviz]]</h4>

<p>[[+description]]</p>

</div>

А в самом чанке - МЕНЯЕМ НАХРЕН код вывода на правильный:

*
*

	[[getImageList?
	&tvname=`item-otzivi-migx` - это MIGX Доп.поле
	&tpl=`item-chank-otzivi`]] - это под-Чанк подробный


*
*

[[getImageList?

&tvname=`item-otzivi-migx` - это MIGX Доп.поле

&tpl=`item-chank-otzivi`]] - это под-Чанк подробный

И вот только теперь (при заполненных данных) - полчим корректный вывод:

Отлично! Посмотрим на наш вывод секции:

Далее,

[maxbutton id="14" url="contacts" text="Посадка секции КОНТАКТЫ" ]

Делаем посадку этой секции:

Давайте создадим категорию:

Давайте создадим Дополнительное Поле:

Добавим "ДОПОЛНИТЕЛЬНЫЕ ПОЛЯ":

И создадим "ДОПОЛНИТЕЛЬНОЕ ПОЛЕ" для телефона

И создадим "ДОПОЛНИТЕЛЬНОЕ ПОЛЕ" для вставки Яндекс карты:

Далее создадим Яндекс-Карту:

И создаем карту:

Укажем этот размер:

Но перед этим нужно создать "ДОПОЛНИТЕЛЬНОЕ ПОЛЕ" в которое мы будем выводить Яндекс-Карту:

Готово! Дополнительное поле для Карты создано!

Теперь Копируем код карты и вставляем его "Дополнительное поле"

Теперь идем в ЧАНК - и выведем "Дополнительное поле"

*
*
[[*map_code]]
*
*

[[*map_code]]

Сохраняем и видим нашу карту:

Мы уже добавили стиль для контейнера <MAP> что бы наша карта выводилась адаптивной.

И нужно еще подправить код вывода карты Яндекс:

Ранее прописали в стилях ГАБАРИТЫ контейнера:

Отлично: видим, что карта находится в рамках контейнера.

[maxbutton id="14" text="Вывод формы ОБРАТНОЙ СВЯЗИ" ]

Теперь сделаем вывод "ФОРМЫ ОБРАТНОЙ СВЯЗИ"

И таким же образом создадим остальные "ДОПОЛНИТЕЛЬНЫЕ ПОЛЯ":

Далее НАПОЛНИМ "ДОПОЛНИТЕЛЬНЫЕ ПОЛЯ"

Пропишем "ДОПОЛНИТЕЛЬНЫЕ ПОЛЯ" в чанке:

Сохраним и увидим: наши Дополнительные поля - вывелись!

Далее,

Выведем Заголовок ФОРМЫ и Сообщение ФОРМЫ:

И создадим дополнительное поле для "Объявления" в форме (Сообщения - как я его назвал):

Отлично! Создали поля!

Теперь заполним их:

Идем в чанк "s-contacts" и выводим ДОП. ПОЛЯ:

*
*

[[*zagolovok_forma]]


[[*message_forma]]

*
*

[[*zagolovok_forma]]

[[*message_forma]]

Отлично! Видим вывод текста для ФОРМЫ:

Далее,

[maxbutton id="12" url="#bottom_menu" text="Посадка нижнего МЕНЮ" ]

Выводить будем через PdoTools - но перед заполнением, нам необходимо СОЗДАТЬ РЕСУРСЫ (Собственно сами Пункты МЕНЮ)

Но они у нас уже созданы: (Мы создали их при посадке ГЛАВНОГО МЕНЮ):

Далее идем в ЧАНК нижнего МЕНЮ:

*
*

[[pdoMenu? &parents=`0` &level=`1`]]

*
*

[[pdoMenu? &parents=`0` &level=`1`]]

Что к чему (толкование вывода)

Смотрим:

Рубрики:

WEB-Верстка