Developers
Start building
Themes/Theme SDK/Modules/product/Parts: ReviewForm to ReviewsHeader

Parts: ReviewForm to ReviewsHeader

The parts of @poltura/theme-sdk/product, ReviewForm to ReviewsHeader.

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

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.

ReviewForm(props: ReviewFormProps): ReactElement

Props: ReviewFormProps

Example

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

export function Write({ product, close }: { product: Product; close: () => void }) {
  return <ReviewForm target={{ product: { id: product.id, handle: product.handle } }} onClose={close} />;
}

See also: useSubmitReview

ReviewSkeleton

Three placeholder cards shaped like ReviewCard, for the time the reviews load.

ReviewSkeleton(props: ReviewSkeletonProps): ReactElement

Props: ReviewSkeletonProps

Example

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

export function Loading({ productId }: { productId: string }) {
  const { status } = useReviews({ productId });
  return status === 'pending' ? <ReviewSkeleton /> : null;
}

ReviewsEmpty

The message for a product without reviews, with a button that asks for the first one.

ReviewsEmpty(props: ReviewsEmptyProps): ReactElement

Props: ReviewsEmptyProps

Example

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

export function NoReviews({ open }: { open: () => void }) {
  return <ReviewsEmpty onWrite={open} />;
}

ReviewsFooter

The load-more button under a review list, or the count of reviews seen once there are no more.

ReviewsFooter(props: ReviewsFooterProps): ReactElement

Props: ReviewsFooterProps

Example

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

export function More({ shown, more }: { shown: number; more: () => void }) {
  return <ReviewsFooter loaded={shown} hasMore loadingMore={false} onLoadMore={more} />;
}

ReviewsHeader

The reviews heading with the review count and a write-a-review button.

ReviewsHeader(props: ReviewsHeaderProps): ReactElement

Props: ReviewsHeaderProps

Example

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

export function Header({ total, open }: { total: number; open: () => void }) {
  return <ReviewsHeader total={total} onWrite={open} />;
}
Last updated