---
title: Sepete ekle butonu ekleme
description: Satın alma butonları bileşenine sepete ekle butonu ekleme.
---

<Video src="/media/ikas-studio/basic-examples/product-detail/buy-buttons/adding-add-to-cart-button.mp4" autoPlay muted loop controls />

## Buton ekleme

Tasarım moduna geçiş yapın ve satın alma butonları bileşenine çift tıklayarak detayına girin. **Elementler** kısmından bir **Buton** element'i ekleyin. Ardından aşağıdaki stil özelliklerini güncelleyin:

- `justify-content`
- `width`
- `padding`
- `border`
- `cursor`

## İçerik ve yazı stili

Buton içindeki yazı element'ini seçerek **İçerik** alanına `Sepete ekle` yazın. Ardından `font-size` stilini güncelleyin.

## Aksiyon ekleme

Buton element'ini tekrar seçin ve sağ kısımdaki **Aksiyonlar** sekmesinden **Aksiyon Ekle**'ye basın. Açılan modalda olay adına `addToCart` 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. Boş bir alana sağ tıklayarak `product` araması yapın ve ekleyin.

Eklenen `product` node'unun çıkış noktasından yeni bir node çıkararak `getSelectedVariant` fonksiyonunu seçin. Ardından bu fonksiyonun çıkış noktasından yeni bir node çıkararak `addVariantToCart` fonksiyonunu seçin.

Boş bir alana tekrar sağ tıklayarak yeni bir `product` node'u ekleyin ve bu node'u `addVariantToCart` node'undaki `product` giriş alanına bağlayın.

Boş bir alana tekrar sağ tıklayarak global `quantity` değişkenini ekleyin ve bu node'u `addVariantToCart` node'undaki `quantity` giriş alanına bağlayın.

Son olarak **Start** node'unun çıkışından başlayarak tüm node'ları sırasıyla birbirine bağlayın. İşlemi tamamladıktan sonra tasarım moduna geri dönebilirsiniz.