Fejlesztőknek
Kezdj bele
Témák/Theme SDK/Modules/price/Parts

Parts

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

The parts of @poltura/theme-sdk/price.

Ezen az oldalon
import { … } from '@poltura/theme-sdk/price';

Price

The price a shopper pays, on the visitor's tax basis, filled in per visitor on pages with live prices.

Price(props: PriceProps): ReactElement | null

Props: PriceProps

Example

import { Price } from '@poltura/theme-sdk/price';
import type { Variant } from '@poltura/theme-sdk/product';

export function VariantPrice({ variant }: { variant: Variant }) {
  return <Price price={variant.price} className='text-xl font-semibold' />;
}

PriceRange

The lowest to highest price across a product's variants, or its single price when they agree.

PriceRange(props: PriceRangeProps): ReactElement | null

Props: PriceRangeProps

Example

import { PriceRange } from '@poltura/theme-sdk/price';
import type { Product } from '@poltura/theme-sdk/product';

export function FromPrice({ product }: { product: Product }) {
  return <PriceRange price={product.price} range={product.priceRange} />;
}

CompareAtPrice

The struck-through price before the markdown; nothing at full price.

CompareAtPrice(props: PriceProps): ReactElement | null

Props: PriceProps

Example

import { CompareAtPrice, Price } from '@poltura/theme-sdk/price';
import type { PriceView } from '@poltura/theme-sdk/price';

export function SalePrice({ price }: { price: PriceView }) {
  return (
    <p>
      <Price price={price} /> <CompareAtPrice price={price} className='line-through' />
    </p>
  );
}

DiscountBadge

The markdown as a percentage label such as -20%; nothing at full price.

DiscountBadge(props: PriceProps): ReactElement | null

Props: PriceProps

Example

import { DiscountBadge } from '@poltura/theme-sdk/price';
import type { PriceView } from '@poltura/theme-sdk/price';

export function SaleTag({ price }: { price: PriceView }) {
  return <DiscountBadge price={price} className='rounded bg-red-600 px-1 text-white' />;
}

UnitPrice

The price per base measure, such as "12 900 Ft / kg", the EU unit price rule asks for.

UnitPrice(props: PriceProps): ReactElement | null

Props: PriceProps

Example

import { UnitPrice } from '@poltura/theme-sdk/price';
import type { Variant } from '@poltura/theme-sdk/product';

export function PerKilo({ variant }: { variant: Variant }) {
  return <UnitPrice price={variant.price} className='text-xs text-muted-foreground' />;
}

TaxNote

"+ VAT" or "net" beside prices for a visitor who sees net prices; nothing on gross.

TaxNote(props: PriceNoteProps): ReactElement | null

Props: PriceNoteProps

Example

import { Price, TaxNote } from '@poltura/theme-sdk/price';
import type { PriceView } from '@poltura/theme-sdk/price';

export function NetPrice({ price }: { price: PriceView }) {
  return (
    <p>
      <Price price={price} /> <TaxNote className='text-xs' />
    </p>
  );
}

PriceGate

The sign-in or apply link shown instead of prices to visitors the store hides them from.

PriceGate(props: PriceNoteProps): ReactElement | null

Props: PriceNoteProps

Example

import { PriceGate } from '@poltura/theme-sdk/price';

export function HiddenPrice() {
  return <PriceGate className='underline' />;
}
Utoljára frissítve