# Добавление лендингов во фронт-офис Мегафона

Вот нам прислали новые лендинги. Верстальщик из Аффимоба добавляет их в папку `affimob`, в чате Арбуст-Аффимоб скидывают ссылки на репозиторий на конкретные лендосы, так что тут не запутаться.

Это руководство подробно описывает, как их загрузить во фронт-офис Мегафона

## Подготовка кода

### Копирование в архив
На случай возможных несостыковок было решено всё, что мы заливаем во фронт-офис Мегафона, дублировать в репозиторий. Для удобства мы сразу переносим сырой лендинг в архив, и уже с ним работаем.

Лендинг копируем в папку `/archive/<название проекта>/<код лендинга>`. Название проекта сообщают в чате, а код лендинга формируется по правилу `<короткий код проекта - ep/ew/ie><цена услуги>-<порядковый номер лендинга>`. Цена услуги на данный момент фиксированная и составляет 35 рублей. Порядковый номер лендинга - следующий за последним добавленным. Пока что номера в архиве соответствуют номерам во фронт-офисе, но при добавлении лучше перепроверить.

![Сообщение из чата](readme_assets/chat.png)

Например попросили добавить такой лендос. Он копируется в папку `/archive/inero/ie35-20`

![Проверка кода](readme_assets/check_landing_code.png)

Последний добавленный лендос в этом проекте - `ie35-19`. Значит всё сходится.

### Вынос содержимого подпапок в корень

Фронт-офис Мегафона не поддерживает загрузку папок, поэтому все файлы из папок внутри лендинга (`images`, `js`, `styles` и т.д.) нужно сразу перенести в корневую папку лендинга. Пустые папки затем удаляем. Также нужно поправить пути к файлам внутри `index.html`
```html
<!-- Было -->
<link rel="stylesheet" href="styles/app.css" />

<!-- Стало -->
<link rel="stylesheet" href="app.css" />
```

В некоторых лендосах в вёрстке используются фоновые изображения в CSS. Все css-файлы нужно проверить и заменить пути на файлы и там.

```css
/* Было */
background: url("../assets/images/menu.png") center center / 40px no-repeat;

/* Стало */
background: url("menu.png") center center / 40px no-repeat;
```

### Удаление мусора

Аффимоб добавляет левые ссылки на ненужные библиотеки, их обязательно всегда нужно удалять
```html
<!-- Пример мусора: -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
```

### Добавление метрики

В папку с лендингом копируем файл `/archive/page.js`

В `index.html` вставляем этот файл и добавляем наш скрипт для сбора статистики
```html
<script src="page.js"></script>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    initPage('subscribe', 'vmXX')
    initPage('unsubscribe', 'vmXX')
    initPage('subscribeFailed', 'vmXX')
    initPage('subscribeSuccess', 'vmXX')
  })
</script>
```

Вместо `vmXX` подставляем код лендоса. В нашем примере это `ie35-20`

По традиции этот код вставляется после `main.js`

### Редактируем подвал

В подвале стоит шаблонный абзац текста с пустыми ссылками, ценой и названиями организаций. Его целиком меняем на этот код
```html
<p class="footer__text">
    Нажатием на кнопку «Смотреть», Вы соглашаетесь с
    <a href="https://podpiskimf.ru/col/mds4/web/jsp/files/oferta.pdf">
        «Условиями мобильных подписок» и принимаете условия
    </a>
    <a href="https://videomir18.arboost.ru/user-agreement.pdf">
        «Пользовательского соглашения» сервиса «ИнЭро».
    </a>
    Стоимость услуги: 35 руб. с учетом НДС за 1 день. Оплата производится со счета
    телефона. Услугу предоставляет контент-провайдер ООО "Арбуст".
</p>
```

**Важно!** Если лендос добавляется не в проект ИнЭро, а в Эропортал, во второй ссылке нужно заменить имя сервиса!

Этот же текст нужно заменить в `main.js`
```javascript
// Было
footerTextAgree.innerHTML = `Нажатием на кнопку «Смотреть», Вы соглашаетесь с
    <a href="#">
        «Условиями мобильных подписок» и принимаете условия
    </a>
    <a href="#">
        «Пользовательского соглашения» сервиса SUBNAME. Стоимость
    </a>
    услуги: ${priceText} с учетом НДС за 1 день. Оплата производится
    со счета телефона. Услугу предоставляет контент-провайдер
    PROVIDER.`;

// Стало
footerTextAgree.innerHTML = `Нажатием на кнопку «Смотреть», Вы соглашаетесь с
    <a href="https://podpiskimf.ru/col/mds4/web/jsp/files/oferta.pdf">
        «Условиями мобильных подписок» и принимаете условия
    </a>
    <a href="https://videomir18.arboost.ru/user-agreement.pdf">
        «Пользовательского соглашения» сервиса «ИнЭро».
    </a>
    Стоимость услуги: 35 руб. с учетом НДС за 1 день. Оплата производится со счета
    телефона. Услугу предоставляет контент-провайдер ООО "Арбуст".`;
```

### Добавляем скрытый блок с переменными

Во фронт-офисе Мегафона для успешной загрузки лендоса обязательно присутствие в коде некоторых переменных. Часть из них по факту не используются и видимо не работают, поэтому чтобы обойти ограничение, вставляем в код шаблона скрытый блок с этими переменными:
```html
    <div style="display: none">
        <p>SUBNAME</p>
        <p>SUBPRICE</p>
        <p>ACCOUNT</p>
        <p>PROVIDER</p>
        <a class="disable-btn" href="#<TARIF_NO_URL>">Закрыть</a>
        <a href="#<LK_LINK_URL>">Личный кабинет</a>
    </div>
```

По традиции этот код вставляется после последнего div и перед скриптами

### Меняем цену

В лендосах обычно присутствует такой блок (может встречаться несколько раз!)
```html
    <span class="price-bg"
    >Первый день бесплатно, затем SUBPRICE в день <br />
    Списание со счета мобильного телефона</span
    >
```

SUBPRICE везде нужно заменить на стоимость услуги, сейчас вставляем "35 руб."



### Редактируем кнопку подписки

Кнопке подтверждения подписки надо добавить id `agree_btn`. Это нужно для сбора статистики.
```html
<button id="agree_btn" class="btn btn-agree confirm">
    <span class="btn-text">Мне есть 18 лет</span>
</button>
```

### Автоматическая генерация

**Внимание! Экспериментальная фича! Перед использованием проконсультируйтесь с тимлидом!**

Все вышеописанные манипуляции можно сделать автоматически при помощи скрипта `generator.py` из корня проекта:

`python3 archive/generator.py <affimob_landing_path> <project_name> <landing_code>`

Аргументы:
- `affimob_landing_path` - путь к лендосу в папке `affimob`, например `affimob/megafon/_rebuild/inero/inero_23`
- `project_name` - имя проекта, пока поддерживаются только `inero` и `eroportal`
- `landing_code` - код лендоса, например `ie35-23`
## Загрузка во фронт-офис Мегафона

### Создание шаблона

Для начала создаём шаблон!

![Меню](readme_assets/create_template_menu.png)

![Добавление шаблона](readme_assets/create_template.png)

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

![Добавление шаблона](readme_assets/get_service_id.png)

Наименование шаблона - такое же, как и код лендинга, и название его папки в архиве

### Загрузка файлов

Для начала загружаем сам файл лендинга `index.html`

Затем ниже в блоке "Ресурсные файлы" нужно загрузить все остальные файлы из папки лендинга, кроме `index.html`

![Загрузка лендинга](readme_assets/pre_upload_file.png)

![После загрузки](readme_assets/after_upload_file.png)

После загрузки файлов переходим на страницу редактирования лендоса

### Генерируем дополнительные страницы

![Генерируем страницы](readme_assets/generate_pages.png)

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

![Дополнительные вкладки](readme_assets/subpages.png)

В этих страницах нужно внешний вид привести в соответствие с их назначением, обычно удаляются/прячутся кнопки и добавляется лоадер. Все манипуляции с ними делаем только во фронт-офисе и не храним их в репозитории. Т.к. они генерируемые, при повторной генерации все изменения затрутся и их придется делать заново.

Чаще всего в дополнительных страницах достаточно добавить у тэга body класс loader

```html
 <body class="loader"> <!--agree | loader | close-->
```

Иногда верстальщик косячит и, к примеру, не прячется кнопка. Тогда надо внести дополнительные изменения в код и в этом случае удалить из кода кнопку подписки. За внешний вид страницы отвечаем мы, всё должно выглядеть хорошо.


### Правим скрипт метрики

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

```javascript
window.addEventListener("DOMContentLoaded", function () {
  initPage('subscribe', 'vmXX') // Оставляем только на основной странице лендинга
  initPage('unsubscribe', 'vmXX') // Оставляем только на странице отписки
  initPage('subscribeFailed', 'vmXX') // Оставляем только на странице ошибки
  initPage('subscribeSuccess', 'vmXX') // Оставляем только на странице подтверждения
})
```