Django Notifications App Django.How

Install Django Notifications App

We will use this app https://github.com/django-notifications/django-notifications – Connect to preview
They have good documentation about how to install and use this app, just read README file.

1.Run command in our terminal:

pip install django-notifications-hq

2.Add to main settings.py:

INSTALLED_APPS = [
  ....
    'django.contrib.auth',
    'notifications',
  ....   
]

Important that ‘notifications’ must be after ‘django.contrib.auth’. Also add this string:

DJANGO_NOTIFICATIONS_CONFIG = { 'USE_JSONFIELD': True}

3.To our main urls.py add this code:

from django.conf.urls import url
import notifications.urls

urlpatterns = [
    ...
    url('^inbox/notifications/', include(notifications.urls, namespace='notifications')),
    ...
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

4.Run migtation command in our terminal:

python manage.py migrate notifications

Now u can use Notifications App.

Customizations for our project

Note: If you want to test with these CSS classes, you can get the open-source CSS file at agilecss.com

1.Add to _header.html file following code inside nav menu

<br /> {% load notifications_tags %}</p> <nav> #inside nav menu add<br /> {% if user.is_authenticated %}</p> <li><a title="Notifications" onclick="toggleDisplay('notifications')"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive no-mobile"> <path d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21"> </path> </svg><br /> <span class="p-l-2 only-mobile">Notifications </span><br /> <span id="notifications-count" class="badge bg-danger circle position-absolute"><br /> {% live_notify_badge %}<br /> </span><br /> </a> </li> <p> {% else %}<br /> {% endif %}<br /> </nav> <p>

2.Add to the end of _footer.html file this code

</p> <div class="notification-panel p05 shadow-box" id="notifications"> <div class="row"> <div class="col-6 font-weight-400 "> Notifications </div> <div class="col-6 small"> <a class="float-right underline" onclick="markAllNotinficationsRead()"> Mark all as read</a> </div> <table id="notifications-table" class="table left"> </table></div> <p> <span class="float-right underline small" onclick="(function(){var x = document.getElementById('notifications'); x.style.display = 'none'; return false;})();return false;">Close</span> </div> <p>

3.Add js files in base.html file after _footer.html including

<br /> <script src="{% static 'notifications/notify.js' %}" type="text/javascript"></script><br /> <script src="{% static 'js/notifications.js' %}" type="text/javascript"></script><br /> {% load notifications_tags %}<br /> {% register_notify_callbacks callbacks=’fill_notification_badge,my_special_notification_callback’ %}<br />

4.Save the following file to our projects js folder and run “python manage.py collectstatic“ command in our terminal

Fire a notification

You can add a notification in view.py in any method

#Make notification to admin 
recipient = User.objects.get(id=1) 
notify.send(recipient, recipient=recipient, verb='New Contact us request')

This example from contact us page

<br /> from django.shortcuts import render<br /> from django.contrib.auth.models import User<br /> from notifications.signals import notify<br /> from django.http import JsonResponse</p> <p>from .models import Contact_us</p> <p>def index(request):<br /> if request.method == ‘POST’:<br /> name = request.POST[‘name’]<br /> email = request.POST[’email’]<br /> phone = request.POST[‘phone’]<br /> subject = request.POST[‘subject’]<br /> department = request.POST[‘department’]<br /> message = request.POST[‘message’]</p> <p> contact_request = Contact_us(name=name, email=email, phone=phone, subject=subject, department=department, message=message)</p> <p> #Make notification to admin<br /> recipient = User.objects.get(id=1)<br /> notify.send(recipient, recipient=recipient, verb=’New contact us request’)</p> <p> contact_request.save()</p> <p> if contact_request.id:<br /> #by defaul using bg-success class<br /> return JsonResponse({‘msg’:’Contact message send’}, safe=False)<br /> else:<br /> return JsonResponse({‘msg’:’Contact message not send’,’class’:’bg-danger’}, safe=False)</p> <p> return render(request, ‘contact_us/index.html’)<br />