Hooks: useVariantPicker to useBundleRecommendations
The hooks of @poltura/theme-sdk/product, useVariantPicker to useBundleRecommendations.
Ezen az oldalon
import { … } from '@poltura/theme-sdk/product';useVariantPicker
The variant picker of the nearest product: its options, the choice and the variant it picks.
useVariantPicker(): VariantPickerStateThe choice is host-owned and shared by every block of the product; select also emits the variant-selected event.
Returns: The picker's options, the choice and the picked variant.
Example
import { VariantOption, VariantOptionValue, useVariantPicker } from '@poltura/theme-sdk/product';
export function Picker() {
const picker = useVariantPicker();
return (
<>
{picker.options.map((option) => (
<VariantOption key={option.id} option={option}>
{option.values.map((value) => (
<VariantOptionValue
key={value.id}
value={value}
onSelect={() => picker.select(option.id, value.id)}
/>
))}
</VariantOption>
))}
</>
);
}useProductGallery
The gallery state of the nearest product, which moves to the picked variant's first image.
useProductGallery(): ProductGalleryStateReturns: The images, the one shown and the zoomed view.
Example
import { MediaImage } from '@poltura/theme-sdk/media';
import { useProductGallery } from '@poltura/theme-sdk/product';
export function Gallery() {
const gallery = useProductGallery();
const image = gallery.images[gallery.active];
return image ? (
<button type='button' onClick={gallery.next}>
<MediaImage image={image} role='pdp' />
</button>
) : null;
}useBundleSelection
The bundle offered with the product page's product and the shopper's choice in it.
useBundleSelection(): BundleSelectionState | nullPricing is host-owned: the choice is quoted on the host and the bundle goes to the cart as one signed offer.
Returns: The bundle, its items and groups with the choice, or null when the product has no bundle offer.
Example
import { useBundleSelection } from '@poltura/theme-sdk/product';
export function BundleItems() {
const bundle = useBundleSelection();
if (bundle === null) return null;
return (
<ul>
{bundle.items.map((item) => (
<li key={item.id}>
<label>
<input
type='checkbox'
checked={item.selected}
disabled={!item.selectable && !item.selected}
onChange={(event) => bundle.toggle(item.id, event.currentTarget.checked)}
/>
{item.title}
</label>
</li>
))}
</ul>
);
}useNotifyMe
The form state behind NotifyMe, for a theme drawing its own notify-me form.
useNotifyMe(variantId: string | null): NotifyMeStateThe request runs on the host behind the store's bot check; the notice is sent once, when the variant can be bought.
Parameters
variantId: string | null: The variant to hear about, or null for none.
Returns: The address, the newsletter choice, the status and the submit action.
Example
import { useNotifyMe } from '@poltura/theme-sdk/product';
export function Notify({ variantId }: { variantId: string }) {
const notify = useNotifyMe(variantId);
if (!notify.enabled) return null;
if (notify.status === 'done') return <p>We will email you.</p>;
return (
<form onSubmit={(event) => { event.preventDefault(); void notify.submit(); }}>
<input type='email' value={notify.email} onChange={(event) => notify.setEmail(event.currentTarget.value)} />
<button type='submit' disabled={notify.status === 'submitting'}>Notify me</button>
</form>
);
}useNearestProduct
The product the code sits under: the product page's, a product card's or a ProductScope's.
useNearestProduct(): Product | nullReturns: The nearest product, or null outside any product.
Example
import { useNearestProduct } from '@poltura/theme-sdk/product';
export function Vendor() {
const product = useNearestProduct();
return product?.vendor ? <p>{product.vendor}</p> : null;
}useProductBuy
The buy box state of the nearest product, shared by every part of the box.
useProductBuy(): ProductBuyThrows outside a product: place it under the product page, a product card or a ProductScope. The cart mutation is host-owned; on the product page add runs the page's own add.
Returns: The chosen variant, the quantity, the add action and the button text.
Example
import { AddToCartButton, QuantityStepper, useProductBuy } from '@poltura/theme-sdk/product';
export function BuyBox() {
const buy = useProductBuy();
return (
<div>
<QuantityStepper value={buy.quantity} onChange={buy.setQuantity} />
<AddToCartButton
label={buy.ctaLabel}
busy={buy.isAdding}
disabled={!buy.canAdd}
error={buy.error}
onAdd={() => void buy.add()}
/>
</div>
);
}useBundleQuote
The price of a bundle with the shopper's choice in it, refreshed before it lapses.
useBundleQuote(input: BundleQuoteInput, options?: Omit<QueryOptions, 'suspense'>): QueryResult<BundleQuote>Pricing is host-owned: the quote is signed, and adding the bundle to the cart presents it back.
Parameters
input: BundleQuoteInput: The bundle and the choice to price.options?: Omit<QueryOptions, 'suspense'>: Whether the read runs, such as off while the choice is incomplete.
Returns: The quote once it is priced.
Example
import { useBundleQuote } from '@poltura/theme-sdk/product';
export function BundlePrice({ bundleId }: { bundleId: string }) {
const { data } = useBundleQuote({ bundleId });
return data?.accepted ? <span>{data.total.amount}</span> : null;
}useBundleRecommendations
The bundles recommended for a product, best first, for the shopper's cart.
useBundleRecommendations(by: {
readonly productId: string;
readonly variantId?: string;
}, options?: Omit<QueryOptions, 'suspense'>): QueryResult<readonly BundleRecommendation[]>The ranking is host-owned and seeded by the shopper's cart.
Parameters
by: { readonly productId: string; readonly variantId?: string; }: The product to recommend bundles for, and its variant when the shopper picked one.options?: Omit<QueryOptions, 'suspense'>: Whether the read runs, and whether it keeps the previous answer while loading.
Returns: The recommendations once they load; empty when the store recommends none.
Example
import { useBundleRecommendations } from '@poltura/theme-sdk/product';
export function Suggested({ productId }: { productId: string }) {
const { data } = useBundleRecommendations({ productId });
return <ul>{data?.map((row) => <li key={row.bundleId}>{row.title}</li>)}</ul>;
}