AnnouncementModal

Purpose

AnnouncementModal is a reusable modal that displays announcements/notifications in a Swiper carousel.

It’s used as the “detail view” for the announcements list (the Announcement component). It also supports an auto-open behavior on the homepage: if there are unread/unviewed announcements, it opens automatically and moves the user through them.

Where it's rendered

It’s rendered by the Announcement component.

From Components/Announcement/Default.liquid:

{% render 'Reusables\\AnnouncementModal\\Default', announcements: announcements %}

Inputs (Liquid render parameters)

Source: Reusables/AnnouncementModal/Default.liquid.

This reusable is initialized via Alpine using:

x-data='announcementmodalreusabledefault.initComponent(
  {{ announcements | serialize }},
  {{ Reusables.AnnouncementModal.Translations.MarkAnnouncementAsReadErrorMessage | serialize }},
  {{ userAuthenticated | serialize }}
)'

Model shape (storefront example)

Below is a sanitized excerpt from a real Announcement component model dump.

{
  "announcements": [
    {
      "id": "Announcement Id",
      "title": "Sample title",
      "description": "<p>Sample description</p>",
      "buttonPrimaryText": "Sample button text",
      "buttonPrimaryLink": "/sample",
      "isRead": true,
      "image": {
        "id": "Image Id",
        "galleryId": "Gallery Id",
        "link": "https://example.com/sample",
        "mediaType": "Image"
      }
    },
    ...
  ],
  "name": "Announcement",
  "view": "Default",
  "section": "SectionHeader",
  "settings": {
    "id": "Component Id",
    "section": "SectionHeader",
    "type": "NoirAnnouncement",
    "name": "Announcement",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": "",
    "header": "",
    "alignment": "Left"
  },
  "translations": {
    "closeAnnouncementsModalMessage": "Sample text",
    "notifications": "Sample text",
    "noNotificationsFound": "Sample text",
    "...": "..."
  }
}

Required fields

announcements (array)

Used both in Liquid and JS.

Expected fields read in the modal template / JS:

id

title

description (optional)

image.link (optional)

image.alt (optional)

buttonPrimaryText + buttonPrimaryLink (optional)

buttonSecondaryText + buttonSecondaryLink (optional)

isRead (only used when userAuthenticated is true)

Optional fields

userAuthenticated (boolean)

Passed from Liquid into JS; affects the “read/viewed” logic.

Reusables.AnnouncementModal.Translations.MarkAnnouncementAsReadErrorMessage (string)

Used for the toast shown if marking announcements as read fails.

Template behavior (Liquid + Alpine)

Source: Reusables/AnnouncementModal/Default.liquid.

Modal visibility is driven by $store.announcementModal.visible.

When the modal closes (@after-leave), it flushes the stored current id:

@after-leave="$store.announcementModal.flush()"

Uses x-init to decide whether it’s:

a “specific announcement” modal (when $store.announcementModal.id is set)

or the homepage auto-open carousel

Renders announcements through a Swiper carousel (#announcements-carousel).

Data contract (JS runtime)

`announcementmodalreusabledefault.initComponent(announcements, markAnnouncementsAsReadErrorMessage)`

Source: Reusables/AnnouncementModal/Default.js.

State:

announcements (input)

displayAnnouncements (derived list shown in swiper)

currentId

carousel (DOM element: #announcements-carousel)

JavaScript

Source: Reusables/AnnouncementModal/Default.js.

`init()`

Initializes the display list using the current $store.announcementModal.id.

Watches $store.announcementModal.id; when it changes to a non-null id, it rebuilds the display list.

`initDisplayArray(selectedId)`

Builds displayAnnouncements based on context:

Specific announcement (selectedId is truthy)

Finds the matching announcement, sets displayAnnouncements = [match].

Destroys existing swiper (if any) and hides pagination.

Not specific

If not on homepage (window.location.pathname !== "/") it only updates remaining count and exits.

On homepage (/):

If authenticated: uses announcement.isRead to decide what to show.

If anonymous: uses $store.viewedAnnouncements cookie-based list.

If there are remaining announcements, it opens the modal.

`swiperInit(isFromSpecific = false)`

Initializes Swiper with pagination and optional looping.

On slideChangeTransitionEnd:

Updates currentId

Adds the id to $store.viewedAnnouncements

If authenticated, tries to mark the announcement as read via markAnnouncementsAsRead(newId)

Updates remaining count.

`markAnnouncementsAsRead(ids)`

Only for authenticated users.

Calls:

servicesreusabledefault.setReadAnnouncementIds([ids])

On failure it shows a toast with markAnnouncementsAsReadErrorMessage.

`updateRemainingCount()`

Calculates how many announcements are not viewed yet (based on $store.viewedAnnouncements.isViewed(id)).

Writes the result into $store.announcementModal.remainingCount.

Global Alpine stores

Directly used:

$store.announcementModal

visible, id, remainingCount

open(id), close(), flush()

$store.viewedAnnouncements

addViewedId(id)

isViewed(id)

$store.toast

Used for error reporting when marking as read fails.

Indirectly involved (frame-level UX):

$store.announcements

Announcement list uses this store; announcementModal.close() may reopen it depending on cookie-manager state.

Services / API calls

servicesreusabledefault.setReadAnnouncementIds([id]) (authenticated only)

Dependencies

Reusables/AnnouncementModal/Default.liquid

Reusables/AnnouncementModal/Default.js

Reusables/AnnouncementModal/Default.json (translations)

Components/Announcement/Default.liquid (render site)

Swiper (vendor lib, used via new Swiper(...))

$store.announcementModal, $store.viewedAnnouncements, $store.toast, $store.announcements in Assets/js/theme.js

Notes

The reusable relies on the global variable userAuthenticated (used in both Assets/js/theme.js stores and in Reusables/AnnouncementModal/Default.js).

Homepage auto-open behavior:

The modal auto-opens only on /.

Authenticated users: it shows only !announcement.isRead items.

Anonymous users: it shows items not in the session cookie viewed_announcements.

“Viewed vs read”:

“Viewed” is always tracked locally via $store.viewedAnnouncements.

“Read” is a server-side/authenticated concept updated via setReadAnnouncementIds.

Examples

Render from Announcement component:

{% render 'Reusables\\AnnouncementModal\\Default', announcements: model.announcements %}

AnnouncementModal

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

announcementmodalreusabledefault.initComponent(announcements, markAnnouncementsAsReadErrorMessage)#

JavaScript#

init()#

initDisplayArray(selectedId)#

swiperInit(isFromSpecific = false)#

markAnnouncementsAsRead(ids)#

updateRemainingCount()#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

Examples#