Stexe в 11:59, 24 сентября 2013

2013-09-24T11:59:57Z

Stexe в 10:19, 24 сентября 2013

2013-09-24T10:19:04Z

Stexe в 10:12, 24 сентября 2013

2013-09-24T10:12:46Z

Stexe: Новая страница: « category:Сторонние сервисы и программы category:Сторонние сервисы и программы '''Задача:''' Р…»

2013-09-24T10:11:33Z

Новая страница: « category:Сторонние сервисы и программы category:Сторонние сервисы и программы '''Задача:''' Р…»

Новая страница

[[category:Сторонние сервисы и программы]]

[[category:Сторонние сервисы и программы]]

'''Задача:''' Реализовать вывод слайд-шоу на всех страницах сайта, путем интеграции стороннего слайдера ''bxslider'' с системой UMI.CMS.<br/><br/>
'''Реализация:'''<br/>
Необходимые для работы слайдера файлы можно скачать по ссылке [[Файл:Bxslider.zip‎]]
<h3><u>Работа в административной части</u></h3>
В модуле "Шаблоны данных" создадим два подтипа (дочерний тип) типа данных "Страница контента":
<ul>
<li>'''Первый тип данных:''' Название типа - "Слайдер". В данном типе данных создадим группу полей "Настройки слайдера", в котором должны присутствовать следующие поля:
<ul>
<li>Поле "Автоматической переключение" типа "Кнопка-флажок" с идентификатором '''slider_auto'''</li>
<li>Поле "Случайный слайд" типа "Кнопка-флажок" с идентификатором '''slider_random'''</li>
<li>Поле "Отображать надписи" типа "Кнопка-флажок" с идентификатором '''slider_captions'''</li>
</ul>
</li>

<li>'''Второй тип данных:''' Название типа - "Элемент слайдера". В данном типе данных создадим группу полей "Слайдер", в котором должны присутствовать следующие поля:</li>
<ul>
<li>Поле "Изображение" типа "Изображение" с идентификатором '''slider_item_image'''</li>
<li>Поле "Ссылка для элемента" типа "Строка" с идентификатором '''slider_item_link''' и форматом значения Web-адрес</li>
</ul>
</ul>
В модуле "Структура" добавим страницу с именем "Слайдер" и выберем для нее тип данных "Слайдер". Для страницы "Слайдер" добавим подстраницы и выберем для каждой из них тип данных "Элемент слайдера". Каждая добавленная подстраница будет являться отдельным слайдом. Для поля "Изображение" нужно выбрать картинку для отдельного слайда, в поле "Ссылка для элемента" - ссылку, по которой будет осуществляется переход при нажатии на картинку слайда.
<br/><br/>
<h3><u>Добавление custom макросов</u></h3>
Далее, в файл classes\modules\custom.php добавим определение двух макросов: '''getSliderItems()''' и '''bxSlider()'''.<br/>
<ul>
<li>'''getSliderItems($parent_id, $template = "default")''' - возвращает данные для верстки блока слайдера ('''$parent_id''' - id страницы "Слайдер")</li>
<li>'''bxSlider($parent_id)''' - возвращает скрипт для работы слайдера с установленными настройками ('''$parent_id''' - id страницы "Слайдер")</li>
</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>
Необходимые для работы слайдера файлы можно скачать по ссылке [[Файл:Bxslider.zip‎]]<br/><br/>
Из скаченного Вами архива, CSS файл нужно поместить в директорию /css/bxslider, изображения из папки images в директорию /images/bxslider и JS файл в директорию /js/bxslider.<br/>
В шаблоне, перед закрывающимся тегом </head> (в ''"demoold"'' в файле templates\demoold\tpl\content\index.tpl) нужно подключить js библиотеку слайдера bxslider, CSS файл для слайдера и добавить вызов custom макроса bxSlider():

<source lang="html4strict">
<script type="text/javascript" src="/templates/demoold/js/bxslider/jquery.bxslider.min.js"></script>
<link type="text/css" rel="stylesheet" href="/templates/demoold/css/bxslider/jquery.bxslider.css" />
%custom bxSlider(70)%
</source>
В данном случае приведено подключение файлов для демонстрационного интернет-магазина "Классический" ("''demoold''"). Если у Вас отсутствует директория /templates, то файлы из архива можно разместить в корневых директориях. В первом параметре макроса bxSlider() нужно указать id страницы "Слайдер", то есть вместо id ''70'' нужно указать Ваш id.<br/>
В шаблоне между тегами <body> в том месте, где должен быть выведен слайдер, нужно добавить следующий вызов:
<source lang="html4strict">
%custom getSliderItems(70)%
</source>
Вместо указания в первом параметре id ''70'' нужно указать Ваш id страницы страницы "Слайдер".
<br/>
И наконец, добавим шаблоны в файл templates\demoold\tpls\data\slider\default.tpl для обработки результатов макроса getSliderItems().
<source lang="php">
<?php

$FORMS = Array();

$FORMS['items'] = <<<END
<div>
<ul class="bxslider">
%items%
</ul>
</div>

END;

$FORMS['item'] = <<<END
<li>
<a href="%link%">
<img src="%image%" title="%name%" width="auto" height="200"/>
</a>
</li>
END;

?>
</xsl:template>
</source>
Размеры изображений слайдов можно задать в атрибутах тега <img>: width и height.<br/><br/>
На странице "Слайдер" в группе полей "Настройки слайдера" можно изменять настройки слайдера bxSlider:
<ul>
<li>Поле "Автоматической переключение" отвечает за автоматическое переключение слайдов</li>
<li>Поле "Случайный слайд" отвечает за показ случайного слайда</li>
<li>Поле "Отображать надписи" включает/выключает надписи под изображениями</li>
</ul>

@@ Строка 45: / Строка 45: @@
 		if ($item instanceof iUmiHierarchyElement){
 			$image = $item->getValue('slider_item_image');
-			$item_arr['@image'] = $image->getFilePath();
+			$item_arr['@image'] = '/'.$image->getFilePath();
 			$item_arr['@name'] = $item->getName();
 			$item_arr['@link'] = $item->getValue('slider_item_link');

← Предыдущая		Версия 10:19, 24 сентября 2013
Строка 132:		Строка 132:
	<li>Поле "Отображать надписи" включает/выключает надписи под изображениями</li>		<li>Поле "Отображать надписи" включает/выключает надписи под изображениями</li>
	</ul>		</ul>
		+	<br/>
		+	<center>[[Файл:Slider.png]]</center>

@@ Строка 123: / Строка 123: @@
 ?>
-</xsl:template>
 </source>
 Размеры изображений слайдов можно задать в атрибутах тега <img>: width и height.<br/><br/>

Слайдер на всех страницах сайтах (bxslider) TPL - История изменений

Stexe в 11:59, 24 сентября 2013

Stexe в 10:19, 24 сентября 2013

Stexe в 10:12, 24 сентября 2013

Stexe: Новая страница: « category:Сторонние сервисы и программы category:Сторонние сервисы и программы '''Задача:''' Р…»