WebDesign Master
Курсы
Как сделать мультилендинг на MODx
MODx

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

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

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

Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Как сделать мультилендинг на MODx - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

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

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

  • Базовый урок по MODx: Ознакомиться
  • Посадка типовой секции Landing Page на MODx: Страница урока

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

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

  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>
    

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

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «MODx»

  • Создание сайта с нуля. Урок #34. Посадка секции «Поставляемое оборудование» на MODx (pdoResources)
  • Создание сайта с нуля. Урок #33. Посадка секции «Выполненные работы» на MODx (Всплывающие окна)
  • Создание сайта с нуля. Урок #32. Посадка секции «Направления услуг» на MODx (pdoResources)
  • Создание сайта с нуля. Урок #31. Посадка галереи на MODx (MIGX + phpthumbof)
  • Создание сайта с нуля. Урок #30. Посадка секции тизеров на MODx
  • Создание сайта с нуля. Урок #29. Посадка HTML верстки шапки на MODx

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODX
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2021 © WebDesign Master