Developers
Start building
Themes/Theme SDK/Modules/product/Parts: ProductSharePanel to ReviewCard

Parts: ProductSharePanel to ReviewCard

The parts of @poltura/theme-sdk/product, ProductSharePanel to ReviewCard.

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

ProductSharePanel

A share dialog with copy-link, email, WhatsApp, Facebook, X and the device's own share sheet.

ProductSharePanel(props: ProductSharePanelProps): ReactElement

Props: ProductSharePanelProps

Example

import { useState } from 'react';
import { ProductSharePanel, useNearestProduct } from '@poltura/theme-sdk/product';

export function Share() {
  const product = useNearestProduct();
  const [open, setOpen] = useState(false);
  if (product === null) return null;
  return (
    <>
      <button type='button' onClick={() => setOpen(true)}>Share</button>
      <ProductSharePanel open={open} onOpenChange={setOpen} title={product.title} url={product.href} />
    </>
  );
}

ProductSpecs

The specification table: a titled section per group with a row of name and value each; nothing without rows.

ProductSpecs(props: ProductSpecsProps): ReactElement | null

Props: ProductSpecsProps

Example

import { ProductSpecs, useNearestProduct } from '@poltura/theme-sdk/product';

export function Specifications() {
  const product = useNearestProduct();
  return product === null ? null : <ProductSpecs groups={product.specs} />;
}

SpecValueLabel

One attribute value as the shopper reads it: its icon or logo beside the text.

SpecValueLabel(props: SpecValueLabelProps): ReactElement

Props: SpecValueLabelProps

Example

import { SpecValueLabel, useProductPage } from '@poltura/theme-sdk/product';

export function FirstPlatform() {
  const [first] = useProductPage().keySpecs;
  const value = first?.items[0];
  return value === undefined ? null : <SpecValueLabel value={value} />;
}

See also: SpecValues

SpecValues

All values of one attribute, each with its icon, side by side and wrapping; nothing for an attribute without values.

SpecValues(props: SpecValuesProps): ReactElement | null

Props: SpecValuesProps

Example

import { SpecValues, useProductPage } from '@poltura/theme-sdk/product';

export function FirstSpec() {
  const [spec] = useProductPage().keySpecs;
  return spec === undefined ? null : <SpecValues spec={spec} />;
}

See also: SpecValueLabel

A link opening a table sheet: at the side, or from the bottom on phones.

ProductTableLink(props: ProductTableLinkProps): ReactElement

A table that selects variants lets the shopper tap a row and pick that option value from the sheet.

Props: ProductTableLinkProps

Example

import { ProductTableLink, useProductTables } from '@poltura/theme-sdk/product';

export function SizeGuide() {
  const [table] = useProductTables('link');
  return table === undefined ? null : <ProductTableLink table={table} />;
}

ProductTableView

One product table in place: its intro, the unit switch, the table and the measuring guide; the chosen variant's row is highlighted.

ProductTableView(props: ProductTableViewProps): ReactElement

Values print in the shopper's language and, when the table has a unit switch, in the unit system of their market until they flip it; the flip is remembered for the visit.

Props: ProductTableViewProps

Example

import { ProductTableView, useProductTables } from '@poltura/theme-sdk/product';

export function SizeChart() {
  const [table] = useProductTables('tab');
  return table === undefined ? null : <ProductTableView table={table} />;
}

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.

ProductTabContent(props: ProductTabContentProps): ReactElement | null

Props: ProductTabContentProps

Example

import { ProductTabContent, useProductTabs } from '@poltura/theme-sdk/product';

export function FirstTab() {
  const [tab] = useProductTabs();
  return tab === undefined ? null : <ProductTabContent tab={tab} />;
}

See also: useProductTabs

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.

ProductTrustBadge(): ReactElement | null

Example

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

export function Badges() {
  return (
    <div className='flex items-center gap-3'>
      <ProductTrustBadge />
    </div>
  );
}

RatingStars

Five stars with as many filled as the rating rounds to.

RatingStars(props: RatingStarsProps): ReactElement

Props: RatingStarsProps

Example

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

export function CardRating({ product }: { product: Product }) {
  return product.rating === null ? null : <RatingStars rating={product.rating.average} />;
}

RatingSummary

The average rating large, with the stars and a bar per star rating showing how many reviews gave it.

RatingSummary(props: RatingSummaryProps): ReactElement

Props: RatingSummaryProps

Example

import { RatingSummary, useReviews } from '@poltura/theme-sdk/product';

export function Score({ productId }: { productId: string }) {
  const { data } = useReviews({ productId });
  return data === undefined || data.stats.count === 0 ? null : (
    <RatingSummary stats={data.stats} policy={data.policy} />
  );
}

ReviewCard

One review: the reviewer's shortened name and initials, the verified badge, the date, the stars, the title and the text.

ReviewCard(props: ReviewCardProps): ReactElement

Props: ReviewCardProps

Example

import { ReviewCard, useReviews } from '@poltura/theme-sdk/product';

export function ReviewList({ productId }: { productId: string }) {
  const { data } = useReviews({ productId });
  return <div>{data?.reviews.map((review) => <ReviewCard key={review.id} review={review} />)}</div>;
}
Last updated