MODx: Как сделать мультилендинг на MODx

Привет, друзья! Сегодня мы научимся создавать мультилендинг на MODx Revolution.

Мультилендинг - это эффективный инструмент для увеличения конверсии Landing Page. Смысл данного инструмента в том, что вы можете настраивать вывод контента или части контента, в зависимости от поискового запроса или URL. Сегодня мы изучим базовые возможности создания мультилендинга на простом примере, а также настроим удобную админку по управлению мультилендингом для контент-менеджера, который сможет с легкостью заполнять уникальные торговые предложения (УТП) для каждого поискового запроса.

Для реализации мультилендинга нам понадобятся плагины MIGX и phpThumbOf. Данные плагины можно легко найти в установщике MODx.

Для более эффективного изучения этого урока, рекомендую сначала ознакомиться со следующими материалами:

• Базовый урок по MODx: https://youtu.be/wP1lvYX9Xzo
• Посадка типовой секции Landing Page на MODx: https://youtu.be/IMiUR_7wqtg

Скачать сниппет мультилендинга для MODx и ознакомиться с примером вывода, вы можете на GitHub.

Создание мультилендинга

1. Страница мультилендинга (где выводится сниппет) не должна быть кешируемой;
2. Создайте сниппет utp и наполните его:

   <?php
   
   //Входные параметры: Get параметр для мультиленда: &utp=, имя MIGX TV: utp:
   $utp = strip_tags($_GET["utp"]);
   $migx = $modx->resource->getTVValue('utp');
   
   //Функция для обработки картинок - MIGXImgThumb(изображение, ширина, высота):
   if(!function_exists(MIGXImgThumb)) {
   	function MIGXImgThumb($img, $w, $h) {
   		global $modx;
   		return $modx->runSnippet("phpthumbof", array('input' => $img, 'options' => 'w='.$w.'&height='.$h.'&zc=1'));
   	}
   }
   
   $arr_migx = $modx->fromJSON($migx);
   foreach($arr_migx as $arr_migx_set) {
   	if($arr_migx_set['url'] == $utp) {
   		
   		//1) Наполняем значения из TV Migx [В квадратных скобках имена полей из MIGX TV]:
   		$data_title = $arr_migx_set['title'];
   		$data_description = $arr_migx_set['description'];
   		$data_image = MIGXImgThumb($arr_migx_set['image'], 250, 250);
   		
   	}
   }
   
   if($data_title == '') {
   	
   	//2) Определяем дефолтные значения: сбрасываем все поля на 0 элемент массива:
   	$data_title = $arr_migx['0']['title'];
   	$data_description = $arr_migx['0']['description'];
   	$data_image = MIGXImgThumb($arr_migx['0']['image'], 250, 250);
   	
   }
   
   switch ($element) {
   
   	//3) Определяем вывод элементов в параметрах сниппета:
   	case "title": return $data_title; break;
   	case "description": return $data_description; break;
   	case "image": return $data_image; break;
   
   }
   
   

   В дальнейшем, настраивайте сниппет под ваш проект, в зависимости от переменных полей MIGX;
3. Создайте дополнительное поле image, Тип ввода - Изображение;
4. Создайте дополнительное поле utp и привяжите его к нужному шаблону. Тип ввода - MIGX.
   Вкладки формы (настраиваются под ваш проект):

   [
   {"caption":"Информация", "fields": [
       {"field":"title","caption":"Заголовок ЛП"},
       {"field":"url","caption":"Параметр URL"},
       {"field":"description","caption":"Описание ЛП","inputTVtype":"textarea"}
   ]},
   {"caption":"Изображение", "fields":[
       {"field":"image","caption":"Изображение","inputTV":"image"}
   ]}
   ] 
   

   Разметка колонок (настраиваются под ваш проект):
   

   [
   {"header": "Параметр URL", "width": "160", "sortable": "true", "dataIndex": "url"},
   {"header": "Заголовок ЛП", "width": "160", "sortable": "true", "dataIndex": "title"},
   {"header": "Изображение", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
   ]
   

   Замена кнопки "Добавить элемент": Добавить УТП;
5. Создайте соответствующий вывод элементов в шаблоне (Пример):

   <h1>[[utp? &element=`title`]]</h1>
   <p>[[utp? &element=`description`]]</p>
   <p><img src="[[utp? &element=`image`]]" alt="[[utp? &text=`title`]]"></p>
   

УТП по-умолчанию можно настроить в таблице предложений простым перетаскиванием нужной строки наверх.

Более подробно разбираем данный урок на YouTube.