ProductCard

Use ProductCard to show a product in a grid, slider or list. It already handles the price, sale and stock badges, the wishlist button and add-to-cart, so you only pass the product.

ExampleCopy Anchor Link

import { ProductCard } from '@salla.sa/twilight-theme-engine/product';
import type { Product } from '@salla.sa/twilight-theme-engine/types';

export function FixedProducts({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
      {products.map((product, index) => (
        <ProductCard key={product.id} product={product} index={index} />
      ))}
    </div>
  );
}

APICopy Anchor Link

GotchasCopy Anchor Link

• It uses useMoney, useWishlist and Image inside, so it must be below TwilightProvider (your root route already is).
• Out-of-stock products show a "notify me" button, unless the theme setting notify_when_available_in_card is turned off.
• Product links are plain <a href> anchors, so opening a product reloads the page.
• To change the card for the whole theme, wrap it (as the starter theme does with its own ProductCard) or replace it through the component registry. See Replace the product card.

NextCopy Anchor Link

• Replace the product card is the step-by-step version.
• Layout and components shows the other ways to swap a component.