Размещение аккордеона
Обращаем Ваше внимание:
Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.
При необходимости Вы можете разместить на своем сайте аккордеон примерно следующего вида:
Для того чтобы самостоятельно создать аккордеон, Вам необходимо получить расширенные права доступа к системе управления. Получить их Вы можете самостоятельно, следуя инструкции по ссылке.
После того как расширенные права доступа получены, можно приступать к работе.
Рассмотрим весь процесс создания и подключения аккордеона отдельным видом страницы.
Шаг 1
Для начала Вам необходимо создать новый вид страницы.
Для этого перейдите к разделу "Настройки" - "Шаблоны и файлы";
Шаг 2
На открывшейся странице нажмите "Добавить шаблон".
Шаг 3
На странице создания шаблона:
- Введите имя шаблона (рекомендуем для удобства его так и назвать - "Аккордеон", однако, Вы можете выбрать и другое название);
- Укажите название файла (accordeon.tpl);
- Включите галочку "Вид страницы".
В сам шаблон подставьте следующий код и сохраните изменения:
{include file="db:header.tpl"}
{$text_top.body}
<ul class="accordion_square accordion-rounded1">
{foreach from=$accordion item=j}
<li>
<a href="#" class="wow ">{$j.title} <ins></ins></a>
<div>{$j.body}</div>
</li>
{/foreach}
</ul>
{$text_bottom.body}
{include file="db:bottom.tpl"}
Шаг 4
Теперь на этой же странице нажмите на кнопку "Данные".
Шаг 5
В открывшемся окне нажмите "Добавить новые данные".
Шаг 6
И создайте данные для текста сверху, указав следующие параметры:
- Название - рекомендуем назвать данные "Текст сверху";
- Алиас - рекомендуем "text_top";
- Тип данных - выберите "Тексты";
- ID схемы - можно не заполнять;
- Общий - снять (выключить) галочку;
- Заполняется массивом - оставить неактивной;
После заполнения нажмите "Сохранить и закрыть".
Шаг 7
Аналогичным образом добавляем данные "Текст снизу":
- Название - "Текст снизу";
- Алиас - "text_bottom";
- Тип данных - выберите "Тексты";
- ID схемы - можно не заполнять;
- Общий - снять (выключить) галочку;
- Заполняется массивом - оставить неактивной.
После заполнения нажмите "Сохранить и закрыть".
Шаг 8
И последним добавьте сам аккордеон:
- Название - "Аккордеон";
- Алиас - "accordion";
- Тип данных - выберите "Метаданные";
- ID схемы - в дальнейшем необходимо будет создать json для аккордеона (с определенными полями) и задать ему ID. Укажите ID в данном поле (в нашем примере 202).
- Общий - снять (выключить) галочку;
- Заполняется массивом - включить галочку.
После заполнения нажмите "Сохранить и закрыть".
Обратите внимание!
- В списке данных шаблона "Аккордеон" у данных "Аккордеон" в качестве выборки по умолчанию должно быть установлено "Метаданные (массив)". Если выборка по умолчанию не установлена - нажмите на ссылку, выберите "Метаданные (массив)" и сохраните.
Шаг 9
Теперь перейдите к "Файлам" дизайна, а затем в папку "Images".
Шаг 10
Нажмите на кнопку "Обзор".
И загрузите следующие файлы (ниже приведены ссылки для предварительного скачивания):
- accord_bg.png (сохраните данную картинку для дальнейшей загрузки в файлы дизайна - это тонкая красная линия, чтобы ее увидеть и удобнее сохранить, можете увеличить масштаб страницы);
- akkordeon.css;
- akkordeon.js;
- white-arrow.png (тоже небольшое изображение, которое нужно скачать для дальнейшей загрузки в файлы дизайна).
После выбора файлов нажмите кнопку загрузки.
Шаг 11
Теперь выберите шаблон "_Главная. Верх".
Пропишите в нем стили и скрипт для корректной работы аккордеона и сохраните изменения.
<link rel="stylesheet" href="/t/images/akkordeon.css">
<script src="/t/images/akkordeon.js"></script>
Шаг 12
Теперь перейдите в раздел "Данные сайта" - выберите пункт "Метаданные".
Шаг 13
На открывшейся странице нажмите "Создать".
Шаг 14
В открывшемся окне добавьте метаданные, заполнив следующие поля:
- Название - Аккордеон;
- ID схемы - ID, указанный Вами при создании данных аккордеона в шаге 8 (в нашем примере 202);
- Код JSON:
{
"body":{
"name":"Текст",
"type":"html"
}
}
- После внесения всех изменений нажмите "Сохранить и закрыть".
На открывшейся странице нажмите кнопку добавления (плюс) и добавьте элемент аккордеона. Подобным образом добавьте все необходимые Вам вкладки аккордеона. Подробнее о работе с метаданными JSON вы можете прочитать тут.
Шаг 15
Теперь перейдите к разделу "Страницы".
И нажмите на кнопку "Создать новую страницу".
Шаг 16
В списке видов найдите вид - "Аккордеон" и выберите его.
Создайте страницу вида "Аккордеон" (имя, адрес и иные параметры укажите по своему усмотрению).
Шаг 17
После создания страницы Вам будет предложено заполнить созданные Вами блоки данных. Заполните данные страницы и сохраните изменения.
- Текст сверху - укажите информацию, которая будет отображаться над аккордеоном на сайте;
- Текст снизу - соответственно, данные под аккордеоном;
- Аккордеон - добавьте в список элементы из Метаданных, которые будут выводиться в качестве вкладок аккордеона. Подробнее о работе с метаданными вы можете прочитать тут.
Шаг 18
На сайте подобная страница будет выглядеть примерно следующим образом.
Обратите внимание!
- Данная инструкция является примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.