---
title: Giriş
description: Ürün detaylarını gösteren ve ürünü sepete ekleyen Product Detail component'inin genel yapısı.
---

<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>

Ürün detaylarını göstermek ve ürünleri sepete eklemek için her temanın bir **Product Detail** component'ine sahip olması gerekir.

Kaynak kodun tamamı [burada](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-detail). Ürün detay sayfasının son hali şöyle görünecek:

![Örnek temadaki ürün detay sayfası](https://builders.ikas.com/media/ikas-dev/example-theme-product-detail-a991c84b94866cba3836e505fd6d08f5.png)

Product detail component'inde anlatılacak çok şey olduğu için onu hem kodda hem de dokümantasyonda birkaç parçaya ayırdık.

## Prop'lar [#props]

Ekran görüntüsündeki sonuca ulaşmak için satıcıdan bir [Product prop'u](https://builders.ikas.com/docs/headless-theme/prop-types/product) istememiz gerekiyor.

Oluşturulan type şöyle görünür:

```tsx title="src/components/__generated__/types.ts"
export type ProductDetailProps = {
  product: IkasProduct;
};
```

En üst seviyedeki product detail component'i ise şöyle. Component, **Slider** ve **Detail** olmak üzere iki ana component'e ayrılır.

```tsx title="src/components/product-detail/index.tsx"
function ProductDetail(props: ProductDetailProps) {
  return (
    <S.ProductDetail>
      <Container>
        <S.InnerContainer>
          <Slider {...props} />
          <Detail {...props} />
        </S.InnerContainer>
      </Container>
    </S.ProductDetail>
  );
}
```

[Slider](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-detail/slider/index.tsx), ekran görüntüsünün sol tarafında gördüğünüz görselleri render eder. Bunu temelde product nesnesindeki **selectedVariant.images** değerini kullanarak yapar.

**Detail** component'i ise ürünle ilgili diğer her şeyi render eder. Render metodu şöyle:

```tsx title="src/components/product-detail/detail/index.tsx"
function Detail(props: ProductDetailProps) {
  return (
    <S.Wrapper>
      <Title {...props} />
      <FavoriteButton {...props} />
      <Price {...props} />
      <Variants {...props} />
      <ProductOptions {...props} />
      <AddToCart {...props} />
      <Description {...props} />
      <SocialShare {...props} />
    </S.Wrapper>
  );
}
```

Gördüğünüz gibi bu component de farklı parçalara ayrılıyor; yine de render metodu, sayfada neyin gösterildiğine dair temel bir fikir veriyor. Sonraki bölümlerde bu alt component'lerin her birini ayrıntılı olarak inceleyeceğiz.