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

DefaultHomeComponents

objectBeginnerserverbrowserlive demo

The engine's 13 built-in home blocks, keyed by block path, ready to spread into registerHomeComponents.

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

In plain words

A ready-made table of the standard Salla home blocks and the engine component that draws each one. You spread it into registerHomeComponents({ ...DefaultHomeComponents }) and add or replace entries after it.

To replace one block with your own, put your component under the same key after the spread.

Signature

const DefaultHomeComponents: Record<string, AnyHomeComponent | null> = {
  'fixed-banner': FixedBanner,
  'photos-slider': PhotosSlider,
  testimonial: Testimonials,
  'store-features': StoreFeatures,
  youtube: Youtube,
  'square-photos': SquarePhotos,
  'fixed-products': FixedProducts,
  'products-slider': ProductsSlider,
  'parallax-background': ParallaxBackground,
  'featured-products:style1': FeaturedProductsStyle1,
  'featured-products:style2': FeaturedProductsStyle2,
  'featured-products:style3': FeaturedProductsStyle3,
  'bundle-component': BundleComponent,
};

Try it live

The 13 default block keys, whether this page registered them, and how this store's real home blocks match them.Try this: read the last line: every block listed there needs a component from your theme, or it renders nothing in production.
Storefront canvas · en · LTR
keyregistered as home:keyblocks on this store
fixed-bannertrue
photos-slidertrue
testimonialtrue
store-featurestrue
youtubetrue
square-photostrue
fixed-productstrue
products-slidertrue
parallax-backgroundtrue
featured-products:style1true
featured-products:style2true
featured-products:style3true
bundle-componenttrue

Blocks with no default:

What a theme writes
import {
  DefaultHomeComponents,
  registerHomeComponents,
} from '@salla.sa/twilight-theme-engine/components/home';
import { Brands } from './components/home/Brands';

registerHomeComponents({
  ...DefaultHomeComponents, // keep the defaults
  brands: Brands, // add a block the defaults do not cover
});

Example

app/router.tsx (excerpt)
import {
  DefaultHomeComponents,
  registerHomeComponents,
} from '@salla.sa/twilight-theme-engine/components/home';
import { MyTestimonials } from './components/home/MyTestimonials';

registerHomeComponents({
  ...DefaultHomeComponents,
  testimonial: MyTestimonials, // replaces the default reviews block
});

How it behaves

  • Only testimonial (Testimonials) is a React.lazy component; the other twelve are ordinary components, even though the engine source imports them under Lazy* names.

  • Featured products exist only as variants (featured-products:style1 to style3), matched against the block's view_style.

Gotchas

  • The reviews key is testimonial, singular. packages/theme-engine/docs/HOME_COMPONENTS.md writes the path as testimonials; a replacement registered under that name is never used.

  • A featured-products block whose view_style is not exactly style1, style2 or style3 matches no default. The demo store sends view_style: "products_without_special_product" (items with featured_product and products, the shape FeaturedProductsStyle3 reads), so that block draws nothing on the engine's home page. Register a component under featured-products:<that view_style> to show it.

  • store-features needs no wrapper on the demo store: the API sends features with icon, title and description, which is what the component reads. A block missing that array throws instead — see StoreFeatures.

Related

registerHomeComponents

Tells the engine which component draws each home page block, by the block path the Salla API sends. Call it once at startup.

HomeComponentRenderer

Draws one home page block from its API data: finds its registered component, wraps it in an error boundary, and defers it until visible.

Source and docs