Каталог Маркетплейс

# Параллакс Баннер — первый запуск за 15 минут

Эта инструкция — для тех, кто раньше не ставил модули и не добавлял компоненты на страницу.
Мы пройдём весь путь от установки до баннера на сайте. Программировать ничего не придётся.

Полное описание всех настроек — в файле `README.md` рядом. Но для начала хватит этой страницы.

---

## Несколько слов, чтобы говорить на одном языке

"Модуль"   Дополнение к сайту. Ставится один раз, как программа на компьютер
"Инфоблок"   Таблица в админке, где хранятся баннеры. Модуль создаст её сам
"Слайдер"   Папка внутри инфоблока. В ней лежат баннеры, которые сменяют друг друга
"Баннер"   Одна запись в папке: картинки, текст, ссылка
"Компонент"  «Окно» на странице сайта, которое показывает слайдер. Ставится туда, где нужен баннер

Итого у нас четыре шага: "поставить модуль ? создать слайдер ? добавить баннер ? поставить компонент на страницу."

---

## Что понадобится

- доступ в админку сайта с правами администратора;
- хотя бы одна картинка для баннера (для первой пробы подойдёт любая широкая фотография).

Админка открывается по адресу `https://ваш-сайт.ru/bitrix/admin/`.

---

## Шаг 1. Поставить модуль

### Вы получили модуль в Маркетплейсе

1. В админке откройте "Marketplace ? Каталог решений".
2. Найдите в поиске «Параллакс Баннер» и нажмите "Установить".
3. Система скачает модуль и сама предложит его установить. Соглашайтесь.

### Что произойдёт после установки

Появится сообщение «Модуль установлен» и номер созданного инфоблока. Больше ничего
настраивать не нужно: модуль сам создал место для баннеров и сам его запомнил.


---

## Шаг 2. Создать слайдер

Слайдер — это папка, в которую мы будем складывать баннеры.

1. В админке откройте "Контент ? Параллакс Баннер ? Баннеры с параллаксом".
  (Если не можете найти — есть короткий путь: "Настройки ? Настройки продукта ?
  Настройки модулей ? Параллакс Баннер", там ссылка "«Открыть слайдеры»".)
2. Нажмите кнопку "Добавить раздел".
3. Заполните два поля:
  - "Название" — любое, например «Главная». Его видите только вы.
  - "Символьный код" — короткое имя латиницей без пробелов, например `main`.
    "Запишите его" — оно понадобится на шаге 4.
4. Остальные поля (высота, автосмена, стрелки) пока не трогайте — пустые поля
  значат «взять хорошие значения по умолчанию».
5. Нажмите "Сохранить".

---

## Шаг 3. Добавить первый баннер

Для первого раза сделаем самый простой баннер: фоновая картинка и надпись поверх неё.
Красивый объёмный эффект со слоями добавите потом, когда убедитесь, что всё работает.

1. Откройте только что созданный слайдер (нажмите на его название в списке).
2. Нажмите "Добавить элемент" (элемент — это и есть баннер).
3. Заполните:
  - "Название" — это текст, который появится на баннере. Например: «Скидки до 30% всю неделю».
  - "Фоновое статичное изображение" — нажмите «Добавить файл» и выберите картинку
    с компьютера. Лучше широкую, от 1920 пикселей по ширине.
  - "Ссылка со всего баннера" — куда переходить по клику, например `/catalog/`.
    Можно оставить пустым.
4. Нажмите "Сохранить".

Не видите какого-то поля? В форме баннера бывает несколько вкладок сверху —
картинки обычно на вкладке со свойствами («Элемент» или «Свойства»).

---

## Шаг 4. Поставить компонент на страницу

Сейчас баннер лежит в админке, но на сайте его ещё нет. Чтобы он появился, нужно
поставить на страницу компонент и подсказать ему код слайдера из шага 2.

Есть два способа. Выберите любой.

### Способ А — мышкой, в визуальном редакторе (без кода)

Подходит для обычных страниц сайта: «О компании», «Акции», новая посадочная и т.п.

1. Откройте нужную страницу "на самом сайте" (не в админке), будучи авторизованным
  администратором. Сверху появится серая панель управления.
2. На панели нажмите "Изменить страницу ? В визуальном редакторе".
3. Откроется редактор. Справа найдите вкладку "Компоненты", в ней — группу "ox8.ru".
4. Внутри будет "Параллакс баннер". Зажмите его мышкой и перетащите в то место
  страницы, где должен быть баннер. На странице появится серый значок компонента.
5. Дважды щёлкните по этому значку — откроются параметры. Параметр тут всего один:
  "«Символьный код или ID слайдера»". Впишите туда код из шага 2 — например `main`.
6. Нажмите "Сохранить" в окне параметров, а потом — "Сохранить" в самом редакторе.

Все остальные настройки (высота, скорость смены, стрелки) компонент сам берёт из админки.
Возвращаться сюда, чтобы что-то поменять, больше не придётся.

### Способ Б — вставить готовый фрагмент кода

Подходит, если визуальный редактор не открывается или вы правите страницу через «Изменить страницу
? В редакторе PHP-кода». Скопируйте и вставьте этот фрагмент в нужное место страницы:

```php
<?$APPLICATION->IncludeComponent(
   'ox8ru:parallaxbanner',
   '',
   array(
       'SLIDER_CODE' => 'main',
   ),
   false
);?>
```

Если на шаге 2 вы придумали другой код — замените `main` на него. Больше в фрагменте менять ничего не нужно.
Сохраните страницу.

### Если баннер нужен на главной странице готового решения (Аспро и подобные)

В готовых решениях главная собирается из готовых блоков, и баннер уже сидит в своём блоке.
Самый надёжный путь — попросить разработчика заменить в блоке баннера старый вызов на
фрагмент из способа Б. Для разработчика подсказка: старый вызов убирать целиком
или оборачивать в `/* */`, но не комментировать строками `//` — иначе на главной
может появиться лишний символ `?>`.

---

## Шаг 5. Проверить

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

Не появился? Сайт мог показать сохранённую старую копию страницы. Добавьте к адресу
в браузере `?clear_cache=Y` (например `https://ваш-сайт.ru/?clear_cache=Y`) и обновите —
это работает, когда вы авторизованы администратором.

Если и это не помогло — пройдитесь по списку ниже.

---

## Проблемы новичка и что с ними делать

"В визуальном редакторе нет группы «ox8.ru»."
Модуль не установлен до конца. Проверьте в "Marketplace ? Установленные решения",
что у «Параллакс Баннера» статус «Установлен». Если да — закройте редактор и откройте
снова, список компонентов обновится.

"Компонент на месте, а баннера нет — пустое место."
Почти всегда это одна из трёх причин:
1. код в компоненте не совпадает с «Символьным кодом» слайдера — сверьте буква в букву;
2. у слайдера или баннера снята галка "«Активность»";
3. баннер лежит не в том слайдере — откройте слайдер и проверьте, что баннер внутри.

"Изменил баннер в админке — на сайте старый."
Откройте страницу с `?clear_cache=Y` (см. шаг 5).

"Хочу убрать баннер со страницы."
На время — снимите галку «Активность» у слайдера: компонент останется, но ничего не
покажет. Насовсем — откройте страницу в визуальном редакторе, выделите значок
компонента и нажмите Delete, затем Сохранить.

"Хочу показать разные баннеры на разных страницах."
Создайте второй слайдер со своим кодом (например `promo`) и на другой странице
укажите в компоненте этот код.

---

## Что дальше

Баннер работает — теперь его можно улучшать. Всё делается в админке, компонент на
странице трогать больше не нужно:

- "Смена баннеров." Добавьте в тот же слайдер второй баннер — появятся стрелки, точки
 и автоматическая смена. Порядок задаётся полем «Сортировка».
- "Объёмный эффект." Загрузите картинки 1-го, 2-го и 3-го планов — они начнут
 двигаться за курсором с разной скоростью. Как готовить такие картинки — в `README.md`,
 раздел «Главное правило подготовки слоёв».
- "Картинка для телефонов." Заполните у баннера поле «Картинка для мобильных» —
 на телефоне будет показываться она, вертикальная и без обрезки.
- "Высота и поведение." Откройте слайдер на редактирование: там высота баннера, скорость
 смены, стрелки и точки.

Подробно каждая настройка описана в `README.md`.