---
title: Hemen satın al butonu ekleme
description: Satın alma butonları bileşenine hemen satın al butonu ekleme.
---

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

## Buton ekleme

**Elementler** kısmından bir **Buton** element'i ekleyin. Ardından aşağıdaki stil özelliklerini güncelleyin:

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

## İçerik ve yazı stili

Buton içindeki yazı element'ini seçerek **İçerik** alanına `Hemen satın al` yazın. Ardından `font-size` ve `color` stillerini 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 `buyItNow` 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 `cartStore` node'unu ekleyin. Ardından bu node'un çıkış noktasından yeni bir node çıkararak `removeCart` fonksiyonunu seçin.

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.

Boş bir alana sağ tıklayarak `cartStore` node'u ekleyin ve bu node'un çıkış noktasından yeni bir node çıkararak `getCheckoutUrl` fonksiyonunu seçin.

Boş bir alana sağ tıklayarak `router` node'unu ekleyin ve bu node'un çıkış noktasından yeni bir node çıkararak `navigate` fonksiyonunu seçin. `getCheckoutUrl` node'unun çıkışını `navigate` node'undaki `path` 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 **Geri** diyerek tasarım moduna dönebilirsiniz.