Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

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

Обращаем Ваше внимание:

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

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

phpGJyJpd

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

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

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

Шаг 1

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

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

phpDemEPw

Шаг 2

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

phpy65gwH

Шаг 3

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

  • Введите имя шаблона (рекомендуем для удобства его так и назвать -  "Аккордеон", однако, Вы можете выбрать и другое название);
  • Укажите название файла (accordeon.tpl);
  • Включите галочку "Вид страницы".

phphKF9P8

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

{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"}

php0rjtBL

Шаг 4

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

phpy4tpPT

Шаг 5

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

phpHTjfoJ

Шаг 6

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

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

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

phpD39PFm

Шаг 7

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

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

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

phpPBG3Vj

Шаг 8

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

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

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

phpMJT8g9

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

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

phpxEtZlk

Шаг 9

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

phpSrdUg1

Шаг 10

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

phpxVVtjc

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

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

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

phpkMcA7N

Шаг 11

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

phpGpsfpX

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

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

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

phpcsffkH

Шаг 12

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

phpc7oBPw

Шаг 13

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

phpsT8VcY

Шаг 14

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

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

{

"body":{

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

"type":"html"

}

}

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

phpSud8IX

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

php4Dl8RY

Шаг 15

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

phpCE42Qh

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

phpI0vzue

Шаг 16

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

phpp0aRwv

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

phpr15BN9

Шаг 17

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

phpc2s4qS

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

phpW6Dz4O

Шаг 18

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

phpPfldzr

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

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