---
title: Fiyat
description: Ürünün fiyat bilgisini selectedVariant üzerinden gösteren Price alt component'i.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

`Price` alt component'i ürünün fiyat bilgisini gösterir.

```tsx title="src/components/product-detail/detail/price/index.tsx"
export const Price = observer((props: ProductDetailProps) => {
  const { price } = props.product.selectedVariant;
  return (
    <S.PriceWrapper>
      {price.hasDiscount && <S.SellPrice>{price.formattedSellPrice}</S.SellPrice>}
      <S.Price>{price.formattedFinalPrice}</S.Price>
    </S.PriceWrapper>
  );
});
```

Fiyat bilgisi, [IkasProductVariant](https://builders.ikas.com/docs/headless-theme/api/products#ikas-product-variant) class'ının bir instance'ı olan **selectedVariant** field'ında bulunur. **selectedVariant**'ın **price** field'ı tüm fiyat verilerini sağlar.

Önce **hasDiscount** field'ını kontrol ederek indirim öncesindeki fiyatı (**formattedSellPrice**) gösteriyoruz. Ardından tüm indirimler uygulandıktan sonraki fiyatı göstermek için **formattedFinalPrice** değerini kullanıyoruz.

<Callout type="warn" title="Fiyatları kendiniz formatlamayın">
Fiyat verisinde **sellPrice** veya **finalPrice** gibi sayısal versiyonlar da bulunur. Fiyatı göstermek için ise **formatted** versiyonları kullanıyoruz. Bu fiyatların formatlama kuralları **ikas satıcısı tarafından** yönetim panelinden belirlenir. Fiyat bilgisi göstermeniz gereken her durumda **formatted** versiyonları kullanın ve fiyatları kendiniz formatlamayın; aksi halde satıcının panelde belirlediği para birimi formatlama tercihleri yok sayılır. Bir fiyatı satıcının tercihlerine göre formatlamak isterseniz **@ikas/storefront** paketinden export edilen **formatCurrency** fonksiyonunu da kullanabilirsiniz.
</Callout>