Replace the product card

Use this when you want one product card design everywhere a product is shown.

Goal: the engine's listing pages and home blocks all render MyProductCard.

The engine's ProductCard checks a component registry for the key product:card and renders the override if one exists. Listing pages and the engine's product home blocks all render that same ProductCard, so one override covers them. Pages you write should import ProductCard from @salla.sa/twilight-theme-engine/product (not from a deep path) so they get it too.

import type { ProductCardProps } from '@salla.sa/twilight-theme-engine/product';
import { useMoney } from '@salla.sa/twilight-theme-engine/hooks/useMoney';

export function MyProductCard({ product, className }: ProductCardProps) {
  const { format } = useMoney();
  const onSale = product.is_on_sale && product.sale_price;
  return (
    <div className={`s-product-card-entry ${className ?? ''}`}>
      <a href={product.url}>
        <img src={product.image?.url} alt={product.image?.alt ?? product.name} loading="lazy" />
        <h3>{product.name}</h3>
      </a>
      <span>{format(onSale ? product.sale_price : product.price)}</span>
    </div>
  );
}

import { registry } from '@salla.sa/twilight-theme-engine';
import { MyProductCard } from './components/product/MyProductCard';

registry.register('product:card', MyProductCard);
registry.override('product:card', MyProductCard);

Check it workedCopy Anchor Link

Open a category page and the home page: every product uses your markup.

Replace the whole product list pageCopy Anchor Link

The product lists work the same way one level up. Every list the engine serves (category, search, tag, brand and products) renders whatever is registered as product:list-page, and shows product:list-skeleton while it loads. Register your own page once instead of replacing each route:

import { lazy } from 'react';
import { registry } from '@salla.sa/twilight-theme-engine';
import { MyListSkeleton } from './components/product/MyListSkeleton';

// Lazy, so the page loads with a product list instead of with every page.
const MyListPage = lazy(() =>
  import('./components/product/MyListPage').then((m) => ({ default: m.MyListPage }))
);

registry.register('product:list-page', MyListPage);
registry.register('product:list-skeleton', MyListSkeleton);

• The page receives the loader data, ProductListLoaderData from @salla.sa/twilight-theme-engine/routes/product-listing: page, source, query, products, pagination and, for categories and search, filters. Branch on source.type where the lists should differ.
• The skeleton receives { hideFilters }, which is true on every list but categories and search.
• A plain register is enough for these two keys; there is no override step. Without them, the engine's own ProductListPage and page skeleton render.
• Keep what the engine page does if you need it: the product:list.* hook slots, infinite scroll from pagination.next, the sort menu and the filters. The reference theme's app/components/product/ProductListPage.tsx is a complete example.

NextCopy Anchor Link

• ProductCard: the props and layouts you can reuse.
• Add a home block and Fork a built-in route when you need more than the card.