---
title: Sepet
description: Sepet bilgilerini IkasCartStore ile gösteren Cart component'ini inceleyin.
---

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

Her temanın sepet bilgilerini gösterebilmesi gerekir. ikas temalarında özel bir **Sepet sayfası (/cart)** bulunur ve biz de bu sayfada kullanılmak üzere bir [Cart component'i](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/cart) oluşturduk.

Component'in görünümü şöyle:

![Örnek temadaki sepet sayfası](https://builders.ikas.com/media/ikas-dev/example-theme-cart-4afb5a0b9e902fc1cc59fe85e7064fbf.png)

Bu component'i render etmek için [IkasCartStore](https://builders.ikas.com/docs/headless-theme/api/stores#ikas-cart-store) kullanıyoruz. **useStore** hook'u size [IkasBaseStore](https://builders.ikas.com/docs/headless-theme/api/stores#ikas-base-store) erişimi verir; biz de base store içindeki **cartStore**'u kullanıyoruz. Cart store'un **cart** field'ı ([IkasCart](https://builders.ikas.com/docs/headless-theme/api/cart-and-orders#ikas-cart)) sepetin kendisini içerir.

```tsx title="src/components/cart/index.tsx"
const Items = observer(() => {
  const store = useStore();
  return (
    <S.Items>
      {store.cartStore.cart?.items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </S.Items>
  );
});
```

Bu component'i render etmek için gereken her şey **cartStore.cart** field'ında bulunur: formatlanmış fiyatlar, ürün adetleri, ürün seçeneği değerleri ve daha fazlası. Müşterilerin kupon kodu ekleyebilmesi için cart store'un **saveCouponCode** ve **removeCouponCode** fonksiyonlarını, müşterileri ödeme adımına yönlendirmek için ise **cartStore.checkoutUrl** değerini kullanabilirsiniz.

Tüm bu field'ların pratikte nasıl kullanıldığını görmek için temamızdaki [Cart component'inin](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/cart) koduna göz atın.