Слайдер на всех страницах сайтах (bxslider) XSLT — различия между версиями
Stexe (обсуждение | вклад) |
Stexe (обсуждение | вклад) |
||
Строка 2: | Строка 2: | ||
'''Задача:''' Реализовать вывод слайд-шоу на всех страницах сайта, путем интеграции стороннего слайдера ''bxslider'' с системой UMI.CMS.<br/><br/> | '''Задача:''' Реализовать вывод слайд-шоу на всех страницах сайта, путем интеграции стороннего слайдера ''bxslider'' с системой UMI.CMS.<br/><br/> | ||
− | '''Реализация:'''<br/>< | + | '''Реализация:'''<br/> |
+ | <h3><u>Работа в административной части</u></h3> | ||
В модуле "Шаблоны данных" создадим два подтипа (дочерний тип) типа данных "Страница контента": | В модуле "Шаблоны данных" создадим два подтипа (дочерний тип) типа данных "Страница контента": | ||
<ul> | <ul> | ||
Строка 20: | Строка 21: | ||
</ul><br/> | </ul><br/> | ||
В модуле "Структура" добавим страницу с именем "Слайдер" и выберем для нее тип данных "Слайдер". Для страницы "Слайдер" добавим подстраницы и выберем для каждой из них тип данных "Элемент слайдера". Каждая добавленная подстраница будет являться отдельным слайдом. Для поля "Изображение" нужно выбрать картинку для отдельного слайда, в поле "Ссылка для элемента" - ссылку, по которой будет осуществляется переход при нажатии на картинку слайда. | В модуле "Структура" добавим страницу с именем "Слайдер" и выберем для нее тип данных "Слайдер". Для страницы "Слайдер" добавим подстраницы и выберем для каждой из них тип данных "Элемент слайдера". Каждая добавленная подстраница будет являться отдельным слайдом. Для поля "Изображение" нужно выбрать картинку для отдельного слайда, в поле "Ссылка для элемента" - ссылку, по которой будет осуществляется переход при нажатии на картинку слайда. | ||
− | + | <br/><br/> | |
+ | <h3><u>Добавление custom макросов</u></h3> | ||
Далее, в файл classes\modules\custom.php добавим определение двух макросов: '''getSliderItems()''' и '''bxSlider()'''.<br/> | Далее, в файл classes\modules\custom.php добавим определение двух макросов: '''getSliderItems()''' и '''bxSlider()'''.<br/> | ||
<ul> | <ul> | ||
− | <li>'''getSliderItems($parent_id, $template = "default")''' - возвращает данные для верстки блока слайдера (id страницы "Слайдер")</li> | + | <li>'''getSliderItems($parent_id, $template = "default")''' - возвращает данные для верстки блока слайдера ('''$parent_id''' - id страницы "Слайдер")</li> |
− | <li>'''bxSlider($parent_id)''' - возвращает скрипт для работы слайдера с установленными настройками</li> | + | <li>'''bxSlider($parent_id)''' - возвращает скрипт для работы слайдера с установленными настройками ('''$parent_id''' - id страницы "Слайдер")</li> |
− | </ul> | + | </ul><br/> |
+ | <source lang="php"> | ||
+ | public function getSliderItems($parent_id, $template = "default"){ | ||
+ | if (!$parent_id) | ||
+ | return 'Parent page id is not set'; | ||
+ | list($template_items, $template_item) = def_module::loadTemplates("data/slider/" . $template, "items", "item"); | ||
+ | |||
+ | $umiHierarchy = umiHierarchy::getInstance(); | ||
+ | $childs_arr = $umiHierarchy->getChildIds($parent_id, false); | ||
+ | $item_arr = array(); | ||
+ | $items_arr = array(); | ||
+ | foreach ($childs_arr as $item_id){ | ||
+ | $item = $umiHierarchy->getElement($item_id); | ||
+ | if ($item instanceof iUmiHierarchyElement){ | ||
+ | $image = $item->getValue('slider_item_image'); | ||
+ | $item_arr['@image'] = $image->getFilePath(); | ||
+ | $item_arr['@name'] = $item->getName(); | ||
+ | $item_arr['@link'] = $item->getValue('slider_item_link'); | ||
+ | $items_arr[] = def_module::parseTemplate($template_item, $item_arr); | ||
+ | } | ||
+ | } | ||
+ | $items_arr = array('subnodes:items' => $items_arr); | ||
+ | |||
+ | return def_module::parseTemplate($template_items, $items_arr); | ||
+ | |||
+ | } | ||
+ | |||
+ | public function bxSlider($parent_id){ | ||
+ | if (!$parent_id) | ||
+ | return 'Parent page id is not set'; | ||
+ | |||
+ | $slider = umiHierarchy::getInstance()->getElement($parent_id); | ||
+ | $auto = ($slider->getValue('slider_auto') ? 'true': 'false'); | ||
+ | $random = ($slider->getValue('slider_random') ? 'true': 'false'); | ||
+ | $captions = ($slider->getValue('slider_captions') ? 'true': 'false'); | ||
+ | |||
+ | $result = <<<END | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $('.bxslider').bxSlider({ | ||
+ | mode: 'fade', | ||
+ | captions: {$captions}, | ||
+ | auto: {$auto}, | ||
+ | randomStart: {$random} | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | END; | ||
+ | return $result; | ||
+ | } | ||
+ | </source> | ||
+ | <h3><u>Верстка шаблонов</u></h3> |
Версия 08:10, 24 сентября 2013
Задача: Реализовать вывод слайд-шоу на всех страницах сайта, путем интеграции стороннего слайдера bxslider с системой UMI.CMS.
Реализация:
Работа в административной части
В модуле "Шаблоны данных" создадим два подтипа (дочерний тип) типа данных "Страница контента":
- Первый тип данных: Название типа - "Слайдер". В данном типе данных создадим группу полей "Настройки слайдера", в котором должны присутствовать следующие поля:
- Поле "Автоматической переключение" типа "Кнопка-флажок" с идентификатором slider_auto
- Поле "Случайный слайд" типа "Кнопка-флажок" с идентификатором slider_random
- Поле "Отображать надписи" типа "Кнопка-флажок" с идентификатором slider_captions
- Второй тип данных: Название типа - "Элемент слайдера". В данном типе данных создадим группу полей "Слайдер", в котором должны присутствовать следующие поля:
- Поле "Изображение" типа "Изображение" с идентификатором slider_item_image
- Поле "Ссылка для элемента" типа "Строка" с идентификатором slider_item_link и форматом значения Web-адрес
В модуле "Структура" добавим страницу с именем "Слайдер" и выберем для нее тип данных "Слайдер". Для страницы "Слайдер" добавим подстраницы и выберем для каждой из них тип данных "Элемент слайдера". Каждая добавленная подстраница будет являться отдельным слайдом. Для поля "Изображение" нужно выбрать картинку для отдельного слайда, в поле "Ссылка для элемента" - ссылку, по которой будет осуществляется переход при нажатии на картинку слайда.
Добавление custom макросов
Далее, в файл classes\modules\custom.php добавим определение двух макросов: getSliderItems() и bxSlider().
- getSliderItems($parent_id, $template = "default") - возвращает данные для верстки блока слайдера ($parent_id - id страницы "Слайдер")
- bxSlider($parent_id) - возвращает скрипт для работы слайдера с установленными настройками ($parent_id - id страницы "Слайдер")
public function getSliderItems($parent_id, $template = "default"){
if (!$parent_id)
return 'Parent page id is not set';
list($template_items, $template_item) = def_module::loadTemplates("data/slider/" . $template, "items", "item");
$umiHierarchy = umiHierarchy::getInstance();
$childs_arr = $umiHierarchy->getChildIds($parent_id, false);
$item_arr = array();
$items_arr = array();
foreach ($childs_arr as $item_id){
$item = $umiHierarchy->getElement($item_id);
if ($item instanceof iUmiHierarchyElement){
$image = $item->getValue('slider_item_image');
$item_arr['@image'] = $image->getFilePath();
$item_arr['@name'] = $item->getName();
$item_arr['@link'] = $item->getValue('slider_item_link');
$items_arr[] = def_module::parseTemplate($template_item, $item_arr);
}
}
$items_arr = array('subnodes:items' => $items_arr);
return def_module::parseTemplate($template_items, $items_arr);
}
public function bxSlider($parent_id){
if (!$parent_id)
return 'Parent page id is not set';
$slider = umiHierarchy::getInstance()->getElement($parent_id);
$auto = ($slider->getValue('slider_auto') ? 'true': 'false');
$random = ($slider->getValue('slider_random') ? 'true': 'false');
$captions = ($slider->getValue('slider_captions') ? 'true': 'false');
$result = <<<END
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: {$captions},
auto: {$auto},
randomStart: {$random}
});
});
</script>
END;
return $result;
}