Кастомизация сообщений

Привет, джангонавты! Сегодня мы углубимся в такую интересную тему, как кастомизация сообщений в Django Message Framework. Если вы уже настроили систему уведомлений в своём приложении и знаете, как передавать success, info и error-сообщения пользователям, то пришло время сделать эти уведомления не только функциональными, но и стильными.

Подумайте об этом так: вы запекаете пирог (это ваше приложение), он вкусный (работает корректно), но сверху всё ещё нет крема, ягод и сахарной пудры. Сегодня мы научимся добавлять этот "крем" вашим сообщениям. Погнали!

Кастомизация действительно нужна!

Кастомизация позволяет сделать сообщения более интуитивными и приятными для ваших пользователей. Например:

• Уведомления об ошибках можно выделить ярко-красным цветом с поясняющими значками.
• Успешные действия — зелёным цветом с иконками "галочки".
• А для info сообщений добавить уникальный, дружелюбный текст, чтобы пользователь почувствовал себя на фестивале, а не на заводе.

И всё это помогает улучшить пользовательский опыт (UX) вашего приложения.

Изменение внешнего вида сообщений

Django добавляет каждому сообщению CSS-класс, соответствующий его уровню, например:

• alert-success для успешных сообщений.
• alert-error для ошибок.
• alert-warning для предупреждений.
• alert-info для информационных сообщений.

Используя эти классы, мы можем легко стилизовать сообщения в наших шаблонах.

Шаг 1. Подключите Bootstrap (или создайте свои стили)

Если вы используете Bootstrap, настройка сообщений становится простой задачей. Вот базовый пример CSS для Bootstrap:

<!-- Включите Bootstrap в base.html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

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

Шаг 2. Настройте шаблон вывода сообщений

В base.html добавим обработку сообщений с использованием Bootstrap:

{% if messages %}
  <div class="container mt-3">
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  </div>
{% endif %}

Здесь message.tags автоматически подставляет CSS-классы для уведомлений: success, error, info, warning.

Шаг 3. Если вы не используете Bootstrap

Напишите свои стили в static/css/styles.css:

.alert {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.alert-error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

.alert-warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

Не забудьте подключить CSS в вашем base.html:

<link rel="stylesheet" href="{% static 'css/styles.css' %}">

Кастомизация содержания сообщений

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

Для текста сообщений в представлении можно использовать шаблоны:

from django.contrib import messages
from django.shortcuts import redirect

def register_user(request):
    if request.method == "POST":
        # Логика регистрации
        if form.is_valid():
            user = form.save()
            messages.success(request, f"Пользователь {user.username} успешно зарегистрирован!")
            return redirect("home")
        else:
            messages.error(request, "Регистрация не удалась. Проверьте введённые данные.")
    return render(request, "register.html", {"form": form})

Добавление иконок и HTML в сообщения

Хотите добавить иконки? Запросто! Включите HTML в сообщения:

messages.success(request, "<strong>Успех!</strong> Ваш заказ обработан. <i class='bi bi-check-circle'></i>", extra_tags="html-safe")

И в шаблоне обработайте extra_tags для HTML-сообщений:

{% for message in messages %}
  <div class="alert alert-{{ message.tags }}">
    {{ message|safe }}
  </div>
{% endfor %}

Настройка уровней сообщений

Django поддерживает уровни сообщений, такие как INFO, DEBUG, SUCCESS, WARNING и ERROR. Вы можете настроить их отображение.

Изменение порога уровня сообщений

Если вы хотите показывать только сообщения уровня WARNING и выше, настройте MESSAGE_LEVEL в settings.py:

from django.contrib.messages import constants as message_constants

MESSAGE_LEVEL = message_constants.WARNING

Теперь только WARNING, ERROR и более серьезные сообщения будут отображаться.

Примеры использования JavaScript для улучшения UX

Для более интерактивного UX можно использовать JavaScript, чтобы автоматизировать закрытие сообщений. Например, если вы используете Bootstrap, добавьте такой скрипт:

// Автоматическое скрытие сообщений через 5 секунд
setTimeout(function() {
  let alerts = document.querySelectorAll('.alert');
  alerts.forEach(function(alert) {
    alert.classList.add('fade');
    setTimeout(() => alert.remove(), 500);  // Полное удаление после анимации
  });
}, 5000);

Добавьте этот код в файл static/js/scripts.js и подключите его в base.html:

<script src="{% static 'js/scripts.js' %}"></script>

Практическое задание

Ну что, пора засучить рукава и выполнить небольшое задание:

1. Создайте страницу для добавления новых записей в вашей базе данных (например, добавление товара).
2. Настройте уведомления для разных действий:
   • success при успешном добавлении записи.
   • error в случае неправильного заполнения формы.
3. Стилизуйте уведомления с помощью CSS или Bootstrap.
4. Добавьте JavaScript, чтобы автоматически скрывать уведомления через 5 секунд.

Будьте креативными! Попробуйте добавить интересные тексты уведомлений и поэкспериментируйте с анимацией.

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