Skip to content
Twilight React Playground
ثيم رائدaren

StoreClosedNotification

componentAdvancedserverbrowserlive demo

A red, dismissible bar on product pages saying the store is closed for orders and when it opens; the engine shows it automatically.

import { StoreClosedNotification, LazyStoreClosedNotification, StoreClosedNotificationProps } from '@salla.sa/twilight-theme-engine/store';

In plain words

When a merchant sets opening hours and the store is closed right now, shoppers on a product page see a red bar: "the store is closed for orders and opens at …". The shopper can close it.

You do not need to add it: the engine already places it at the top of every page and it decides for itself whether to show. LazyStoreClosedNotification is the same component, loaded only when it first renders.

Signature

function StoreClosedNotification(props: StoreClosedNotificationProps): JSX.Element | null
const LazyStoreClosedNotification: React.LazyExoticComponent<typeof StoreClosedNotification>

interface StoreClosedNotificationProps {
  show?: boolean;   // accepted and ignored
}

Try it live

StoreClosedNotification, rendered here for real, above the conditions it checks. All must hold before the red bar appears.Try this: read the ✗ marks: this is not a product page, and this demo store sends no opening hours, so the dashed box stays empty.
Storefront canvas · en · LTR
  • ✗ this page is a product page (useIsProduct)
  • ✗ store.settings.opening_hours.enabled
  • ✗ the store is closed right now
  • ✗ a next opening time: ""
What a theme writes
import { Suspense } from 'react';
import { LazyStoreClosedNotification } from '@salla.sa/twilight-theme-engine/store';

// TwilightProvider already renders it at body:start when opening hours are enabled.
// Render your own only after removing that default with hookRegistry.clear('body:start'),
// which also removes the GTM and Sift handlers.
export function ClosedBar() {
  return (
    <Suspense fallback={null}>
      <LazyStoreClosedNotification />
    </Suspense>
  );
}

Example

app/components/ClosedBar.tsx
import { Suspense } from 'react';
import { LazyStoreClosedNotification } from '@salla.sa/twilight-theme-engine/store';

// Only if you removed the engine's default with hookRegistry.clear('body:start'),
// which also removes the GTM and Sift handlers.
export function ClosedBar() {
  return (
    <Suspense fallback={null}>
      <LazyStoreClosedNotification />
    </Suspense>
  );
}

How it behaves

  • It shows only when all hold: the current route is the product page (useIsProduct()), useOpeningHours(store.settings.opening_hours) reports isEnabled, not isOpen, and a non-empty nextOpenFormatted, and the shopper has not closed it.

  • The default body:start handler renders the lazy version when store.settings.opening_hours.enabled (priority 80, after GTM and Sift). TwilightProvider renders that slot on every page.

  • Text: the translation store.closed_notification with a nextOpen variable, defaulting to an Arabic sentence. Styles are inline (background #d63031).

Gotchas

  • show does nothing: the component ignores its props. Control it by where you render it.

  • Dismissing is component state, not stored: it comes back after a remount or a full reload.

  • opening_hours is not in this demo store's settings, and the StoreSettings type marks it "TODO: add to API response", so the bar may never appear with real data today.

Related

useOpeningHours

Works out from a weekly schedule whether the store is open right now and, when closed, when it opens next.

registerDefaultHooks

Registers the engine's built-in slot handlers (GTM, bundles, store closed, fast checkout, price quote, pre-order); importing the hooks module already runs it.

Source and docs