Привет, друзья! Сегодня мы научимся создавать мультилендинг на MODx Revolution.
Мультилендинг - это эффективный инструмент для увеличения конверсии Landing Page. Смысл данного инструмента в том, что вы можете настраивать вывод контента или части контента, в зависимости от поискового запроса или URL. Сегодня мы изучим базовые возможности создания мультилендинга на простом примере, а также настроим удобную админку по управлению мультилендингом для контент-менеджера, который сможет с легкостью заполнять уникальные торговые предложения (УТП) для каждого поискового запроса.
Для реализации мультилендинга нам понадобятся плагины MIGX и phpThumbOf. Данные плагины можно легко найти в установщике MODx.
Для более эффективного изучения этого урока, рекомендую сначала ознакомиться со следующими материалами:
- Базовый урок по MODx: Ознакомиться
- Посадка типовой секции Landing Page на MODx: Страница урока
Скачать сниппет мультилендинга для MODx из данного урока.
Создание мультилендинга
- Страница мультилендинга (где выводится сниппет) не должна быть кешируемой;
- Создайте сниппет 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; - Создайте дополнительное поле image, Тип ввода - Изображение;
- Создайте дополнительное поле 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"} ]
Замена кнопки "Добавить элемент": Добавить УТП; - Создайте соответствующий вывод элементов в шаблоне (Пример):
<h1>[[utp? &element=`title`]]</h1> <p>[[utp? &element=`description`]]</p> <p><img src="[[utp? &element=`image`]]" alt="[[utp? &text=`title`]]"></p>
УТП по-умолчанию можно настроить в таблице предложений простым перетаскиванием нужной строки наверх.
Премиум уроки от WebDesign Master
Другие уроки по теме «MODx»
- Создание сайта с нуля. Урок #34. Посадка секции «Поставляемое оборудование» на MODx (pdoResources)
- Создание сайта с нуля. Урок #33. Посадка секции «Выполненные работы» на MODx (Всплывающие окна)
- Создание сайта с нуля. Урок #32. Посадка секции «Направления услуг» на MODx (pdoResources)
- Создание сайта с нуля. Урок #31. Посадка галереи на MODx (MIGX + phpthumbof)
- Создание сайта с нуля. Урок #30. Посадка секции тизеров на MODx
- Создание сайта с нуля. Урок #29. Посадка HTML верстки шапки на MODx