Установка стилей на страницу оплаты заказа

В каждой школе разный набор методов оплаты. Где-то используется Get-модуль, где-то — сторонние способы оплаты. Где-то один набор способов, где-то другой. Учесть все возможные вариации, к сожалению, невозможно, поэтому в каких-то экзотических случаях могут наблюдаться погрешности. Если вы столкнулись с такой ситуацией, напишите мне, я оперативно поправлю стили. Это бесплатно.

Перед началом установки стилей убедитесь, что у вас отключена новая версия страницы оплаты от Геткурс. Иначе стили не будут применены.

Перейдите в раздел «Сайт — Страницы — Страница оплаты» и снимите чекбокс «Включить новую страницу оплаты»

Сохраните изменения и переходите к системным страницам: раздел «Сайт — Страницы — Системные страницы» и откройте редактирование страницы «Оплата заказа»:

Если страница открылась не в редакторе, в правом верхнем углу нажмите «Настроить вид».

1. Установка стилей страницы

Выберите блок с информацией о заказе и о покупателе и в правой колонке в поле «Класс html-элемента» вставьте класс order-info.

Теперь в папке с набором откройте папку checkout_page, в ней файл checkout-styles.css.

Скопируйте из файла все стили и вставьте в окно редактирования стилей страницы оплаты заказа:

2. Установка скриптов

Добавьте в самый низ страницы оплаты новый блок для вставки JavaScript. Для этого выберите в дереве «Область: PAGE» и нажмите кнопку «Добавить блок»:

Затем выберите элемент JavaScript:

Двойным кликом по добавленному блоку откройте его для редактирования:

Откройте в папке checkout_page файл checkout-scripts.js. Скопируйте всё его содержимое и вставьте в блок JavaScript.

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

// Заданные тексты для замены
const newTexts = {
    'card-title': 'Оплата банковской картой VISA / MasterCard / МИР',
    'credit-title': 'Рассрочка и кредит',
    'other-title': 'Другие способы оплаты'
};

Измените заголовки на нужные вам или оставьте те, что в скрипте. Также, если вам не нужна возможность изменения текстов заголовков, можете удалить функцию замены целиком, начиная от комментария:

// Функция для изменения текста в заголовках блоков оплаты

После вставки скрипта щёлкните в районе боковой колонки редактора, чтобы закрыть окно редактирования скрипта.

Сохраните настройки страницы.

3. Настройка переменных страницы оплаты

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

--display-paybuttons — отвечает за отображение кнопок Pay-сервисов (Сбер-Pay, T-Pay, Яндекс.Pay). Установите значение none, чтобы скрыть этот блок. Это может понадобиться, если вы используете сторонние способы оплаты (например, ЮКассу или CloudPayments). Кнопки не выводятся, но сам блок в коде присутствует и он создаёт дополнительное пустое пространство наверху блока с методами оплаты. Поэтому его желательно скрыть. Чтобы включить отображение блока, используйте значение flex.

--display-offer — отвечает за отображение текста оферты Геткурса (при использовании Get-модуля). Сталкивался с тем, что некоторые хотят скрыть отображение этого текста, поэтому добавил дополнительную переменную для него. Скрыть текст оферты — значение none. Отображать — block.

--display-alt-payments — отвечает за отображение альтернативных способов оплаты картой. Скрыть блок — значение none. Отображать — block.

--display-credit-title и --display-other-title— отвечают за отображение заголовков «Кредит/рассрочка:» и «Другие способы оплаты». Если вы не используете рассрочки или другие способы оплаты, то Геткурс всё равно покажет эти заголовки, а вариантов там не будет. Поэтому с помощью этих меременных можно заголовки скрыть. Установите значение переменных none, чтобы скрыть отображение и block, чтобы вывести заголовки.

4. Изображения кнопок Pay-сервисов

Находятся в папке checkout_page.

Перейдите в файловое хранилище вашей школы: нажмите на аватар в главном меню — Файловое хранилище.

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

Нажмите на все три ссылки загруженных файлов. В новых вкладках откроются страницы загруженных изображений.

Вам нужно скопировать ссылки на файлы и заменить их в переменных. Нажмите «Копировать ссылку» и вернитесь к редактированию стилей страницы оплаты

Вам нужно поочерёдно заменить все три ссылки:

Сохраните изменения. Страница оплаты готова!

Рекомендации

Если используете модификаторы в предложениях, рекомендую сузить колонку с информацией о покупателе. Это позволит пунктам модификаторов вмещаться и не нарушать вёрстку.

Выделите колонку с информацией о покупателе и измените настройку «Ширина блока» на 4 / 12:

Теперь колонка станет уже и модификаторам останется больше места в левой части.

Использование логотипов банков вместо иконки российского флага

В наборе стилей предусмотрена возможность вывода логотипов российских банков: Сбер, Т-Банк, ВТБ, Альфа Банк.

Я сознательно оставил по умолчанию иконки российского флага, т. к. при использовании иконок банков, у людей возникало ощущение, что оплата может быть произведена только картой этого банка. Чтобы избежать лишних вопросов и падения конверсии, иконки банков закомментированы.

Но также возникали ситуации, когда люди спрашивали: «А в чём разница между этими способами оплаты? Ведь везде написано одно и то же!»

Поэтому, я оставил решение за вами. Если хотите выводить способы оплаты с иконками банков, в стилях найдите строку 550. С неё начинается блок стилей, отвечающий за иконки. Раскомментируйте блок, удалив символы /* */:

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

Это сработает только если вы используете для приёма оплат Get Модуль. При использовании интеграций со сторонними платёжными системами, иконки банков не отображаются.