---
title: Varyantlar
description: Müşterinin ürün varyantlarını seçmesini sağlayan Variants 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>

Bu alt component'te müşterilerin varyant seçmesini sağlıyoruz. **Color** ve **Size** olmak üzere iki varyant tipine sahip bir ürün şöyle görünür:

![İki varyant tipine sahip ürün detay sayfası](https://builders.ikas.com/media/ikas-dev/example-theme-product-detail-2-variants-4dcc48f89cba4939831b0fa38bd6468d.png)

Ekran görüntüsünde görüldüğü gibi renk için bir renk seçici, beden varyant tipi için ise bir açılır menü kullanıyoruz. Her varyant tipini render etmek için ürünün **displayedVariantTypes** field'ını kullanıyoruz. Bu field, varyant tiplerini satıcının yönetim panelinde belirlediği düzene göre filtreler ve sıralar. **displayedVariantTypes**, ekran görüntüsündeki **Color** ve **Size** bölümlerine karşılık gelir.

```tsx title="src/components/product-detail/detail/variants/index.tsx"
export const Variants = observer(({ product }: ProductDetailProps) => {
  return (
    <S.VariantsWrapper>
      {product.displayedVariantTypes.map((dVT) => (
        <VariantType key={dVT.variantType.id} product={product} dVT={dVT} />
      ))}
    </S.VariantsWrapper>
  );
});
```

<Callout type="warn" title="displayedVariantTypes kullanın">
Ne yaptığınızdan kesinlikle emin değilseniz varyant tiplerini elle render etmek için ürünün `variantTypes` field'ını kullanmayın. Bunun yerine `displayedVariantTypes` field'ını kullanın.
</Callout>

Önce varyant tipinin **name** değerini, ardından altına tüm varyant değerlerini render ediyoruz.

```tsx title="src/components/product-detail/detail/variants/index.tsx"
const VariantType = observer(({ dVT, product }: VariantTypeProps) => {
  return (
    <S.VariantType>
      <S.VariantTypeName>{dVT.variantType.name}</S.VariantTypeName>
      <VariantValues dVT={dVT} product={product} />
    </S.VariantType>
  );
});
```

```tsx title="src/components/product-detail/detail/variants/index.tsx"
const VariantValues = observer(({ dVT, product }: VariantValueType) => {
  const onVariantValueChange = (dVV: IkasDisplayedVariantValue) => {
    product.selectVariantValue(dVV.variantValue);
  };

  if (dVT.variantType.isColorSelection) {
    return <SwatchVariantValue dVT={dVT} onVariantValueChange={onVariantValueChange} />;
  }
  return <SelectVariantValue product={product} dVT={dVT} onVariantValueChange={onVariantValueChange} />;
});
```

Farklı gösterim tipleri arasında **isColorSelection** field'ını kontrol ederek geçiş yaptığımıza dikkat edin. **Selection Style** mantığı [Varyant Tipi](https://builders.ikas.com/docs/app-development/dashboard/variant-type) sayfasında anlatılıyor.

Müşteri yeni bir değer seçtiğinde ürünün **selectVariantValue** fonksiyonunu çağırıyor ve tıklanan **variantValue** nesnesini bu fonksiyona geçiyoruz. Bu fonksiyon çağrıldığında **selectedVariant** field'ı sizin için güncellenir. [Component dosyalarını oluşturma](https://builders.ikas.com/docs/headless-theme/getting-started/creating-your-first-component#creating-component-files) bölümünde anlatıldığı gibi component'lerinizi `observer` ile sarmaladıysanız component'iniz yeni varyant için otomatik olarak yeniden render edilir.

Select ve swatch varyant değerleri şöyle render ediliyor:

```tsx title="src/components/product-detail/detail/variants/index.tsx"
const SelectVariantValue = observer(({ dVT, product, onVariantValueChange }: SelectVariantValueProps) => {
  const { t } = useTranslation();

  const selectOptions = dVT.displayedVariantValues.map((dVV) => ({
    value: dVV.variantValue.id,
    label: dVV.variantValue.name,
  }));

  const selectValue = product.selectedVariantValues.find((sVV) => sVV.variantTypeId === dVT.variantType.id)?.id;

  const onChange = (value: SelectOnChangeParamType) => {
    const dVV = dVT.displayedVariantValues.find((dVV) => dVV.variantValue.id === value);
    dVV && onVariantValueChange(dVV);
  };

  return (
    <Select
      placeholder={t(`${NS}:detail.variantType.selectPlaceholder`)}
      options={selectOptions}
      value={selectValue}
      onChange={onChange}
    />
  );
});
```

```tsx title="src/components/product-detail/detail/variants/index.tsx"
const SwatchVariantValue = observer(({ dVT, onVariantValueChange }: SwatchVariantValueProps) => {
  return (
    <>
      {dVT.displayedVariantValues.map((dVV) => (
        <Swatch
          key={dVV.variantValue.id}
          title={dVV.variantValue.name}
          selected={dVV.isSelected}
          image={dVV.variantValue.thumbnailImage}
          colorCode={dVV.variantValue.colorCode}
          onClick={() => onVariantValueChange(dVV)}
        />
      ))}
    </>
  );
});
```

Burada dikkat edilmesi gereken asıl nokta, her varyant değerini render etmek için **displayedVariantValues** field'ını kullanmamızdır. Bu field, ekran görüntüsündeki her renge ya da açılır menüdeki her öğeye karşılık gelir. Yukarıda belirttiğimiz gibi bir öğeye tıklandığında dizideki tıklanan **variantValue (dVV)** öğesini fonksiyona geçmemiz yeterlidir.

<Callout type="info" title="Renk ve görsel desteği">
**Swatch** component'i ya bir renk ya da bir görsel render eder. Satıcılar renk varyant tipleri için ya renk seçebilir ya da varyantın rengini veya malzemesini gösteren bir `thumbnailImage` yükleyebilir. Örnekteki swatch component'inde olduğu gibi sizin component'leriniz de her iki durumu karşılamalıdır.
</Callout>