The notifications page displays system notifications and updates for the customer.
Template location
src/views/pages/customer/notifications.twig
Available variables
| Variable | Type | Description |
|---|
page.title | string | Page title |
page.slug | string | Page slug |
notifications | Paginator | Paginated notifications collection |
notifications.next_page | string | URL for next page of results |
notifications.count | int | Total notification count |
Notification object
| Variable | Type | Description |
|---|
notification.is_new | bool | Whether notification is unread |
notification.url | string | Notification link URL |
notification.title | string | Notification title |
notification.sub_title | string | Notification subtitle/description |
notification.date | string | Notification date |
Page structure
The notifications page uses the salla-notifications web component to handle displaying and managing notifications:
{% extends "layouts.customer" %}
{% block inner_content %}
<salla-notifications></salla-notifications>
{% endblock %}
Code examples
Basic notifications display
{% if notifications|length %}
{% for notification in notifications %}
<div class="notification {{ notification.is_new ? 'unread' : 'read' }}">
<a href="{{ notification.url }}">
<h3>{{ notification.title }}</h3>
<p>{{ notification.sub_title }}</p>
<span class="date">{{ notification.date }}</span>
</a>
</div>
{% endfor %}
{% else %}
<div class="no-notifications">
<p>{{ trans('pages.notifications.no_notifications') }}</p>
</div>
{% endif %}
Using the Salla component
<salla-notifications></salla-notifications>
- Displaying notifications with proper styling
- Marking notifications as read
- Pagination
- Real-time updates
Custom notification styling
{% for notification in notifications %}
<div class="notification-item {{ notification.is_new ? 'new' : '' }}">
{% if notification.is_new %}
<span class="badge">{{ trans('pages.notifications.new') }}</span>
{% endif %}
<a href="{{ notification.url }}" class="notification-link">
<div class="notification-content">
<h4 class="notification-title">{{ notification.title }}</h4>
<p class="notification-subtitle">{{ notification.sub_title }}</p>
</div>
<time class="notification-date">{{ notification.date }}</time>
</a>
</div>
{% endfor %}
<div class="notifications-container">
{% for notification in notifications %}
{# Notification content #}
{% endfor %}
</div>
{% if notifications.next_page %}
<a href="{{ notifications.next_page }}" class="load-more">
{{ trans('common.elements.load_more') }}
</a>
{% endif %}
Notification count
<div class="notifications-header">
<h1>{{ trans('pages.notifications.title') }}</h1>
{% if notifications.count %}
<span class="count">{{ notifications.count }}</span>
{% endif %}
</div>
Hooks
The notifications page provides hooks for customization:
{% hook 'customer:notifications.items.start' %}
<salla-notifications></salla-notifications>
{% hook 'customer:notifications.items.end' %}
Common notification types
Notifications may include:
- Order status updates
- Shipping updates
- Product availability alerts
- Promotional messages
- Account activity
- Product reviews
- Wishlist updates
The notifications page extends the layouts.customer layout. The salla-notifications component handles all notification logic including loading, marking as read, and real-time updates.