---
title: Siparişler
description: Müşterinin geçmiş siparişlerini listeleyen component.
---

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

Siparişler component'i, müşterinin önceki siparişlerini listeler.

Kaynak kodun tamamına [buradan](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/account/orders) ulaşabilirsiniz. Siparişler component'imiz şu şekilde görünüyor:

![Örnek temadaki sipariş listesi sayfası](https://builders.ikas.com/media/ikas-dev/example-theme-order-list-3a60cc475d8a9caff04528c6b351549f.png)

Component'in mantığı [useOrders](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/account/orders/useOrders.tsx) custom hook'unda yer alır. Müşterinin siparişleri `store.customerStore.getOrders()` fonksiyonuyla listelenir.

Listedeki her siparişi render etmek için bir [Order](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/account/orders/order/index.tsx) alt component'i oluşturduk.

```tsx
{
  !isPending && !!orders.length && (
    <S.Orders>
      {orders.map((order) => (
        <Order key={order.id} order={order} />
      ))}
    </S.Orders>
  );
}
```