Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Customer Pages
  • Getting Started
    • Create a theme
    • Develop a theme
    • Setup a theme
    • Publish a theme
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Theme Architecture
    • Layouts
      • Overview
      • Master Layout
      • Global Variables
      • CSS Variables
      • Salla Icons
      • Custom Fonts
      • Hooks
      • Localizations
    • Pages
      • Overview
      • Home Page
      • Product Pages
        • Products listing
        • Single product
      • Customer Pages
        • Profile
        • Orders list
        • Order details
        • Wishlist
        • Notifications
      • Blog Pages
        • Blog listing
        • Single blog
      • Brand Pages
        • Brands listing
        • Single brand
      • Common Pages
        • Cart
        • Loyalty
        • Thank you
        • Single page
        • Landing Page
    • Componenets
      • Overview
      • Home Components
        • Youtube
        • Fixed banner
        • Testimonials
        • Parallax background
        • Photos slider
        • Store features
        • Square photos
        • Fixed products
        • Products slider
        • Featured products - Style 1
        • Featured Products - Style 2
        • Featured Products - Style 3
        • Brands
        • Enhanced Square Banners
        • Main Links
        • Enhanced Slider
        • Slider Products with Headers
        • Latest Products
        • Vertical Menu with Slider
      • Product Components
        • Essentials
        • Options
      • Common Components
        • Header Components
        • Footer Components
        • Comments component
  • Change Log
  1. Customer Pages

Notifications

The notifications page template can help display short texts/messages to notify customers with the latest updates regarding their orders.

Example#

Customer Notifications

Variables#

NotificationsPage
page
object 
optional
title
string 
optional
Title of the page. May include html tags
slug
enum<string> 
optional
Meaningful unique identifier that is readable by users. Slug are predifned valued in which each page has a list of allowed values. Below are the allowed values for this page.
Allowed value:
customer.notifications
notifications
array[object (Notification) {6}] 
optional
This object is a Paginator as well, so it performs the pagination function and specifies which view should be used to create pagination links. Example: notifications.next_page
next_page
string  | null 
optional
Notification next page.
count
integer 
optional
Notification count.
is_new
boolean 
optional
Is notification new.
url
string 
optional
Url link of the notfication.
sub_title
string 
optional
Subtitle of the notification.
date
string <date>
optional
Date of the notification.
Example:
dd/mm/yyyy

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.

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.
Note
The Salla component salla-infinite-scroll has been used to ease the pagination process.
Previous
Wishlist
Next
Blog Pages