---
title: Ürün Seçenekleri
description: Müşterilerin satın aldıkları ürünü özelleştirmesini sağlayan ProductOptions 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ün seçenekleri, ikas satıcılarının müşterilerine satın aldıkları ürünü özelleştirme imkanı sunduğu yapıdır. Daha fazla bilgi için [Ürün Seçenek Seti](https://builders.ikas.com/docs/app-development/dashboard/product-option) sayfasına göz atın.

![Örnek temadaki tüm ürün seçeneği tipleri](https://builders.ikas.com/media/ikas-dev/example-theme-product-options-9bd00ee0208517e28165ae1e5f45ef00.png)

Yukarıdaki ekran görüntüsü olası tüm seçenek tiplerini gösterir. En üst seviyedeki **ProductOptions** component'i şöyle:

```tsx title="src/components/product-detail/detail/product-options/index.tsx"
export const ProductOptions = observer((props: ProductDetailProps) => {
  if (!props.product.productOptionSet) return null;
  const showOptionError = ProductOptionsStore.getInstance().showOptionError;

  return (
    <div aria-label="product-options">
      {props.product.productOptionSet.displayedOptions.map((option, index) => (
        <ProductOption
          key={index + option.id}
          depth={0}
          option={option}
          product={props.product}
          showOptionError={showOptionError}
        />
      ))}
    </div>
  );
});
```

Farklı seçenek tiplerini render etmek için aralarında geçiş yaptığımız bir **ProductOption** component'i oluşturduk. Seçenekleri render etmek için **product.productOptionSet.displayedOptions** field'ını kullandığımıza dikkat edin. Bu field, seçeneklerin filtrelenmesini ve sıralanmasını sizin yerinize yapar.

```tsx title="src/components/product-detail/detail/product-options/index.tsx"
const ProductOption: React.FC<Props> = observer(({ showOptionError, option, product, depth, ...props }) => {
  const subNS = `${NS}:detail.productOptions`;
  const [Option, setOption] = React.useState<React.FC<{
    namespace: string;
    option: IkasProductOption;
    product: IkasProduct;
    showOptionError: boolean;
  }> | null>(null);

  useEffect(() => {
    switch (option.type) {
      case IkasProductOptionType.TEXT:
        setOption(ProductOptionText);
        break;
      case IkasProductOptionType.TEXT_AREA:
        setOption(ProductOptionTextarea);
        break;
      case IkasProductOptionType.CHECKBOX:
        setOption(ProductOptionCheckbox);
        break;
      case IkasProductOptionType.CHOICE:
        setOption(ProductOptionChoice);
        break;
      case IkasProductOptionType.COLOR_PICKER:
        setOption(ProductOptionColorPicker);
        break;
      case IkasProductOptionType.DATE_PICKER:
        setOption(ProductOptionDatePicker);
        break;
      case IkasProductOptionType.FILE:
        setOption(ProductOptionFile);
        break;
    }
  }, [option, product, showOptionError]);

  return (
    <>
      {!!Option && <Option namespace={subNS} option={option} product={product} showOptionError={showOptionError} />}
      {option.displayedChildOptions.length > 0 &&
        option.displayedChildOptions.map((childOption) => (
          <ProductOption
            key={`${depth}-${childOption.id}`}
            depth={depth + 1}
            option={childOption}
            product={product}
            showOptionError={showOptionError}
          />
        ))}
    </>
  );
});
```

Üst seçeneği render ettikten sonra alt seçenekleri render etmek için **option.displayedChildOptions** field'ını kullanıyoruz. Üst-alt ilişkisi, satıcı [ürün seçeneklerini oluştururken](https://builders.ikas.com/docs/app-development/dashboard/product-option) **Show this option if another option is selected** kutucuğunu işaretlediğinde kurulur.

Tüm tiplerin kodunu burada göstermek dokümantasyonu çok uzun ve okunması zor hale getirirdi. Bunun yerine [ürün seçeneklerinin kaynak kodunu](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-detail/detail/product-options) incelerken dikkat etmeniz gereken önemli noktaları listeliyoruz:

- **option.values**, müşteri bir değer seçtiğinde set edilmesi gereken field'dır. Her tipin kendine özgü bir değer formatı vardır; bu field'ın nasıl set edildiğini görmek için ilgili alt component'lere göz atın.
- Seçeneklerin doğrulama kuralları olabilir; seçenekler zorunlu ya da isteğe bağlı olabilir. Satıcı ürün seçeneklerini oluştururken bir doğrulama kuralı eklediyse temanın da bu kuralları kontrol etmesi gerekir. **option.hasValidValues** field'ı, **option.values** içindeki değerlerin geçerli olup olmadığını kontrol eder. Kurallar, seçenek nesnesindeki **textSettings**, **selectSettings**, **fileSettings** ve **dateSettings** field'larında bulunur.
- Seçeneklerin fiyatı olabilir. **option.price** mevcutsa, **selectedVariant.price** içindeki para birimi bilgisini kullanarak **@ikas/storefront** paketindeki **formatCurrency** fonksiyonuyla formatlanmış fiyatı gösterin.