Дизайн банера для компании Krasnodar-room
Задача: сделать дизайн банера для блока промокода на сайте.
Блок размещается в конце одной из статей. Блоки буду создаваться в админ. панели и каждый раз под новый бизнес: тест-драйв, бесплатный завтрак и другие.
Дизайн
Как это выглядит на странице записи
Программирование
Сайт моего клиента — СМИ в Краснодарском крае. У него есть разные партнеры в разных сферах.
Задача стояла не только в дизайне, но и в программировании этого баннера для администратора сайта. Нужно было создать возможность быстро и удобно создавать баннеры.
Модульность
Первое: баннеры должны быть модульными. То есть важно иметь возможность использовать баннер в нескольких статьях.
Каждый раз добавлять картинку, заголовок и прочие данные — утомительно. Поэтому решено отдельно от записей создать блок, в котором мы можем создавать блоки с промокодами.
Поля для редактирования:
- Айди — используется для применения в статье
- Название — айди может быть нечитабельным, а по названию можно сразу понять, что за промокод мы будем редактировать
- Фон — используется на всех трех шагах
- Логотип партнера
- Заголовок
- Заголовок на втором шаге
- Подзаголовок
Как это выглядит в админке.
В свернутом виде
В развернутом виде
Использование в статьях
Эти блоки мы должны как-то использовать в статьях. Для этого создал поле с айди блока промокода.
Структура кода такая:
- Проверить, есть ли в поле айди
- Перебрать массив блоков и найти соответствие айди
- Если совпало — вывести данные из блока промокода