---
title: Varyant değiştirme fonksiyonu ekleme
description: Varyant seçici bileşenine varyant değiştirme fonksiyonu ekleme.
---

<Video src="/media/ikas-studio/basic-examples/product-detail/variant-picker/adding-variant-change-function.mp4" autoPlay muted loop controls />

## Aksiyon ekleme

İlk element'i seçin ve sağ kısımdaki **Aksiyonlar** sekmesi altından **Aksiyon Ekle**'ye basın. Açılan modalda olay adına `selectVariantValue` yazın ve olay tipini `onclick` olarak belirleyip **Kaydet**'e basın.

## Aksiyonu Blueprint modunda yapılandırma

Oluşan aksiyonun üzerine tıklayarak Blueprint moduna geçiş yapın. Açılan ekranda boş bir alana sağ tıklayarak `product` araması yapın ve ekleyin.

Eklenen `product` node'unun çıkış noktasından yeni bir node çıkararak `selectVariantValue` fonksiyonunu seçin.

Ardından boş bir alana tekrar sağ tıklayarak `displayedVariantValuesListItem` araması yapın ve ekleyin. Bu node'un çıkış noktasından yeni bir node çıkararak `variantValue` değerini seçin. Oluşan `variantValue` node'unu `selectVariantValue` node'undaki `variantValue` giriş alanına bağlayın.

Son olarak `selectVariantValue` node'u içerisindeki **disableRoute** seçeneğini işaretleyin.

<Callout type="info" title="disableRoute">
disableRoute seçeneğini işaretlediğinizde, varyant değiştirildiğinde sayfa yönlendirmesi yapılmaz; yalnızca URL'de parametre olarak güncelleme gerçekleşir. Bu sayede ürün detay bileşeni sayfa yenilenmeden seçilen varyanta göre dinamik olarak güncellenir.
</Callout>

**Start** node'unun çıkışını `selectVariantValue` node'unun girişine bağlayın. İşlemi tamamladıktan sonra tasarım moduna geri dönebilirsiniz.

## Önizleme

Sol üst kısımdan **İçerik** moduna geçiş yaparak varyant değiştirme işlemini deneyebilirsiniz.