Установка скрипта «Листинг материалов»

Введение

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

Работает только для двух модулей: новости сайта и блог.

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: активация базового API


Для работы скрипта, нам необходимо включить возможность использования API, сделать это вы можете перейдя в Панель управления » Верхний-бар: Настройки » Общие настройки.
Почти в самом низу страницы найдите опцию "Разрешить использование API", установите напротив неё галочку, затем прокрутите страницу вниз и сохраните изменения.
Поле "API key" вы можете активировать. В этом случае система сгенерирует специальный уникальный ключ о применении которого речь пойдёт ниже. В случае, если для вас нет разницы использовать API key или не использовать его – можно оставить неактивным.

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


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

Теперь зайдите в созданную папку и загрузите в эту папку скрипт из архива (папка "скрипты").


Перейдите в Панель управления » Управление дизайном » Страница материалов и комментариев к нему того модуля, в котором планируется установка скрипта (из поддерживаемых). В нужном месте этого шаблона (там где вы хотите выводить листинг материалов) вставляем следующий код:
<table id="material-nav" style="display:none">
    <tr>
	<td style="border-left: 1px dotted #BBB;border-right: 1px dotted #BBB;">
	    <span id="prevPost">« Предыдущий материал</span>
	    <br>
	    <span id="prevTitle"></span>
	</td>
	<td style="border-right: 1px dotted #BBB;">
	    <span id="nextPost">Следующий материал »</span>
	    <br>
	    <span id="nextTitle"></span>
	</td>
    </tr>
</table>
<script>
    $(document).ready(function(){
	$.getScript("/js/paginationPost.js", function(){
	    paginationPost ('$MODULE_ID$', '$TIMESTAMP$');
	});
    });
</script>
затем сохраните изменения.

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

Перейдите в Панель управления » Дизайн » Управление дизайном (CSS) и в самом конце пропишите следующий код:
#material-nav {clear:both;width:100%;}
#prevPost, #nextPost, #prevTitle, #nextTitle {cursor:pointer;}
#prevPost, #nextPost {
    font: 15px/20px "Arial";
    text-transform: uppercase;
}
#prevTitle, #nextTitle {
    font: 700 22px "Arial";
    color: #666;
    text-decoration: none;
}
#material-nav td { 
    width:50%;
    padding:15px;
    text-align: center;
}
#material-nav span {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
#material-nav span:hover {
    color:#488BFA;
}
.alertik{cursor:default !important;}
.alertik:hover{color:inherit !important;}
    Информация о классах:
  • material-nav – весь блок листалки;
  • prevPost – ссылка "предыдущий материал";
  • nextPost – ссылка "следующий материал";
  • prevTitle – заголовок предыдущего материала;
  • nextTitle – заголовок следующего материала;

Четвёртый шаг: настройка и использование


Вся настройка и управление происходит в скрипт-файле paginationPost.js, который мы загружали на сайт в папку JS. Давайте рассмотрим настройки детально.

  • api_key – ключ базового API.
  • notFoundLeft – любой текст при отсутствии предыдущего материала
  • notFoundRight – любой текст при отсутствии следующего материала


Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.