Parts: ProductGalleryImage to ProductKeySpecs

import { … } from '@poltura/theme-sdk/product';

ProductGalleryImageCopy Anchor Link

One framed gallery image, cropped to the aspect, or the placeholder when there is none.

ProductGalleryImage(props: ProductGalleryImageProps): ReactElement

Props: ProductGalleryImageProps

Example

import { ProductGalleryImage, useProductGallery } from '@poltura/theme-sdk/product';

export function Cover() {
  const { images } = useProductGallery();
  return <ProductGalleryImage image={images[0] ?? null} aspect='portrait' priority />;
}

ProductGalleryThumbsCopy Anchor Link

A row of thumbnails, the shown image's marked, each showing its image when pressed; nothing for fewer than two images.

ProductGalleryThumbs(props: ProductGalleryThumbsProps): ReactElement | null

Props: ProductGalleryThumbsProps

Example

import { ProductGalleryThumbs, useProductGallery } from '@poltura/theme-sdk/product';

export function Thumbs() {
  const gallery = useProductGallery();
  return <ProductGalleryThumbs images={gallery.images} active={gallery.active} onSelect={gallery.select} />;
}

BundleConfiguratorCopy Anchor Link

A standalone bundle: its items with the choice among them, the live price and an add-the-bundle-to-cart button.

BundleConfigurator(props: BundleConfiguratorProps): ReactElement

Pass a bundle the SDK handed out, such as from useProductBundles; the part reads its full record on the host.

Props: BundleConfiguratorProps

Example

import { BundleConfigurator, useProductBundles } from '@poltura/theme-sdk/product';

export function Offer({ productId }: { productId: string }) {
  const bundle = useProductBundles({ productIds: [productId] }).data?.get(productId)?.[0];
  return bundle === undefined ? null : <BundleConfigurator bundle={bundle} />;
}

See also: useBundleQuote

BundleSuggestionsCopy Anchor Link

A panel of bundle offers with their saving, the reason each is suggested and a configure button.

BundleSuggestions(props: BundleSuggestionsProps): ReactElement | null

Pass bundles the SDK handed out, such as from useProductBundles.

Props: BundleSuggestionsProps

Example

import { useState } from 'react';
import { BundleSuggestions, useProductBundles } from '@poltura/theme-sdk/product';

export function Offers({ productId }: { productId: string }) {
  const [active, setActive] = useState<string | null>(null);
  const bundles = useProductBundles({ productIds: [productId] }).data?.get(productId) ?? [];
  return <BundleSuggestions bundles={bundles} activeBundleId={active} onSelectBundle={setActive} />;
}

See also: useBundleRecommendations

WishlistButtonCopy Anchor Link

A heart button that saves a product to the shopper's favourites and takes it out again; nothing when the store has favourites turned off.

WishlistButton(props: WishlistButtonProps): ReactElement | null

A signed-in shopper's list is kept in their account and a guest's in the browser, where it joins the account on sign-in. The card placement is positioned absolutely, so put it inside a relative image box. The first product a browser ever saves shows a short note once; later saves show nothing.

Props: WishlistButtonProps

Example

import type { ProductCard } from '@poltura/theme-sdk/listing';
import { WishlistButton } from '@poltura/theme-sdk/product';

export function Corner({ card }: { card: ProductCard }) {
  return (
    <WishlistButton
      productId={card.id}
      title={card.title}
      categoryLabel={card.categoryLabel}
      price={card.price}
    />
  );
}

WishlistLinkCopy Anchor Link

A heart with the number of saved products, linking to the shopper's favourites page; nothing when the store has favourites turned off.

WishlistLink(props: WishlistLinkProps): ReactElement | null

Props: WishlistLinkProps

Example

import { WishlistLink } from '@poltura/theme-sdk/product';

export function HeaderActions() {
  return <WishlistLink />;
}

ProductBadgesCopy Anchor Link

A product's badges as colour-coded labels; nothing without badges.

ProductBadges(props: ProductBadgesProps): ReactElement | null

A tone follows the theme through the --badge-<tone> and --badge-<tone>-foreground custom properties, which a theme or colour scheme may set; a custom colour is drawn as the merchant set it. Without --badge-<tone> a tone paints with the theme's own colour: dark the primary colour, accent the focus ring colour, red the destructive colour, green the success colour, amber the warning colour, blue #1d5fa8. The text takes --badge-<tone>-foreground when it is set, else black or white by the lightness of the tone's colour. The shipped themes set all six in tokens.css and tokens.dark.css: dark and red point at the --primary-foreground and --destructive-foreground pair, so a colour edit keeps them readable, and the others hold the black or white that reads at WCAG AA (4.5:1) on the tone's colour. A theme that changes a tone colour sets its foreground with it. The platform also writes --badge-accent-foreground in the generated settings CSS whenever the merchant saves a focus ring colour, and --badge-ring-foreground in each colour scheme box, by the same black-or-white rule, so the accent tone stays readable after an edit.

Props: ProductBadgesProps

Example

import type { ProductCard } from '@poltura/theme-sdk/listing';
import { ProductBadges } from '@poltura/theme-sdk/product';

export function Corner({ card }: { card: ProductCard }) {
  return <ProductBadges badges={card.badges} placement='card' className='absolute left-2 top-2' />;
}

ProductKeySpecsCopy Anchor Link

The attributes the store shows by the product title, such as a game's platform: a small name over its values with their icons; nothing without any.

ProductKeySpecs(props: ProductKeySpecsProps): ReactElement | null

Props: ProductKeySpecsProps

Example

import { ProductKeySpecs } from '@poltura/theme-sdk/product';

export function UnderTitle() {
  return <ProductKeySpecs className='mt-2' />;
}

See also: useProductPage