Developers
Start building
Themes/Theme SDK/Modules/product/Parts: VariantOption to ProductScope

Parts: VariantOption to ProductScope

The parts of @poltura/theme-sdk/product, VariantOption to ProductScope.

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

VariantOption

One option of the picker with its name, laying its values out as buttons, swatches, tiles or a dropdown.

VariantOption(props: VariantOptionProps): ReactElement

Props: VariantOptionProps

Example

import { VariantOption, VariantOptionValue } from '@poltura/theme-sdk/product';
import type { VariantPickerOption } from '@poltura/theme-sdk/product';

export function SizeOption({ option, pick }: { option: VariantPickerOption; pick: (id: string) => void }) {
  return (
    <VariantOption option={option} display='buttons'>
      {option.values.map((value) => (
        <VariantOptionValue key={value.id} value={value} onSelect={() => pick(value.id)} />
      ))}
    </VariantOption>
  );
}

VariantOptionValue

One value of an option: a button, a swatch, an image tile or a dropdown entry, following its option.

VariantOptionValue(props: VariantOptionValueProps): ReactElement

Props: VariantOptionValueProps

Example

import { VariantOptionValue } from '@poltura/theme-sdk/product';
import type { VariantPickerValue } from '@poltura/theme-sdk/product';

export function Choice({ value, pick }: { value: VariantPickerValue; pick: () => void }) {
  return <VariantOptionValue value={value} onSelect={pick} />;
}

VariantSwatch

The colour, split colour or image fill of an option value's swatch.

VariantSwatch(props: VariantSwatchProps): ReactElement

Props: VariantSwatchProps

Example

import { VariantSwatch } from '@poltura/theme-sdk/product';
import type { Swatch } from '@poltura/theme-sdk/product';

export function Dot({ swatch }: { swatch: Swatch }) {
  return <VariantSwatch swatch={swatch} className='size-4 rounded-full' />;
}

QuantityStepper

The quantity field with minus and plus, snapping typed amounts to the order limits and naming them.

QuantityStepper(props: QuantityStepperProps): ReactElement

Props: QuantityStepperProps

Example

import { useState } from 'react';
import { QuantityStepper } from '@poltura/theme-sdk/product';

export function Quantity() {
  const [quantity, setQuantity] = useState(1);
  return <QuantityStepper value={quantity} step={6} onChange={setQuantity} />;
}

AddToCartButton

The buy box's add to cart button with the error of the last attempt under it.

AddToCartButton(props: AddToCartButtonProps): ReactElement

Props: AddToCartButtonProps

Example

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

export function Buy({ add, adding }: { add: () => void; adding: boolean }) {
  return <AddToCartButton label='Add to cart' busy={adding} disabled={adding} onAdd={add} />;
}

WalletButtons

Apple Pay, Google Pay and the other express wallets of the product page, mounted in the browser.

WalletButtons(props: WalletButtonsProps): ReactElement | null

Payment is host-owned: the row is a host slot the store's payment apps fill, and it draws nothing off the product page.

Props: WalletButtonsProps

Example

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

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

WholesaleTiers

A wholesale buyer's tier price, list price and quantity breaks, the chosen quantity's break highlighted.

WholesaleTiers(props: WholesaleTiersProps): ReactElement

Props: WholesaleTiersProps

Example

import { WholesaleTiers } from '@poltura/theme-sdk/product';
import type { WholesaleTiersView } from '@poltura/theme-sdk/product';

export function Tiers({ tiers, quantity }: { tiers: WholesaleTiersView; quantity: number }) {
  return <WholesaleTiers tiers={tiers} quantity={quantity} />;
}

AvailabilityBadge

"Pre-order", "Coming soon" or "Sold out" for a pre-order state; nothing for plain stock states.

AvailabilityBadge(props: AvailabilityBadgeProps): ReactElement | null

Props: AvailabilityBadgeProps

Example

import { AvailabilityBadge } from '@poltura/theme-sdk/product';
import type { Product } from '@poltura/theme-sdk/product';

export function TileBadge({ product }: { product: Product }) {
  return <AvailabilityBadge availability={product.availability} className='absolute left-2 top-2' />;
}

PersonalizationFields

The texts the shopper fills in to personalise the product page's item, such as an engraving.

PersonalizationFields(props: BuyFieldsProps): ReactElement | null

The values and their checks are host-owned and travel with the item to the cart; nothing draws off the product page.

Props: BuyFieldsProps

Example

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

export function Engraving() {
  return <PersonalizationFields className='mb-4' />;
}

GiftCardFields

A gift card product's amount, recipient, message and send date.

GiftCardFields(props: BuyFieldsProps): ReactElement | null

The draft is host-owned and travels with the card to the cart; nothing draws for other products.

Props: BuyFieldsProps

Example

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

export function GiftCard() {
  return <GiftCardFields />;
}

ProductScope

Makes a product the nearest one for everything inside, with its own variant choice and quantity.

ProductScope(props: ProductScopeProps): ReactElement

Pass a product the SDK handed out, such as from useNearestProduct; the scope reads its full record on the host.

Props: ProductScopeProps

Example

import { ProductScope, useNearestProduct, type Product } from '@poltura/theme-sdk/product';

function Title() {
  return <h3>{useNearestProduct()?.title}</h3>;
}

export function Featured({ product }: { product: Product }) {
  return (
    <ProductScope product={product}>
      <Title />
    </ProductScope>
  );
}
Last updated