Notifications

Components

This page extends the default layout master.twig, and accordingly, it takes the unified look-and-feel. For example, all of the header's and footer's components will be added automatically to this page.

In addition, the User model is accessible automatically on this page because it's included in the master.twig layout file.

JS Web Components

Customer's Notification page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.

• Infinite Scroll <salla-infinite-scroll>

Hooks

The notifications page template may call the following hooks in order to inject extra information.

{% hook 'customer:notifications.items.start' %}
{% hook 'customer:notifications.items.end' %}

Usage

This page receives an array of notifications as an object. This array contains all of the notification's data for the currently logged-in user. Each notification can be displayed using a for-loop statement.

A common implementation for this page, is to display each notification as a link, which the user can click to open and view the details of the notification he wants to see.

:::tip[Note]
The Salla component salla-infinite-scroll has been used to ease the pagination process.
:::

<salla-infinite-scroll next-page="{{ notifications.next_page }}" item=".notifications-row">
    {% for notification in notifications %}
        <div class="notifications-row">
            <h4>{{ notification.title }}</h4>
            <p>{{ notification.sub_title }}</p>
            <span> {{ notification.date }} </span>
        </div>
    {% else %}
        <div>
            <p>{{ trans('blocks.header.no_notifications') }}</p>
        </div>
    {% endfor %}
</salla-infinite-scroll>