Дизайн банера для компании Krasnodar-room

Задача: сделать дизайн банера для блока промокода на сайте.

Блок размещается в конце одной из статей. Блоки буду создаваться в админ. панели и каждый раз под новый бизнес: тест-драйв, бесплатный завтрак и другие.

Дизайн

Запрос промокода
Запрос промокода
Запрос данных
Запрос данных
Результат
Результат

Как это выглядит на странице записи

Блок промокода на странице записи
Блок на странице записи

Программирование

Сайт моего клиента — СМИ в Краснодарском крае. У него есть разные партнеры в разных сферах.

Задача стояла не только в дизайне, но и в программировании этого баннера для администратора сайта. Нужно было создать возможность быстро и удобно создавать баннеры.

Модульность

Первое: баннеры должны быть модульными. То есть важно иметь возможность использовать баннер в нескольких статьях.

Каждый раз добавлять картинку, заголовок и прочие данные — утомительно. Поэтому решено отдельно от записей создать блок, в котором мы можем создавать блоки с промокодами.

Поля для редактирования:

  • Айди — используется для применения в статье
  • Название — айди может быть нечитабельным, а по названию можно сразу понять, что за промокод мы будем редактировать
  • Фон — используется на всех трех шагах
  • Логотип партнера
  • Заголовок
  • Заголовок на втором шаге
  • Подзаголовок

Как это выглядит в админке.

В свернутом виде

Свернутый вид промокодов
Свернутый вид промокодов

В развернутом виде

Развернутый вид редактирования блока
Развернутый вид редактирования блока

Использование в статьях

Эти блоки мы должны как-то использовать в статьях. Для этого создал поле с айди блока промокода.

Айди блока промокода в записи
Айди блока промокода в записи

Структура кода такая:

  1. Проверить, есть ли в поле айди
  2. Перебрать массив блоков и найти соответствие айди
  3. Если совпало — вывести данные из блока промокода
Хочешь такой же результат?
Имя
Контакт для связи
Подробнее о проекте

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.