---
title: Favori Butonu
description: Ürünü favori listesine ekleyip çıkaran FavoriteButton 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>

Müşteriler ürünleri favori listelerine ekleyebilir. Bu alt component, bir ürünü favori listesine eklemek için gereken tüm mantığı içerir.

```tsx title="src/components/product-detail/detail/favorite-button/index.tsx"
export const FavoriteButton = observer(({ product }: ProductDetailProps) => {
  const { t } = useTranslation();
  const { isProductFavorite, showLoginModal, pending, toggleFavorite } = useFavorite({
    productId: product.id,
  });

  const tooltipText = isProductFavorite
    ? t(`${NS}:detail.favorite.tooltipText.remove`)
    : t(`${NS}:detail.favorite.tooltipText.add`);

  return (
    <>
      <S.FavoriteButton disabled={pending} onClick={toggleFavorite}>
        <Tooltip noCursor text={tooltipText} placement="left">
          {pending && <Loading />}
          {!pending && <FavoriteSVG fill={isProductFavorite} />}
        </Tooltip>
      </S.FavoriteButton>
    </>
  );
});
```

Favori mantığını kendi fonksiyonuna ayırmak için [useFavorite](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/product-detail/detail/favorite-button/useFavorite.tsx) adında özel bir hook oluşturduk. Bu hook'ta [Customer Store](https://builders.ikas.com/docs/headless-theme/api/stores#ikas-customer-store) içindeki şu fonksiyonları kullanıyoruz:

- **isProductFavorite**: Ürünün zaten favori listesinde olup olmadığını kontrol eder.
- **addProductToFavorites**: Ürünü favori listesine ekler.
- **removeProductFromFavorites**: Ürünü favori listesinden çıkarır.

Bir ürünü favorilere eklemek, müşterinin giriş yapmış olmasını gerektirir. Bu nedenle customer store üzerinden giriş yapmış bir **customer** olup olmadığını da kontrol ediyor, giriş yapılmamışsa müşterinin hızlıca giriş yapabilmesi için bir giriş modal'ı gösteriyoruz.