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

Footer

componentBeginnerserverbrowser

The storefront footer: store info, links, contacts, apps, the copyright line and payment icons, from the store's data.

import { Footer } from '@salla.sa/twilight-theme-engine/components/layout';

In plain words

The footer closes every page: the store name and description, social links, trust badges and the tax number, the merchant's footer menu, contact details, app download links, then the copyright line and the payment method icons. MasterLayout adds it to every page.

To change only the copyright line, you do not need a footer of your own: register a handler for the copyright hook slot, as the example does. See the footer on real pages in Built-in pages.

Signature

const Footer: LazyExoticComponent<() => JSX.Element>   // no props

Example

app/hooks/index.tsx
import { hookRegistry } from '@salla.sa/twilight-theme-engine/hooks';

// The footer renders a "copyright" slot with the store name as context.
// A handler there replaces the default Copyright line.
hookRegistry.register<{ storeName: string }>('copyright', ({ storeName }) => (
  <>
    © {new Date().getFullYear()} {storeName}. All rights reserved.
  </>
));

How it behaves

  • Top to bottom: the footer:start hook slot; the store name (an engine Link home) and description; social links, trust badges (dark when the theme setting footer_is_dark is on) and, when the store has a tax number, the number with a thumbnail that opens the tax certificate in an ImageModal; the footer menu; contacts; app icons; the copyright line and payment icons; the footer:end hook slot.

  • The copyright line is <HookSlot name="copyright" context={{ storeName }} fallback={<Copyright storeName={store.name} />} />: registering any copyright handler replaces Copyright.

  • Section titles are translated: blocks.footer.pages_links, blocks.footer.social and blocks.footer.download_apps.

  • It is lazy (code-split).

Gotchas

  • store.description is HTML (the demo store's starts with <p class="ql-direction-rtl">), and the footer inserts it as HTML. A footer of your own that renders {store.description} as text shows the tags literally.

  • register appends: a copyright handler registered twice (on import and again from router.tsx) prints the line twice.

Related

Copyright

The footer's bottom line: a translated "Copyright" label, the current year and the store name linking home.

MasterLayout

The default page frame: header, main content and footer, plus the login, offer and branch pop-ups a storefront needs.

hookRegistry

The one shared list of slot handlers: register content under a slot name, read or clear it, or register many at once with defineHooks.

Source and docs