ProductCard

Source: apps/jti-next/src/components/ProductCard/
Builder.io registration: name "ProductCard", requires parent "ProductCardContainer"

The app-level ProductCard is a Builder.io-registered wrapper. It reads product data from a products binding injected by the parent ProductCardContainer, then delegates rendering to the @jti/ui ProductCard primitive.

App-level Builder.io inputs

These are the inputs exposed to content editors in Builder.io:

Input	Type	Description
sku	MagentoProduct	SKU of the product to display
trialSku	MagentoTrialproduct	SKU for the trial-store variant
badge.left	string	Left badge label (e.g. "New")
badge.right	string	Right badge label
badge.leftIcon	string	Icon name for left badge
badge.rightIcon	string	Icon name for right badge
isNewBadgeHidden	boolean	Suppress the automatic "New" badge
isDiscountBadgeHidden	boolean	Suppress the discount % badge
isDescriptionHidden	boolean	Hide the product short description
isOldPriceHidden	boolean	Hide the crossed-out old price
isCurrentPriceHidden	boolean	Hide the current price
isProductColorVariantsHidden	boolean	Hide colour swatches
isFreeTrialProduct	boolean	Mark card as a free-trial product (alters CTA behaviour)
isPrimaryButtonHidden	boolean	Hide the primary CTA button
isOutOfStockLabelHidden	boolean	Hide the out-of-stock label
primaryButton.text	string	Override CTA label
primaryButton.href	string	Override CTA href
secondaryButton.text	string	Secondary CTA label
secondaryButton.href	string	Secondary CTA href

Config keys consumed

Key	Effect
hideTeaserConfigurableOptions	When true, colour swatches are hidden regardless of builder inputs
isQuickAddToCartCtaForSimpleSticksEnabled	When true, shows an inline add-to-cart button for simple stick products

UI primitive: @jti/ui ProductCard

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

type ProductCardProps = {
  title: string;
  description?: string;
  image: { src?: string; alt: string };
  badge?: { left?: string; right?: string; leftIcon?: string; rightIcon?: string };
  primaryButton?: { href?: string; text?: string; enabled: boolean };
  secondaryButton?: { href?: string; text?: string };
  oldPrice?: number;
  currentPrice?: number;
  currency?: string;
  discount?: number;
  colors?: string[];          // hex values
  colorLabels?: string[];     // accessibility labels per color
  additionalInfo?: { text: string; icon?: DirectionalIconComponent };
  taxInfo?: string;
  isLoading?: boolean;
  dataSku?: string;
  isFreeTrialProduct?: boolean;
  isBundle?: boolean;
  categoryId?: string;
  categoryName?: string;
  shouldShowQuickAddToCart?: boolean;
};

Internal behaviour: dispatches TrackingEvents.TrackingCtaClick GTM events on CTA clicks; uses useAddProduct hook for quick-add-to-cart; renders RibbonBadge, ProductCardColors, FormattedPrice, and ProductTryNowButton; product images are run through getOptimizedMagentoImageSrcSet for responsive srcset generation.