Témák

Témák/Theme SDK/Modules/product

product

Ez az oldal még csak angolul érhető el.

Products, variants, options, availability, specifications, reviews, the product page view and the buy box.

Ezen az oldalon

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.

Utoljára frissítve 2026. nov. 01.