product
Products, variants, options, availability, specifications, reviews, the product page view and the buy box.
On this page
import { … } from '@poltura/theme-sdk/product';Hooks
| Name | What it is |
|---|---|
useVariantPicker | The variant picker of the nearest product: its options, the choice and the variant it picks. |
useProductGallery | The gallery state of the nearest product, which moves to the picked variant's first image. |
useBundleSelection | The bundle offered with the product page's product and the shopper's choice in it. |
useNotifyMe | The form state behind NotifyMe, for a theme drawing its own notify-me form. |
useNearestProduct | The product the code sits under: the product page's, a product card's or a ProductScope's. |
useProductBuy | The buy box state of the nearest product, shared by every part of the box. |
useBundleQuote | The price of a bundle with the shopper's choice in it, refreshed before it lapses. |
useBundleRecommendations | The bundles recommended for a product, best first, for the shopper's cart. |
useProductBundles | The bundles that include the given products, by product id. |
useRelatedProducts | Related product cards: the merchant's picks, then automatic recommendations when switched on, then popular products of the category and the store. |
useWishlist | The shopper's favourites: how many, which products, and a toggle. A signed-in shopper's list lives in their account and a guest's in the browser. |
useOptionalProductPage | The product page's view, or null where no product page is drawn, such as a product shown inside another page. |
useProductPage | The product page with everything it shows beyond the product: the trail, highlights, specifications, guides, warranty, safety, coverage and the first reviews. |
useProductTabs | The tabs the nearest product page shows, in the merchant's order. |
useProductTableLinks | The nearest product's link tables, sorted onto its variant picker options. |
useProductTables | The tables attached to the nearest product, optionally only those the merchant placed one way. |
useReviews | The reviews of one or several products, one page at a time, with the review score over all of them. |
useSubmitReview | Sending a shopper's review of a product, with the bot check and the refresh of the shown reviews. |
Parts
| Name | What it is |
|---|---|
VariantOption | One option of the picker with its name, laying its values out as buttons, swatches, tiles or a dropdown. |
VariantOptionValue | One value of an option: a button, a swatch, an image tile or a dropdown entry, following its option. |
VariantSwatch | The colour, split colour or image fill of an option value's swatch. |
QuantityStepper | The quantity field with minus and plus, snapping typed amounts to the order limits and naming them. |
AddToCartButton | The buy box's add to cart button with the error of the last attempt under it. |
WalletButtons | Apple Pay, Google Pay and the other express wallets of the product page, mounted in the browser. |
WholesaleTiers | A wholesale buyer's tier price, list price and quantity breaks, the chosen quantity's break highlighted. |
AvailabilityBadge | "Pre-order", "Coming soon" or "Sold out" for a pre-order state; nothing for plain stock states. |
PersonalizationFields | The texts the shopper fills in to personalise the product page's item, such as an engraving. |
GiftCardFields | A gift card product's amount, recipient, message and send date. |
ProductScope | Makes a product the nearest one for everything inside, with its own variant choice and quantity. |
ProductGalleryImage | One framed gallery image, cropped to the aspect, or the placeholder when there is none. |
ProductGalleryThumbs | A row of thumbnails, the shown image's marked, each showing its image when pressed; nothing for fewer than two images. |
BundleConfigurator | A standalone bundle: its items with the choice among them, the live price and an add-the-bundle-to-cart button. |
BundleSuggestions | A panel of bundle offers with their saving, the reason each is suggested and a configure button. |
WishlistButton | 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. |
WishlistLink | A heart with the number of saved products, linking to the shopper's favourites page; nothing when the store has favourites turned off. |
ProductBadges | A product's badges as colour-coded labels; nothing without badges. |
ProductKeySpecs | 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. |
ProductSharePanel | A share dialog with copy-link, email, WhatsApp, Facebook, X and the device's own share sheet. |
ProductSpecs | The specification table: a titled section per group with a row of name and value each; nothing without rows. |
SpecValueLabel | One attribute value as the shopper reads it: its icon or logo beside the text. |
SpecValues | All values of one attribute, each with its icon, side by side and wrapping; nothing for an attribute without values. |
ProductTableLink | A link opening a table sheet: at the side, or from the bottom on phones. |
ProductTableView | One product table in place: its intro, the unit switch, the table and the measuring guide; the chosen variant's row is highlighted. |
ProductTabContent | One tab's content. The description with its keywords, the specification table, the guides and downloads, the warranty, the merchant's text or a product table. |
ProductTrustBadge | The trust badge an installed review app draws on the product page, such as the store's rating with that app; nothing when no app offers one. |
RatingStars | Five stars with as many filled as the rating rounds to. |
RatingSummary | The average rating large, with the stars and a bar per star rating showing how many reviews gave it. |
ReviewCard | One review: the reviewer's shortened name and initials, the verified badge, the date, the stars, the title and the text. |
ReviewForm | The write-a-review form: a star picker, name, email, title and text, a thank-you once sent and a product picker for a bundle. |
ReviewSkeleton | Three placeholder cards shaped like ReviewCard, for the time the reviews load. |
ReviewsEmpty | The message for a product without reviews, with a button that asks for the first one. |
ReviewsFooter | The load-more button under a review list, or the count of reviews seen once there are no more. |
ReviewsHeader | The reviews heading with the review count and a write-a-review button. |
Defaults
| Name | What it is |
|---|---|
VariantPicker | The complete variant picker of the nearest product, built from its parts. |
BundleSelector | The complete bundle offer of the product page: its items, groups, suggested sets and savings. |
NotifyMe | "Notify me" for a variant that cannot be bought now: one email, sent once when it can be. |
ProductGallery | The nearest product's gallery, following the picked variant's image. |
ProductDetails | The product's key attributes, then where it can be activated and whether it works in the shopper's country; nothing for a product with neither. |
ProductHeader | The product page's heading block: tags, the title, the maker and SKU, and the rating with its review count. |
ProductHighlights | The merchant's highlighted selling points as a two-column list with chevrons; nothing without any. |
ProductTabs | The product page's tabs as the merchant arranged them: built-in content, their own text and product tables; nothing when all are empty. |
Reviews | The complete reviews panel: heading, score, the reviews with load more, and the write-a-review form. |
Constants
| Name | What it is |
|---|---|
productRegions | The regions of the product page's main section, for Slot. |
Types
| Name | What it is |
|---|---|
Availability | Whether and how a product or variant can be bought, with its label in the page language. |
BundleRef | The fixed bundle a product card sells as one item. |
CountryLabel | A country with its name in the page language. |
ExpectedDate | When a pre-ordered or upcoming product is expected to ship. |
ExpectedPrecision | How exact a promised date is. |
GiftCardKind | Whether a gift card product is loaded with an amount or redeems for a set item. |
PersonalizationField | A text the shopper fills in to personalise their item, such as an engraving. |
Product | A product with everything a product page shows of it. |
ProductBadge | A merchant-managed label on a product, such as "New" or "Sale", already in the page language. |
ProductCoverage | Where a region-locked product, such as a licence key, can be used. |
ProductOption | A choice the shopper makes to pick a variant, such as colour or size. |
ProductOptionDisplay | How the picker presents an option's values. |
ProductOptionValue | One value of a product option, such as "Red". |
ProductPageView | Everything a product page shows beyond the product itself. |
ProductSafety | What the EU product safety rules (2023/988, Art. 19) require a listing to show. |
ProductSafetyContact | Who answers for a product's safety. |
ProductTab | A product page tab. A built-in one, the merchant's text, or a table. |
ProductTabBuiltin | A built-in tab's content: what the product already holds. |
ProductTable | A product table. A size chart, nutrition facts or specifications. |
ProductTableColumn | One column of a product table, such as a measurement. |
ProductTableColumnType | How a column's cells read. |
ProductTablePlacement | Where a table shows. |
ProductTableRow | One row of a product table, such as a size. |
ProductTabsDisplay | Tabs or an accordion. A tab bar, or one heading per tab. |
ProductWarranty | The warranty that comes with a product. |
RatingCount | How many reviews gave one star rating. |
RatingStats | A product's review score. |
Review | A published review of a product. |
ReviewPage | One page of a product's reviews with its score. |
ReviewPolicy | How the store checks reviews, from its own settings. |
Spec | One row of a product's specification table. |
SpecGroup | A titled section of a product's specification table. |
SpecValue | One value of a spec as the shopper reads it. |
Swatch | The swatch a variant option value shows instead of a text button. |
UnavailableReason | Why a variant cannot be bought right now. |
Variant | One buyable version of a product, such as the red one in size M. |
VariantPickerValue | One value of an option in the variant picker, with what choosing it would lead to. |
VariantPickerOption | One option of the variant picker, such as colour or size. |
VariantPickerState | The variant picker's state: the options with their values, the current choice and the variant it picks. |
VariantPickerClasses | Class names for the pieces of VariantPicker and VariantOption. |
VariantPickerProps | Props of VariantPicker. |
VariantOptionProps | Props of VariantOption. |
VariantOptionValueProps | Props of VariantOptionValue. |
VariantSwatchProps | Props of VariantSwatch. |
ProductGalleryState | The image viewer of a product page: its images, the one shown and the zoomed view. |
QuantityStepperProps | Props of QuantityStepper. |
AddToCartButtonProps | Props of AddToCartButton. |
WalletButtonsProps | Props of WalletButtons. |
WholesaleBreak | One quantity break of a wholesale price list. |
WholesaleTiersView | What a wholesale buyer sees beside the price: the list price and the quantity breaks. |
WholesaleTiersProps | Props of WholesaleTiers. |
AvailabilityBadgeProps | Props of AvailabilityBadge. |
BuyFieldsProps | Props of PersonalizationFields and GiftCardFields. |
BundleSelectionGroup | A group of bundle items the shopper picks a number of, such as "Choose 2 sauces". |
BundleSelectionItem | One item a bundle offers with the product page's product. |
BundleSelectionState | The bundle offered on the product page and the shopper's choice in it. |
BundleSelectorProps | Props of BundleSelector. |
NotifyMeCopy | Texts of NotifyMe that replace the platform's own. |
NotifyMeProps | Props of NotifyMe. |
NotifyMeReason | Why a shopper asks to hear when a variant can be bought. |
NotifyMeState | The state of a notify-me form: the address, the newsletter choice and the request. |
NotifyMeStatus | Where a notify-me request stands. |
ProductScopeProps | Props of ProductScope. |
ProductBuy | The buy box of the nearest product: the chosen variant, the quantity and adding it to the cart. |
GalleryAspect | How a gallery frame crops its image. |
ProductGalleryImageProps | Props of ProductGalleryImage. |
ProductGalleryProps | Props of ProductGallery. |
ProductGalleryThumbsProps | Props of ProductGalleryThumbs. |
BundleConfiguratorProps | Props of BundleConfigurator. |
BundleSuggestionsProps | Props of BundleSuggestions. |
Bundle | A bundle: products sold together at a saving. |
BundleGroup | A group of bundle items the shopper picks a number of, such as "Choose 2 sauces". |
BundleItem | One item a bundle holds. |
BundleQuote | The price of a bundle with the shopper's choice in it. |
BundleQuoteInput | What to price: one bundle with the shopper's choice in it. |
BundleQuoteRefusal | Why a bundle could not be priced. |
BundleRecommendation | A bundle recommended for a product, with the choice that suits the shopper and its price. |
BundleRecommendationReason | Why a bundle is recommended with the product. |
WishlistButtonProps | Props of WishlistButton. |
WishlistLinkProps | Props of WishlistLink. |
WishlistProduct | The product a toggle saves or removes. |
WishlistState | The shopper's favourites. |
GiftCardDraft | What the shopper fills in to send a gift card. |
GiftCardIssue | Why a gift card field is not accepted. |
GiftCardState | A gift card product's amount, recipient and delivery as the shopper fills them in. |
PersonalizationIssue | Why a personalisation text is not accepted. |
PersonalizationState | The personalisation texts of the product page's item and what the shopper has typed. |
ProductBadgesProps | Props of ProductBadges. |
ProductDetailsProps | Props of ProductDetails. |
ProductHeaderProps | Props of ProductHeader. |
ProductHighlightsProps | Props of ProductHighlights. |
ProductKeySpecsProps | Props of ProductKeySpecs. |
ProductSharePanelProps | Props of ProductSharePanel. |
ProductSpecsProps | Props of ProductSpecs. |
ProductTabContentProps | Props of ProductTabContent. |
ProductTableLinkProps | Props of ProductTableLink. |
ProductTableLinks | Link tables by option: where they show in the variant picker. |
ProductTableViewProps | Props of ProductTableView. |
ProductTabsProps | Props of ProductTabs. |
SpecValueLabelProps | Props of SpecValueLabel. |
SpecValuesProps | Props of SpecValues. |
RatingStarsProps | Props of RatingStars. |
RatingSummaryProps | Props of RatingSummary. |
ReviewCardProps | Props of ReviewCard. |
ReviewFormProps | Props of ReviewForm. |
ReviewInput | What a shopper fills in to review a product. |
ReviewResult | How sending a review ended. |
ReviewSkeletonProps | Props of ReviewSkeleton. |
ReviewTarget | The product a review is written for; a bundle lets the shopper choose among its products. |
ReviewsBy | Which product or products a review list is about. |
ReviewsEmptyProps | Props of ReviewsEmpty. |
ReviewsFooterProps | Props of ReviewsFooter. |
ReviewsHeaderProps | Props of ReviewsHeader. |
ReviewsProps | Props of Reviews. |
SubmitReviewState | The state of sending a review. |