FENOM'енальный курс. Часть 11. Главная страница - хиты продаж, категории каталога, слайдер и преимущества.

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

Начнем мы с вами с полей, для которых нам понадобится компонент MIGX, а именно это будет слайдер и блок с преимуществами. В нашем случае, мы также воспользуемся статьей, которую я писал ранее “MODx Revo, использование MIGX в проектах на примере слайдера”. В ней я достаточно подробно расписал то, как сделать поле MIGX, не используя конструктор конфигураций.

Начнем с нашего слайдера. Для начала создадим TV-поле slider, конечно в параметрах ввода нужно указать тип ввода — MIGX, где в праметрах ввода указываем следующие вкладки формы:

[{"caption":"Image", "fields": [
    {"field":"set","caption":"Заголовок"},
    {"field":"description","caption":"Текст"}, 
    {"field":"image","caption":"Изображение","inputTVtype":"image"},
	{"field":"resid","caption":"ID ресурса для перехода"}
  ]
}]
	

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

[{
  "header": "Заголовок", "sortable": "true", "dataIndex": "set"
},{
  "header": "Текст", "sortable": "true", "dataIndex": "description"
},{
  "header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"
},{
  "header": "ID ресурса для перехода", "sortable": "true", "dataIndex": "resid"
}]
	

Хотя у нас с вами нет на слайдах ни заголовка, ни текста, я все-таки оставил эти параметры. Теперь мы можем заполнить наш слайдер:

После заполнения мы с вами можем приступить к выводу нашего слайдера. Шаблонизатор Fenom предоставляет классную возможность обработки наших TV-параметров MIGX. Например, наш слайдер можно вывести вот так (к сожалению, пока не нашел как обработать источник файлов):

{set $rows = json_decode($_modx->resource.slider, true)}
{foreach $rows as $idx => $row}
	<div>
		{if $row.resid?}<a href="{$row.resid | url}">{/if}
		{set $image = $_modx->runSnippet('phpthumbon', [
			'input' => 'assets/files/'~$row.image,
			'options' => 'w=1920&h=395&zc=1&q=99'
		])}
		<img src="{$image}" alt="{$row.set}">
		{if $row.resid?}</a>{/if}
	</div>
{/foreach}
	

Или воспользоваться стандартным сниппетом getImageList, но здесь у нас не будет работать в чанках Fenom:

{$_modx->runSnippet('getImageList', [
	'tvname' => 'slider',
	'tpl' => 'sliderTpl'
])}
	

Чанк sliderTpl:

<div>
	<img src="[[+image]]" alt="[[+set:htmlent]]">
</div>
	

При использовании Fenom, я вам советую использовать первый вариант. Соответственно, аналогично нам нужно реализовать преимущества под слайдером. Создаем TV-параметр advantages, где вкладки формы:

[{"caption":"Image", "fields": [
    {"field":"set","caption":"Заголовок"},
    {"field":"description","caption":"Текст"}, 
    {"field":"iconclass","caption":"Класс иконки"}
  ]
}]
	

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

[{
  "header": "Заголовок", "sortable": "true", "dataIndex": "set"
},{
  "header": "Текст", "sortable": "true", "dataIndex": "description"
},{
  "header": "Класс иконки", "sortable": "true", "dataIndex": "iconclass"
}]
	

Наполняем преимущества в панели администратора.

И в синтаксисе Fenom вызов в шаблоне:

{set $rows = json_decode($_modx->resource.advantages, true)}
{foreach $rows as $idx => $row}
	<div class="col-lg-4 item-wrap">
		<div class="item">
			<div class="icons">
				<i class="fa {$row.iconclass}"></i>
			</div>
			<span class="title">{$row.set}</span>
			<p>{$row.description}</p>
		</div>
	</div>
{/foreach}
	

Отлично! У нас с вами есть два рабочих блока на главной странице. Предлагаю перейти к каталогу. Если мы посмотрим на блок каталога на главной, то увидим, что у нас должно быть еще 2 параметра:

• тип плитки (широкий, узкий)
• изображение для главной страницы

Для TV-параметра типа плитки я выбрал имя main_type, и заполнен он у меня следующим образом (просто выведу 2 скриншота, а в видео вы подробно посмотрите):

Теперь создадим TV-параметр main_img по аналогии с уже созданным – menu_image. Осталось заполнить данные поля у категорий товаров:

И теперь предлагаю вывести все это дело с помощью pdoResources в шаблоне главной страницы:

{$_modx->runSnippet('pdoResources', [
	'parents' => 2,
	'depth' => 0,
	'tpl' => '@FILE chunks/rubric_list.tpl',
	'includeTVs' => 'main_type,main_img',
	'processTVs' => 1,
	'sortby' => 'menuindex',
	'sortdir' => 'ASC',
	'limit' => 0
])}
	

И чанк rubric_list.tpl:

<div class="{$_pls['tv.main_type'] == 1 ? 'col-sm-3' : 'col-sm-6'} item-wrap">
    <div class="item">
        <a href="{$id | url}">
            <img src="{if $_pls['tv.main_type'] == 1?}{$_pls['tv.main_img'] | phpthumbon: 'w=280&h=200&zc=1'}{else}{$_pls['tv.main_img'] | phpthumbon: 'w=560&h=200&zc=1'}{/if}" alt="{$pagetitle | htmlent}">
            <span>{$pagetitle}</span>
        </a>
    </div>
</div>
	

Олично! Мы с вами вывели каталог товаров. Как легко у нас все получается – прямо сказка.

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

• Создать TV-параметр для хранения товаров
• Написать сниппет для вывода этих товаров на основе pdoTools, чтобы сохранился порядок сортировки

Выглядит в админке это примерно так:

Для реализации нам понадобится компонент SuperBoxSelect из официального репозитория.

Создаем TV-параметр products для наших хитов продаж. Также приведу вам скриншоты:

И предлагаю вам наполнить данное TV-поле:

Для вывода данных товаров я написал специальный сниппет products.php:

<?php
if (!$modx->loadClass('pdofetch', MODX_CORE_PATH . 'components/pdotools/model/pdotools/', false, true)) {
    return false;
}
$pdoFetch = new pdoFetch($modx, $scriptProperties);
$productsarr = explode("||", $products);
$output = '';
foreach($productsarr as $item){
	$object = $modx->getObject("msProduct", $item);
	if($object){
		$data = $object->toArray();
		$output .= $pdoFetch->getChunk($tpl, $data);
	}
}
echo $output;
	

Сниппет довольно простой и принимает 2 параметра: products – это содержимое нашего TV и tpl – чанк для вывода. Вызов в шаблоне будет примерно такой:

{$_modx->runSnippet("@FILE snippets/products.php", [
	'products' => $_modx->resource.products,
	'tpl' => '@FILE chunks/product_tpl.tpl'
])}
	

А теперь попробуйте поменять порядок товаров просто перетаскивая их лайбочки – согласитесь очень удобно!