Developers
Start building
Themes/Theme SDK/Modules/product/Types: VariantOptionProps to BundleSelectorProps

Types: VariantOptionProps to BundleSelectorProps

The types of @poltura/theme-sdk/product, VariantOptionProps to BundleSelectorProps.

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

VariantOptionProps

Props of VariantOption.

optionrequiredVariantPickerOption

The option.

displayProductOptionDisplay

How to show the values; the option's own display by default.

showTitleboolean

Shows the option's name; on by default, and kept for screen readers when off.

childrenrequiredReactNode

The option's values, as {@link VariantOptionValue} parts.

titleSlotReactNode

Content aligned to the end of the option's title row, such as a size guide link.

classesVariantPickerClasses

Classes added to the pieces; `value` is applied by {@link VariantPicker}, not here.

classNamestring

Classes added to the option.

VariantOptionValueProps

Props of VariantOptionValue.

valuerequiredVariantPickerValue

The value.

onSelectrequired() => void

Chooses the value.

classNamestring

Classes added to the value.

VariantSwatchProps

Props of VariantSwatch.

swatchrequiredSwatch

The swatch to draw.

classNamestring

Classes added to the swatch.

ProductGalleryState

The image viewer of a product page: its images, the one shown and the zoomed view.

imagesrequiredreadonly MediaImageRef[]

The product's images, in order.

activerequirednumber

The index of the image shown.

selectrequired(index: number) => void

Shows the image at an index.

nextrequired() => void

Shows the next image, from the last back to the first.

previousrequired() => void

Shows the previous image, from the first on to the last.

zoomrequired{ readonly open: boolean; show(): void; close(): void; }

The full-screen view of the shown image.

QuantityStepperProps

Props of QuantityStepper.

valuerequirednumber

The quantity.

minnumber | null

The fewest that may be ordered, or null for one.

maxnumber | null

The most that may be ordered, or null for no limit.

stepnumber | null

The pack size quantities move in, or null for one.

inCartnumber

How many the cart already holds, which the limits count.

onChangerequired(next: number) => void

Receives the new quantity, already within the limits.

classNamestring

Classes added to the stepper.

AddToCartButtonProps

Props of AddToCartButton.

labelrequiredstring

The button text, such as "Add to cart" or "Pre-order".

onAddrequired() => void

Adds the item to the cart.

disabledboolean

Whether the item cannot be added now.

busyboolean

Whether the item is being added.

errorstring | null

Why the last add failed, shown under the button, or null.

fullWidthboolean

Stretches the button over its row.

classNamestring

Classes added to the button.

WalletButtonsProps

Props of WalletButtons.

classNamestring

Classes added to the wallet row.

WholesaleBreak

One quantity break of a wholesale price list.

minQuantityrequirednumber

The quantity the break starts at.

unitPricerequiredMoney

One unit's price from that quantity on.

WholesaleTiersView

What a wholesale buyer sees beside the price: the list price and the quantity breaks.

listPricerequiredMoney | null

The consumer price when the buyer's is lower, otherwise null.

unitPricerequiredMoney

One unit's price below the first break.

breaksrequiredreadonly WholesaleBreak[]

The quantity breaks, smallest first.

tierOnlyrequiredboolean

Whether the product is sold to wholesale buyers only.

basisrequired'gross' | 'net'

Whether the amounts are net or gross.

WholesaleTiersProps

Props of WholesaleTiers.

tiersrequiredWholesaleTiersView

The buyer's tier prices.

quantitynumber

The quantity chosen, whose break is highlighted.

classNamestring

Classes added to the tiers.

AvailabilityBadgeProps

Props of AvailabilityBadge.

availabilityrequiredAvailability

The product's or variant's availability.

classNamestring

Classes added to the badge.

BuyFieldsProps

Props of PersonalizationFields and GiftCardFields.

classNamestring

Classes added to the fields.

BundleSelectionGroup

A group of bundle items the shopper picks a number of, such as "Choose 2 sauces".

idrequiredstring

The group's id.

labelrequiredstring

The group's label in the page language.

minrequirednumber

The fewest items to choose.

maxrequirednumber

The most items to choose.

chosenrequirednumber

How many are chosen.

completerequiredboolean

Whether the choice meets the group's limits.

BundleSelectionItem

One item a bundle offers with the product page's product.

idrequiredstring

The bundle item's id; pass it to `toggle`.

productIdrequiredstring

The item's product id.

variantIdrequiredstring

The item's variant id.

titlerequiredstring

The item's product title.

variantTitlerequiredstring | null

The variant's title, or null for a single-variant product.

imagerequiredMediaImageRef | null

The item's image, or null.

quantityrequirednumber

How many of it the bundle holds.

groupIdrequiredstring | null

The group the item is chosen in, or null for an ungrouped item.

optionalrequiredboolean

Whether the shopper may leave it out.

selectedrequiredboolean

Whether it is chosen.

selectablerequiredboolean

Whether choosing it now keeps the bundle within its limits.

BundleSelectionState

The bundle offered on the product page and the shopper's choice in it.

bundleIdrequiredstring

The bundle's id.

titlerequiredstring

The bundle's title.

moderequiredBundleMode

How the bundle sells.

offersrequiredreadonly { readonly id: string; readonly title: string; }[]

The other bundles the product is offered in, this one included.

chooseOfferrequired(bundleId: string) => void

Switches to another offer.

itemsrequiredreadonly BundleSelectionItem[]

The items, in the merchant's order.

groupsrequiredreadonly BundleSelectionGroup[]

The groups items are chosen in.

togglerequired(itemId: string, next: boolean) => void

Chooses or leaves out an item.

completerequiredboolean

Whether the choice makes a complete bundle.

savingsrequiredMoney | null

What the choice saves against buying the items alone, or null while unknown.

quoterequired{ readonly status: 'loading' | 'ready' | 'unavailable'; readonly total: Money | null; readonly compareAt: Money | null; }

The priced choice: `loading` while the host prices it, `unavailable` when it cannot.

BundleSelectorProps

Props of BundleSelector.

classNamestring

Classes added to the selector.

placement'aside' | 'below'

Where the offer sits: `aside` in the buy box (the default), or `below` across the page under both columns.

Last updated