Размещение аккордеона ^#2104

Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.

При необходимости Вы можете разместить на своем сайте аккордеон примерно следующего вида:

Для того чтобы самостоятельно создать аккордеон, Вам необходимо получить расширенные права доступа к системе управления. Получить их Вы можете самостоятельно, следуя инструкции по ссылке.

После того как расширенные права доступа получены, можно приступать к работе.

Рассмотрим весь процесс создания и подключения аккордеона отдельным видом страницы.

Для начала Вам необходимо создать новый вид страницы.

Для этого перейдите к разделу "Настройки" - "Шаблоны и файлы";

На открывшейся странице нажмите "Добавить шаблон".

На странице создания шаблона:

• Введите имя шаблона (рекомендуем для удобства его так и назвать -  "Аккордеон", однако, Вы можете выбрать и другое название);
• Укажите название файла (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"}

Теперь на этой же странице нажмите на кнопку "Данные".

В открывшемся окне нажмите "Добавить новые данные".

И создайте данные для текста сверху, указав следующие параметры:

• Название - рекомендуем назвать данные "Текст сверху";
• Алиас - рекомендуем "text_top";
• Тип данных - выберите "Тексты";
• ID схемы - можно не заполнять;
• Общий - снять (выключить) галочку;
• Заполняется массивом - оставить неактивной;

После заполнения нажмите "Сохранить и закрыть".

Аналогичным образом добавляем данные "Текст снизу":

• Название - "Текст снизу";
• Алиас - "text_bottom";
• Тип данных - выберите "Тексты";
• ID схемы - можно не заполнять;
• Общий - снять (выключить) галочку;
• Заполняется массивом - оставить неактивной.

После заполнения нажмите "Сохранить и закрыть".

И последним добавьте сам аккордеон:

• Название - "Аккордеон";
• Алиас - "accordion";
• Тип данных - выберите "Метаданные";
• ID схемы - в дальнейшем необходимо будет создать json для аккордеона (с определенными полями) и задать ему ID. Укажите ID в данном поле (в нашем примере 202).
• Общий - снять (выключить) галочку;
• Заполняется массивом - включить галочку.

После заполнения нажмите "Сохранить и закрыть".

Обратите внимание!

• В списке данных шаблона "Аккордеон" у данных "Аккордеон" в качестве выборки по умолчанию должно быть установлено "Метаданные (массив)". Если выборка по умолчанию не установлена - нажмите на ссылку, выберите "Метаданные (массив)" и сохраните.

Теперь перейдите к "Файлам" дизайна, а затем в папку "Images".

Нажмите на кнопку "Обзор".

И загрузите следующие файлы (ниже приведены ссылки для предварительного скачивания):

• accord_bg.png (сохраните данную картинку для дальнейшей загрузки в файлы дизайна - это тонкая красная линия, чтобы ее увидеть и удобнее сохранить, можете увеличить масштаб страницы);
• akkordeon.css;
• akkordeon.js;
• white-arrow.png (тоже небольшое изображение, которое нужно скачать для дальнейшей загрузки в файлы дизайна).

После выбора файлов нажмите кнопку загрузки.

Теперь выберите шаблон "_Главная. Верх".

Пропишите в нем стили и скрипт для корректной работы аккордеона и сохраните изменения.

<link rel="stylesheet" href="images/akkordeon.css">

<script src="images/akkordeon.js"></script>

Теперь перейдите в раздел "Данные сайта" - выберите пункт "Метаданные".

На открывшейся странице нажмите "Создать".

В открывшемся окне добавьте метаданные, заполнив следующие поля:

• Название - Аккордеон;
• ID схемы - ID, указанный Вами при создании данных аккордеона в шаге 8 (в нашем примере 202);
• Код JSON: 

{

"body":{

"name":"Текст",

"type":"html"

}

}

• После внесения всех изменений нажмите "Сохранить и закрыть".

На открывшейся странице нажмите кнопку добавления (плюс) и добавьте элемент аккордеона. Подобным образом добавьте все необходимые Вам вкладки аккордеона. Подробнее о работе с метаданными JSON вы можете прочитать тут.

Теперь перейдите к разделу "Страницы".

И нажмите на кнопку "Создать новую страницу".

В списке видов найдите вид - "Аккордеон" и выберите его.

Создайте страницу вида "Аккордеон" (имя, адрес и иные параметры укажите по своему усмотрению).

После создания страницы Вам будет предложено заполнить созданные Вами блоки данных. Заполните данные страницы и сохраните изменения.

• Текст сверху - укажите информацию, которая будет отображаться над аккордеоном на сайте;
• Текст снизу - соответственно, данные под аккордеоном;
• Аккордеон - добавьте в список элементы из Метаданных, которые будут выводиться в качестве вкладок аккордеона. Подробнее о работе с метаданными вы можете прочитать тут.

На сайте подобная страница будет выглядеть примерно следующим образом.

• Данная инструкция является примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.