Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Ни для кого не секрет, что в системе uCoz есть свой стандартный условный оператор, который выводит похожие материалы. Имя ему $RELATED_ENTRIES$. Но это всего лишь обычные, скучные ссылки на схожие материалы.

Согласитесь, что этого мало, особенно, если учесть невероятно быстро нарастающий интерес и набирающему популярность стандарту HTML5 и его спутнику CCS3. Уже не возможно представить ни один уважающий себя сайт без этих "плюшек", всевозможных JQuery слайдеров и пр.

Скрипт "Похожие материалы" покажет вам не только ссылку на схожую статью, но так же выведет картинку и краткое описание к ней. Более того, отобразит эти данные в виде JQuery "Карусели", либо в виде таблицы с одной или двумя колонками (на выбор). Внешний вид, количество выводимых материалов и длина краткого описания настраивается по вкусу. Схожесть материалов определяется по тегам, либо, если теги отсутствуют, схожесть будет определена по названию материала. При этом процент схожести вы выставляете сами (от 0 - в случайном порядке до 100 - полное совпадение).

Если вы хотите выделить свой сайт, заботитесь о своих посетителях и хотите увеличить глубину просмотров ваших страниц пользователями сайта — этот скрипт для вас!

Скрипт написан для модулей:
• новости сайта;
• блог;
• каталог статей;
• каталог сайтов;
• доска объявлений;
• каталог файлов;
• онлайн игры;
• видео(добавлено в версии 1.16).

Особенности скрипта:
• использование нового API uCoz;
• адаптивная JQuery карусель или вывод материалов в виде таблицы (на выбор);
• вывод указанного вами количества похожих материалов;
• вывод указанного вами количества символов краткого описания;
• установка своей картинки-заглушки;
• кэширование запросов (позволяет уменьшить нагрузку на API и увеличить скорость загрузки страниц);
• установка времени жизни кэша.

Требования к установке:
• активированное PHP;
• подключенное uAPI uCoz (предоставляется бесплатно).

Примечания:
• скрипт не тестировался в IE8;
• используется jQuery плагин Owlcarousel (распространяется бесплатно по лицензии MIT).

Первый шаг: активация uAPI и PHP

Этап 1. Активация uAPI для нужного модуля

Для активации uAPI в том модуле, где нужна работоспособность скрипта, перейдите в настройки этого модуля и напротив пункта «Включить uAPI для модуля» установите галочку, затем прокрутите страницу вниз и сохраните изменения.

Этап 2. Получение токен-доступов для uAPI

Перейдите на страницу http://uapi.ucoz.com/uapi_panel, авторизуйтесь под своим uID-профилем.

После авторизации, вы увидите интерфейс управления uAPI-приложений. Нам нужно создать приложение. Нажмите на «Создать» и введите все те данные, которые запросит форма.

• В пункте «Название приложения» можно написать свое название (абсолютное любое);
• В пункте «Consumer key» введите любой набор латинских букв, как например: hFFSJjknfsdgF87T, рекомендуем сгенерировать;
• В пункте «Consumer secret» оставляем всё как есть;
• В пункте «Redirect URL» введите ссылку на свой сайт (куда собираетесь подключить скрипт);
• Нажмите на Сохранить.

Этап 3. Создание токенов

Перейдите на страницу http://api.ucoz.net/ru/join/reg, выберите «Полуавтоматом». Далее вам предложат ввести данные – их вы можете взять со страницы http://uapi.ucoz.com/uapi_panel. Заполните поля, продолжайте следовать инструкциям системы. В результате вы должны получить токены. Пошаговая иллюстрация:

Активация PHP

Убедитесь, что на вашем сайте активна услуга PHP. Для этого перейдите на главную страницу панели управления и обратите внимание на правую часть страницы. В случае наличия активной услуги вы увидите текст "PHP детали". – перейдите к следующему шагу установки, PHP-услуга у вас активна. Если такой текст отсутствует, значит услуга PHP отключена или просрочена. Для подключения PHP необходимо оплатить премиум пакет, включающий возможность использования PHP-скриптов, либо заказать данную услугу отдельно.

Второй шаг: загрузка скриптов на FTP PHP

Этап 1. Установка пароля

Если у вас задан пароль к FTP PHP, сразу же переходите к следующему этапу.

Перейдите на главную страницу панели управления вашим сайтом, в правой верхней части нажмите на ссылку «PHP детали». В открывшемся окне кликните на ссылку: «Пароль не установлен. Мы попадем на страницу установки пароля на FTP PHP. Заполните поля, продолжайте следовать инструкциям системы.

Этап 2. Подключение к PHP FTP серверу

После установки пароля, скачайте FTP-клиент, рекомендуем бесплатный FTP клиент FileZilla. После установки программы, в верхней части вводим параметры подключения:

• Сервер: s2000.ucoz.net
• Логин (FTP login): введите свой логин, который указан в меню "PHP детали"
• Пароль: пароль который вы ввели ранее в специальном разделе

После заполнения полей нажмите на кнопку «Быстрое соединение».

Этап 3. Загрузка скриптов на PHP FTP сервер

После успешного подключения вы увидите каталог под именем «scripts» в правой части окна программы. Обязательно переходим в этот каталог двойным кликом по нему.

Теперь загрузите в этот каталог папку из архива со скриптом «materials». Загрузить легко, просто перетащите эту папку в правый диалог (где отображаются каталоги и файлы хранящиеся на сервере).
Узнать статус передачи файлов вы можете в окне статуса, которое находится в нижней части программы, там отображаются файлы которые ожидают передачи и те, которые не удалось передать, в частности которые были успешно переданы.

Третий шаг: загрузка файлов на сайт

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.

Теперь зайдите в папку js и загрузите в эту папку файл "owl.carousel.min.js" из архива со скриптом (папка "скрипты").

Четвёртый шаг: установка CSS стилей

Перейдите в Панель управления » Дизайн » Управление дизайном (CSS) и в самом конце пропишите следующий код:

 .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y;}
.owl-carousel .owl-wrapper{display: none;position: relative;-webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper-outer{overflow: hidden;position: relative;width: 100%;}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition: height 500ms ease-in-out;-moz-transition: height 500ms ease-in-out;-ms-transition: height 500ms ease-in-out;-o-transition: height 500ms ease-in-out;transition: height 500ms ease-in-out;}	
.owl-carousel .owl-item{float: left;}
.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor: pointer;}
.owl-controls {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.grabbing {cursor:url(grabbing.png) 8 8, move;}
.owl-carousel  .owl-wrapper,.owl-carousel  .owl-item{-webkit-backface-visibility: hidden;-moz-backface-visibility:   hidden;-ms-backface-visibility:hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);}
.owl-theme .owl-controls{margin-top: 10px;text-align: center;}
.owl-theme .owl-controls .owl-buttons div{color: #FFF;display: inline-block;zoom: 1;*display: inline;margin: 5px;padding: 3px 10px;font-size: 12px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;background: #869791;	filter: Alpha(Opacity=50);opacity: 0.5;}
.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter: Alpha(Opacity=100);opacity: 1;text-decoration: none;}
.owl-theme .owl-controls .owl-page{display: inline-block;zoom: 1;*display: inline;}
.owl-theme .owl-controls .owl-page span{display: block;width: 12px;height: 12px;margin: 5px 7px;filter: Alpha(Opacity=50);opacity: 0.5;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: #869791;}
.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{filter: Alpha(Opacity=100);opacity: 1;}
.owl-theme .owl-controls .owl-page span.owl-numbers{height: auto;width: auto;color: #FFF;padding: 2px 10px;font-size: 12px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}
.customNavigation{text-align: right;}
.customNavigation a{-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.customNavigation {display:none}
.owl-cont {background: #f6f6f6 !important; margin:5px; padding:5px; text-align; left;}
.owl-cont img {width:100%}
#related {width:100%}
.table_entries {width:100%; border-collapse: collapse; border-spacing: 0px; border: 0px}
.table_entries td {padding:5px; border: 0;}
.table_entries td img, .table_entries td.entries_td img {width:100px; padding: 0px 10px 10px 0px; float: left}
.table_entries td.entries_td {width: 50% !important; padding:5px; border: 0;}

Информация о классах:

• owl-wrapper – контейнер с "каруселью";
• owl-carousel – блок со всеми элементами "карусели";
• owl-cont – блок с одним слайдом;
• owl-controls – блок с пагинацией (под слайдером);
• owl-page – стиль для диска пагинации;
• prev, next – ссылки "вперед" и "назад";
• table_entries – стили для таблицы с похожими материалами (если выбран способ отображения в виде таблицы);

Пятый шаг: размещение кода на страницах сайта

Перейдите в Панель управления » Дизайн » Управление дизайном (шаблоны).

Страница материалов и комментариев к нему

Откройте шаблон "Страница материалов и комментариев к нему" того модуля, в котором планируется установка скрипта (из поддерживаемых). В нужном месте этого шаблона (там где вы хотите выводить похожие материалы) вставляем следующий код:

<div class="customNavigation">
	<h4 style="text-align:left">Похожие материалы</h4> 
	<a href="" class="btn prev">Назад</a>
	<a href="" class="btn next">Вперед</a>
</div>
<table width="100%" border="0" style="word-wrap:break-word; table-layout: fixed;"><tbody><tr><td>
<div id="related"><div style="display:none"><?$RELATED_ENTRIES$(20)?></div><p style="padding:10px; text-align:center"><img src="/.s/img/wd/6/ajax.gif" style="width:31px; height:31px;" alt="Loading" /></p></div>
</td></tr></tbody></table>

<script>
$(document).ready(function(){
    <?if($RELATED_ENTRIES$(20))?>
	var tags = [],
	r = new RegExp("\x27+","g"),
	r1 = new RegExp("\x22+","g"),
	r2 = new RegExp("\x2C+","g"),
	str;
	for (var i = 0; i <= $('#related .uRelatedEntry').length; i++) {
		str = $('#related .uRelatedEntry :eq('+i+')').text();
		str = str.replace(r, "");
		str = str.replace(r1, "");
		str = str.replace(r2, "");
		tags.push(str);
	}
	tags.pop();
    <?else?>
    var title = '<?if($MODULE_ID$=='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>';
    <?endif?>
	$.ajax({
		type: "POST",
		url: "/php/materials/index.php", // не изменять
		data: "module=$MODULE_ID$&material_id=$ID$&<?if($RELATED_ENTRIES$(20))?>tags="+tags<?else?>title="+title<?endif?>, // не изменять
		cache: false,
		success: function(html){
			$("#related").html(html);
		}
	});
});

function startOwl(count) {
	$.getScript("/js/owl.carousel.min.js", function(){
		var owl = $(".owl-carousel");
		owl.owlCarousel ({
                        items : count
                });
		$(".next").on('click', function(event){
			event.preventDefault();
			owl.trigger('owl.next');
		});
		$(".prev").on('click', function(eevent){
			event.preventDefault();
			owl.trigger('owl.prev');
		});
		$('.customNavigation').show();
	});
};
</script>

Шестой шаг: дополнительные настройки

В архиве со скриптом находится папка «config», в которой вы найдете файл «config.php». В этом файле вы можете задать дополнительные настройки скрипта. Открыть этот файл для редактирования можно обычным текстовым блокнотом.

• $cache_time = 3600; время жизни кеша, через которое можно выполнить повторный запрос на API (в секундах);
• $post_count = 10; количество схожих материалов, выводимых скриптом;
• $message_count = 30; количество символов для краткого описания;
• $no_image = '0'; 0 - картинка будет выводится, при условии, что она будет найдена в материале; 1 - картинки не будут выводится совсем; или пропишите свою ссылку на картинку-заглушку. Аналогична варианту 0, но только будет выводится ваша картинка, в случае, если других в материале не нашлось.

• $look = 0; 0 - материалы выводится в виде JQuery карусели; 1 - материалы выводятся в виде таблицы в 1 колонку; 2 - материалы выводятся в виде таблицы в 2 колонки;
• $count_slides = 5; количество колонок в карусели;
• $per_page = 200; количество получаемых материалов по API за раз;
• $per_cent = 0; схожесть материалов в процентах от 0 до 100 ( имеет смысл указывать только в случае отсутствия тегов у материалов. Чем выше значение, тем большая схожесть и тем меньшее кол-во материалов будет отображено. И соответственно, наоборот. );
• $img_href = 0; 1 - картинка кликабельная, 0 не кликабельная