Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

https://github.com/magesuite/back-in-stock-pwa-notifications

This module provides a base logic for push notifications as well as a more detailed logic for order status notifications. Push Notifications allow the user to be well informed that an order has been shipped, they are a fast and efficient way to communicate with the users. The push notification readability rate is higher than either an Email or SMS, also push notifications never land in SPAM.

Installation

This module is optional

composer require "creativestyle/magesuite-pwa-notifications" ^1.0.0

User manual

This manual was written by Alicja for Ipet. I only changed screens into magesuite ones. It maybe should be move to user manual confluence, but I do not have rights to edit it.

What are push notifications?

Push notifications are popup-like messages that appear on a user's device, sent by the shop to the users.
Users who are subscribed to a specific kind of notification will receive push notifications - even if the browser/app is not open. Users can opt-in to receive push notifications or opt out in User Area.

After you’ve placed your order through the shop, you’ll likely receive a message letting you know that an order has been shipped: those messages are Shipment Push Notifications.

Shipment push notifications are supported by desktop Chrome & Firefox and also by Chrome on Android (mobiles, tablets)

See documentation: https://developer.mozilla.org/en-US/docs/Web/API/Push_API

Can I use: https://caniuse.com/push-api

How does it work?

On the Thank you page Shipment Push Notification modal asks for permission to enable push notifications.
There are the following elements displayed:

  • 'Enable push notifications' headline,

  • bell icon with question mark icon and proper ringing animation,

  • text '

Would you like to be informed about the delivery status of your order via push notifications?',

  • buttons: 'Yes, please' & 'No, thanks',

  • X icon.

When you click on ‘Yes, please’ button, the shop asks you for permission to send you notifications. There are 2 options: ‘Block’ and ‘Allow’.

Shipment Push Notification Modal is still visible, but now there are: 'Almost there' headline and text 'Please confirm that you would like to receive notifications in your browser.' There is also X icon visible:

Shipment Push Notification Modal is still visible, but now there are: 'Almost there' headline and text 'Please confirm that you would like to receive notifications in your browser.' There is also X icon visible:

When you select ‘Allow’ option, then Modal on the Thank you page changes.
Now there are the following elements visible:

  • 'Push notifications enabled' headline,

'Thank you! You will be informed when your order is shipped.' label,

  • X icon.

Shipment Push Notifications are activated in this browser.

When your order is shipped, you will get a Shipment push notification.

On desktops, it will pop-up in bottom-right corner of your screen, even if the browser is closed. There are the following elements visible:

  • ‘Order status’ headline,

  • Your order [ordernumber] was shipped via [shop domain] information,

  • X and Settings buttons.

If you are a logged in user, then you can control your notifications in My Account > Notifications section:

If you don’t want to get Shipment Push Notifications anymore, then you can simply unselect 'Order status' notification checkbox. You can also clear the history of your browser or change browser settings (these 2 options are the only way for guest users to unsubscribe from Shipment Push Notifications).

If you allowed for Shipment Push Notifications, then after placing the next order, there won’t be any Shipment Push Notifications modal visible on the Thank you page anymore. And when this order will be shipped, you will get a push notification again.

Other scenarios

  1. What happens if I select ‘No, thanks’ on the Thank you page?

  • Shipment Push Notifications modal disappears from the Thank you page

  • After placing the next order Shipment Push Notifications modal is visible on the Thank you page, but it looks different. There is a bell icon with a small X icon in its top right corner visible, ‘Ooops’ headline, and text: ‘We can inform you about your order status, however privacy settings of your browser's for this store denies push notifications. If you'd like to receive updates on your order's status, please enable push notifications for this store manually.’

2. What happens if I select ‘Yes, please’ on the Thank you page and then I select ‘Block’ in the pop-up?

  • Pop-up disappears. Still, there is Shipment Push Notification modal with 'Almost there' headline and text 'Please confirm that you would like to receive notifications in your browser.' visible on the Thank you page.

  • After placing next order Shipment Push Notifications modal is visible on the Thank you page, but it looks different. There is a bell icon with a small X icon in its top right corner visible, ‘Ooops’ headline and text: ‘We can inform you about your order status, however privacy settings of your browser's for this store denies push notifications. If you'd like to receive updates on your order's status, please enable push notifications for this store manually.’

3. What happens if I click on X button on the Thank you page?

  • Shipment Push Notifications modal disappears from the Thank you page

  • After placing next order the same Shipment Push Notifications modal is visible on the Thank you page again.

Admin settings

In order to allow push notifications, PWA must be enabled and configured in Stores > Configuration > MageSuite > PWA -> General PWA module is documented here: Pwa (optional)

In Stores > Configuration > MageSuite > PWA -> General specific notifications can be enabled. Back-in-stock notifications are part of a separate module: BackInStockPwaNotifications (optional) . Advertisement notifications are not fully developed yet.

Backend

In progress

Frontend

  • No labels