...
Backend
| Note |
|---|
In progress |
Frontend
Success page
On the success page, a panel is displayed that allows a user to subscribe to order push notifications. For more details see the User manual section of this documentation.
Template: MageSuite_PwaNotifications::notification-panel.phtml
Settings:
| Code Block |
|---|
<arguments>
<argument name="modifier" xsi:type="string">cs-notification-panel--slim</argument>
<argument name="render_icons" xsi:type="boolean">true</argument>
<argument name="button_accept_text" xsi:type="string" translate="true">Yes, please</argument>
<argument name="button_decline_text" xsi:type="string" translate="true">No, thank you</argument>
<argument name="show_decline_button" xsi:type="boolean">true</argument>
<argument name="is_description_in_collapse" xsi:type="boolean">true</argument>
</arguments> |
Additionally: notification.panel.icon.request, notification.panel.icon.pending, notification.panel.icon.enabled, notification.panel.icon.rejected, notification.panel.close.icon, notification.panel.button.accept.icon, notification.panel.button.decline.icon and notification.panel.next.icon can be configured.
Template: MageSuite_PwaNotifications::js-init.phtml
Settings:
| Code Block |
|---|
<arguments>
<argument name="js_config" xsi:type="array">
<item name="notificationType" xsi:type="string">order_status_notification</item>
<item name="visualVariant" xsi:type="string">slim</item>
<item name="showOnInit" xsi:type="boolean">true</item>
<item name="panelHeaders" xsi:type="array">
<item name="request" xsi:type="string" translate="true">Enable push notifications</item>
<item name="pending" xsi:type="string" translate="true">Almost there</item>
<item name="granted" xsi:type="string" translate="true">Push notifications enabled</item>
<item name="alreadyGranted" xsi:type="string" translate="true">Push notifications enabled</item>
<item name="autoReject" xsi:type="string" translate="true">Ooops</item>
<item name="userReject" xsi:type="string" translate="true">Got it!</item>
</item>
<item name="panelDescriptions" xsi:type="array">
<item name="request" xsi:type="string" translate="true">Would you like to be informed about the delivery status of your order via push notifications?</item>
<item name="pending" xsi:type="string" translate="true">Please confirm that you would like to recieve notifications in your browser.</item>
<item name="granted" xsi:type="string" translate="true">Thank you! You will be informed when your order is shipped.</item>
<item name="alreadyGranted" xsi:type="string" translate="true">We will inform you about your order status updates via push notifications.</item>
<item name="autoReject" xsi:type="string" translate="true">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.</item>
<item name="userReject" xsi:type="string" translate="true">We won't bother you with push notifications. You can always change your decision for your future orders by enabling notifications manually in your browser's settings.</item>
</item>
</argument>
</arguments> |
User Area
In the User Area, there is an additional subpage where a user can manage their notifications.
...
Layout: magesuite-pwa-notifications/view/frontend/layout/pwanotifications_notifications_index.xml
Template: MageSuite_PwaNotifications::notifications-customer.phtml
ViewModel: MageSuite\PwaNotifications\ViewModel\Permissions
Script: magesuite-pwa-notifications/view/frontend/web/js/manage-notifications.js
The script initializes the event listener to send ajax request when one of checkboxes in are changed. It sends 2 kinds of request:
when a checkbox is checked:
| Code Block |
|---|
$.post({
url: url.build('rest/V1/pwa/permission'),
data: JSON.stringify({"permission": permissionIdentifier}),
contentType: 'application/json'
}) |
When a checkbox is unchecked:
| Code Block |
|---|
$.ajax({
url: url.build('rest/V1/pwa/permission/' + permissionIdentifier),
type: 'DELETE'
}) |
| Note |
|---|
Advertisement notifications are not test implemented |