CategoryItems

Source: apps/jti-next/src/components/CategoryItems/
Builder.io registration: name "Category items", model "category"
Default data bindings: items ← categoryItems, subcategoriesMap ← subcategoriesMap

Renders a responsive grid of product cards for a single category. Optionally inserts an RtbCard (highlight card with specification text) at a configurable position in the grid.

Props (CategoryItemsProps + ExtendedCategoryItemsProps)

Prop	Type	Default	Description
items	CategoryItem[]	required	Product list (see item shape below)
columnDesktopWidth	"3" \| "4" \| "6" \| "12"	"4"	Grid column width on desktop
columnTabletWidth	"3" \| "4" \| "6" \| "12"	—	Grid column width on tablet
withRtbCard	boolean	—	Insert a highlight card into the grid
rtbCard	HighlightCardProps & { specification?: string }	—	Highlight card configuration (see RtbCard below)
subcategoriesMap	Record<string, string[]>	—	Map of subcategory UID → SKU list; used for client-side filtering

CategoryItem shape (each element of items):

Field	Type	Description
name	string	Product name
url_key	string	Magento URL key (used for routing)
sku	string	Magento SKU
thumbnailSrc	string	Product listing image URL
thumbnailAltText	string	Alt text for listing image
shortDescription	string?	Short description text
isNew	boolean?	Controls "New" badge
categoryUrlKey	string?	Parent category URL key
province	string?	Comma-separated province list
+ all productCardSharedInputs fields		Badge, visibility, CTA override fields (see ProductCard inputs)

Config keys consumed

Key	Effect
isQuickAddToCartCtaForSimpleSticksEnabled	Passed through to each ProductCard

UI primitives used

@jti/ui ProductCard

See ProductCard.

@jti/ui RtbCard

Source: packages/ui/src/components/RtbCard/RtbCard.tsx
Exported from @jti/ui index: ✅

Thin wrapper over HighlightCard that adds an optional specification caption.

type RtbCardProps = HighlightCardProps & {
  specification?: string;
};

type HighlightCardProps = {
  title: string;
  description?: string;
  imageUrl: string;
  buttonText: string;
  linkUrl: string;
  theme: "dark" | "light";
  alt?: string;
  imageTitle?: string;
  rightBadgeText?: string;
  leftBadgeText?: string;
  backgroundType?: "video" | "image";
  videoFileReference?: string;
  trackingEvent?: string;
  openIn?: "newTab" | "sameTab";
  className?: string;
};

@jti/ui ProductCardContainerContextProvider

Source: packages/ui/src/components/ProductCardContainerContextProvider/ProductCardContainerContextProvider.tsx
Exported from @jti/ui index: ✅

Provides a shared context that batches dynamic product data (price, stock status, currency) for all child ProductCard instances in a single API call.

// Provider props
type Props = PropsWithChildren<{ isTrial?: boolean }>;

// Context shape
type ProductCardContainerContextType = {
  productsSkus: Record<string, boolean>;
  products: Record<string, DynamicProductData>;
  isProductsDataLoading?: boolean;
  currency?: string;
  addToSkuList?: (sku: string) => void;
};

Children call addToSkuList(sku) to register; the provider fires a single useProductsDynamicData query for all registered SKUs.