Add content to a slot

Use this when you want a banner, badge or widget at a fixed point on a page and do not want to fork the page.

Goal: show a "free returns" note under the add-to-cart form on the product page.

Engine pages render <HookSlot name="..." /> at fixed points. You register a handler for a slot name in hookRegistry. The slot calls every handler, highest priority first, and renders what they return. Each handler gets a context with the theme data (twilight) plus whatever the page passes in. More: Hooks and slots, HookSlot, useHook.

import { hookRegistry, HookName, type HookContext } from '@salla.sa/twilight-theme-engine/hooks';
import type { Product } from '@salla.sa/twilight-theme-engine/types';

export function registerThemeHooks() {
  hookRegistry.register(
    HookName.PRODUCT_DESCRIPTION_END,
    (context: HookContext) => {
      const { product } = context as { product?: Product };
      if (!product) return null; // guard in case the slot is rendered without one
      return <p className="returns-note">Free returns within 14 days</p>;
    },
    50 // priority: higher runs first, default 50
  );
}

import { registerThemeHooks } from './hooks';

registerThemeHooks();

Check it workedCopy Anchor Link

Open a product page: the note appears under the add-to-cart form. Open the same page in the other language and it is still there (translate the text with t() in a real theme).

Slot namesCopy Anchor Link

These are rendered by the engine's pages and layout:

Blog, brands, thank-you and not-found pages have slots too, such as blog:tag.start, brands:index.items.start, thank-you:start and notfound:start.

NextCopy Anchor Link

• Fork a built-in route when a slot is not enough.
• Hooks and slots for the full model.