Установка стилей на страницу оплаты заказа
Last updated
Last updated
В каждой школе разный набор методов оплаты. Где-то используется Get-модуль, где-то — сторонние способы оплаты. Где-то один набор способов, где-то другой. Учесть все возможные вариации, к сожалению, невозможно, поэтому в каких-то экзотических случаях могут наблюдаться погрешности. Если вы столкнулись с такой ситуацией, напишите мне, я оперативно поправлю стили. Это бесплатно.
Перейдите в раздел «Сайт — Страницы — Системные страницы» и откройте редактирование страницы «Оплата заказа»:
Если страница открылась не в редакторе, в правом верхнем углу нажмите «Настроить вид».
Выберите блок с информацией о заказе и о покупателе и в правой колонке в поле «Класс html-элемента» вставьте класс order-info
.
Теперь в папке с набором откройте папку checkout_page
, в ней файл checkout-styles.css
.
Скопируйте из файла все стили и вставьте в окно редактирования стилей страницы оплаты заказа:
Добавьте в самый низ страницы оплаты новый блок для вставки JavaScript. Для этого выберите в дереве «Область: PAGE» и нажмите кнопку «Добавить блок»:
Затем выберите элемент JavaScript:
Двойным кликом по добавленному блоку откройте его для редактирования:
Откройте в папке checkout_page
файл checkout-scripts.js. Скопируйте всё его содержимое и вставьте в блок JavaScript.
После вставки щёлкните в районе боковой колонки редактора, чтобы закрыть окно редактирования скрипта.
Сохраните настройки страницы.
В зависимости от настроек оплаты вашей школы, вам может потребоваться изменить переменные в стилях страницы оплаты, чтобы скрыть лишнее.
--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
, чтобы вывести заголовки.
Находятся в папке checkout_page
.
Перейдите в файловое хранилище вашей школы: нажмите на аватар в главном меню — Файловое хранилище.
Нажмите кнопку «Загрузить файлы». Выберите все три изображения и нажмите «Загрузить». После загрузки в правом верхнем углу вы увидите следующее:
Нажмите на все три ссылки загруженных файлов. В новых вкладках откроются страницы загруженных изображений.
Вам нужно скопировать ссылки на файлы и заменить их в переменных. Нажмите «Копировать ссылку» и вернитесь к редактированию стилей страницы оплаты
Вам нужно поочерёдно заменить все три ссылки:
Сохраните изменения. Страница оплаты готова!
Если используете модификаторы в предложениях, рекомендую сузить колонку с информацией о покупателе. Это позволит пунктам модификаторов вмещаться и не нарушать вёрстку.
Выделите колонку с информацией о покупателе и измените настройку «Ширина блока» на 4 / 12:
Теперь колонка станет уже и модификаторам останется больше места в левой части.