---
title: Sepete Ekle
description: Ürünleri sepete ekleme ve stok kontrolü mantığını içeren AddToCart 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>

Ürünleri sepete ekleme mantığı bu component'te yer alır. Kaynak kodun tamamı [burada](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-detail/detail/add-to-cart).

![Adet seçici ve sepete ekle butonu](https://builders.ikas.com/media/ikas-dev/example-theme-add-to-cart.png)

```tsx title="src/components/product-detail/detail/add-to-cart/index.tsx"
export const AddToCart = observer((props: ProductDetailProps) => {
  const [quantity, setQuantity] = useState(1);

  return (
    <S.Wrapper>
      <QuantityButton quantity={quantity} setQuantity={setQuantity} />
      <AddToCartButton product={props.product} quantity={quantity} />
      <BackInStock product={props.product} />
    </S.Wrapper>
  );
});
```

## Ürün ekleme [#adding-items]

Ürünleri sepete eklemek için [Cart Store](https://builders.ikas.com/docs/headless-theme/api/stores#ikas-cart-store) kullanıyoruz. Önce **findExistingItem** fonksiyonuyla ürünün sepette zaten olup olmadığını kontrol ediyoruz. **addItem** fonksiyonu sepete yeni bir ürün eklerken **changeItemQuantity** fonksiyonu sepette var olan bir ürünün adedini değiştirir.

```tsx title="src/utils/hooks/useAddToCart.tsx"
export function useAddToCart() {
  const [loading, setLoading] = useState(false);

  const addToCart = async (product: IkasProduct, quantity: number) => {
    const store = useStore();

    const item = store.cartStore.findExistingItem(product.selectedVariant, product);
    setLoading(true);
    if (item) {
      await store.cartStore.changeItemQuantity(item, item.quantity + quantity);
    } else {
      await store.cartStore.addItem(product.selectedVariant, product, quantity);
    }
    setLoading(false);
  };

  return {
    loading,
    addToCart,
  };
}
```

<Callout type="warn" title="Her zaman findExistingItem kullanın">
Bir ürünün sepette olup olmadığını kontrol etmek için her zaman **findExistingItem** fonksiyonunu kullanın. Bu fonksiyon ürün seçeneği değerlerini de kontrol eder. Ürünü ürün seçeneği değerlerini hesaba katmadan **cart.items** dizisinde elle ararsanız yanlış ürüne ulaşabilirsiniz.
</Callout>

<Callout type="info" title="Hata bildirimi">
Müşterileri olası hatalar hakkında bilgilendirmek için **addItem** ve **changeItemQuantity** fonksiyonlarının dönüş değerlerini de kontrol edebilirsiniz.
</Callout>

## Stok kontrolü [#stock-check]

Ürünleri sepete eklemeden önce ürünün yeterli stoğu olduğundan emin olmamız gerekir. Bunu kontrol etmek için **selectedVariant.hasStock** field'ını kullanıyoruz. Stok durumuna göre butonun metnini de değiştiriyoruz.

Müşteriler, bir ürün yeniden stoğa girdiğinde bildirim almak için kayıt da olabilir. Bu özelliği sağlamak için **selectedVariant** üzerindeki şu field ve fonksiyonları kullanıyoruz:

- **isBackInStockEnabled**: Bu özelliğin etkin olup olmadığını kontrol eder.
- **isBackInStockReminderSaved**: Müşterinin bildirimlere zaten kayıt olup olmadığını kontrol eder.
- **isBackInStockCustomerLoginRequired**: Özelliğin yalnızca giriş yapmış müşteriler için mi, yoksa misafirler için de mi etkin olacağını kontrol eder. Değer **true** ise önce müşterinin giriş yapmasını sağlıyoruz. Değer **false** ise müşterinin e-posta adresini bir modal'da istiyoruz.
- **saveBackInStockReminder**: Hatırlatıcıyı kaydeder.

Tüm mantığı görmek için [useBackInStock](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-detail/detail/add-to-cart/hooks/useBackInStock.tsx) kaynak koduna göz atın.