Кастомізація повідомлень

Привіт, джангонавти! Сьогодні ми зануримось у таку цікаву тему, як кастомізація повідомлень у 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 секунд.

Будьте креативними! Спробуйте додати цікаві тексти сповіщень і поекспериментуйте з анімацією.

Отже, тепер ваші повідомлення не просто "робочі", а стильні, динамічні та дружні. Ви зробили величезний крок до створення професійного інтерфейсу, який порадує ваших користувачів. Тепер пора застосувати ці знання у вашому проєкті!