Javascript İle Dinamik Bir Alışveriş Sepeti Uygulaması Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel bir metin editörü (VS Code önerilir) yeterlidir. 2026 standartlarına uygun olarak, herhangi bir kütüphane kullanmadan sadece Vanilla JavaScript (saf JavaScript) ile ilerleyeceğiz. Bu sayede dilin temel mantığını ve tarayıcı API'lerini derinlemesine kavrayacaksınız.

• HTML5: Sayfa yapısını oluşturmak için.
• CSS3: Arayüzü şekillendirmek için.
• JavaScript (ES6+): Mantıksal işlemleri yürütmek için.
• LocalStorage API: Verilerin tarayıcıda kalıcı olmasını sağlamak için.

Adım 1: HTML Yapısının Kurulması

İlk adımda, ürünlerin listeleneceği ve sepetin görüntüleneceği temel HTML yapısını oluşturuyoruz. Sepet verilerini dinamik olarak render edeceğimiz (ekrana yazdıracağımız) alanları belirlemek, DOM manipülasyonu için kritiktir.

  

    
Ürün 1
    Sepete Ekle
  



  

  
Toplam: 0 TL

Burada data-* öznitelikleri (attributes), JavaScript tarafında ürün bilgilerine kolayca erişmemizi sağlar. Bu yöntem, veritabanı sorgusu yapmadan ürün bilgilerini HTML üzerinden okumamıza olanak tanır.

Adım 2: JavaScript ile Sepet Mantığını Oluşturma

Sepet verilerini bir dizi (array) içerisinde tutacağız. Bu dizi, sepete eklenen ürün nesnelerini (objects) barındıracaktır. Verilerin kalıcı olması için her güncellemede bu diziyi localStorage üzerine kaydedeceğiz.

let sepet = JSON.parse(localStorage.getItem('sepet')) || [];

function sepeteEkle(urun) {
  const mevcutUrun = sepet.find(item => item.id === urun.id);
  if (mevcutUrun) {
    mevcutUrun.adet += 1;
  } else {
    sepet.push({ ...urun, adet: 1 });
  }
  localStorage.setItem('sepet', JSON.stringify(sepet));
  sepetiGuncelle();
}

Bu kod bloğunda JSON.parse kullanarak veriyi dizi formatına çeviriyoruz. Eğer localStorage boşsa, boş bir dizi başlatıyoruz. find metodu, ürünün zaten sepette olup olmadığını kontrol ederek adet artırımı veya yeni ürün ekleme mantığını yönetir.

Adım 3: DOM Manipülasyonu ve Sepetin Listelenmesi

Sepet içeriğini kullanıcıya göstermek için sepetiGuncelle fonksiyonunu kullanacağız. Bu fonksiyon, her değişiklikte mevcut HTML listesini temizleyip güncel verileri tekrar yazdırır.

function sepetiGuncelle() {
  const liste = document.getElementById('sepet-listesi');
  const toplamSpan = document.getElementById('toplam-tutar');
  liste.innerHTML = '';
  let toplam = 0;

  sepet.forEach(item => {
    liste.innerHTML += `
${item.isim} - ${item.adet} adet
`;
    toplam += item.fiyat * item.adet;
  });
  toplamSpan.innerText = toplam;
}

Bu yaklaşım, arayüzün her zaman verilerle senkronize kalmasını sağlar. innerHTML kullanımı hızlı sonuç verse de, çok karmaşık yapılarda createElement metodu daha güvenli bir seçenek olabilir.

Adım 4: Veri Güvenliği ve Doğrulama

İstemci tarafında (client-side) yapılan işlemler manipülasyona açıktır. Kullanıcı tarayıcı konsolundan fiyatları değiştirebilir. Bu nedenle, kritik hesaplamaların mutlaka sunucu tarafında (backend) tekrar doğrulanması gerekir.

Uyarı: JavaScript ile yapılan fiyat hesaplamaları sadece kullanıcı deneyimi içindir. Ödeme aşamasında, fiyatları asla tarayıcıdan gelen verilere göre değil, veritabanındaki ürün ID'lerine göre sunucu tarafında hesaplayın. Aksi takdirde XSS veya fiyat manipülasyonu gibi güvenlik açıklarına davetiye çıkarırsınız.

Adım 5: Sepet Verilerini Yönetme Yöntemleri

Aşağıdaki tablo, sepet verilerini saklamak için kullanılan farklı yaklaşımları karşılaştırmaktadır.

Adım 6: Hata Ayıklama ve Optimizasyon

Uygulamanızı geliştirirken tarayıcınızın "Network" ve "Application" sekmelerini aktif kullanın. localStorage içeriğini "Application" sekmesinden izleyerek, verilerin doğru formatta kaydedilip kaydedilmediğini kontrol edebilirsiniz.

// Hata yakalama örneği
try {
  const veri = localStorage.getItem('sepet');
  if (!veri) throw new Error("Sepet verisi bulunamadı");
} catch (e) {
  console.error("Sepet yüklenirken hata oluştu:", e);
}

Hata yakalama blokları (try-catch), beklenmedik veri bozulmalarında uygulamanın çökmesini engeller ve kullanıcıya daha kararlı bir deneyim sunar.

Sıkça Sorulan Sorular

Sepet verilerini sunucuya nasıl gönderirim?

Sepet verilerini fetch API kullanarak bir JSON nesnesi şeklinde POST isteği ile sunucunuza gönderebilir ve orada doğrulama yapabilirsiniz.

LocalStorage'da veri boyutu sınırı var mıdır?

Evet, çoğu tarayıcıda LocalStorage için yaklaşık 5MB'lık bir depolama sınırı bulunmaktadır. Alışveriş sepeti için bu fazlasıyla yeterlidir.

Kullanıcı sayfayı yenilediğinde sepet neden boş görünüyor?

Eğer sepetiGuncelle() fonksiyonunu sayfa yüklendiğinde (DOMContentLoaded olayı ile) çağırmıyorsanız, veriler dizide kalsa bile ekrana yansımaz.

Sepet verilerini nasıl temizleyebilirim?

localStorage.removeItem('sepet') komutu ile veriyi silebilir ve ardından sepet dizisini boşaltarak arayüzü güncelleyebilirsiniz.

Bu yöntem güvenli mi?

İstemci tarafındaki kodlar her zaman manipüle edilebilir. Güvenlik için her zaman sunucu taraflı bir doğrulama mekanizması kurmalısınız.

Sorumluluk Reddi: Bu makalede paylaşılan kodlar eğitim amaçlıdır. Ticari bir projede kullanırken, verilerin güvenliği, XSS koruması ve sunucu taraflı doğrulama gibi profesyonel güvenlik önlemlerini mutlaka uygulayın.

Sepet Performansını Optimize Etmek İçin İleri İpuçları

Sepet uygulamanız büyüdükçe, DOM üzerindeki her değişiklik performansı etkileyebilir. Özellikle yüzlerce ürünün olduğu veya sık güncelleme yapılan senaryolarda, gereksiz yeniden render işlemlerinden kaçınmak kritik öneme sahiptir.

Event Delegation (Olay Yetkilendirme) Kullanımı

Her ürün butonuna tek tek event listener eklemek yerine, sepetin kapsayıcı öğesine tek bir listener ekleyerek performansı artırabilirsiniz. Bu yöntem, dinamik olarak eklenen öğeler için de ekstra işlem yapmanıza gerek bırakmaz.

// Kötü pratik: Her buton için ayrı listener
// İyi pratik: Event Delegation
document.querySelector('.sepet-container').addEventListener('click', function(e) {
    if (e.target && e.target.classList.contains('sil-butonu')) {
        const productId = e.target.getAttribute('data-id');
        sepettenSil(productId);
    }
});

State Yönetimi ve Render Optimizasyonu

Sepet verisi her değiştiğinde tüm DOM ağacını yeniden oluşturmak yerine, sadece değişen kısmı güncelleyen bir "diffing" mantığı kurmalısınız. Basit projelerde innerHTML kullanmak kolay olsa da, karmaşık yapılarda DocumentFragment kullanarak DOM güncellemelerini tek seferde gerçekleştirmek tarayıcı yükünü azaltır.

function sepetiGuncelle(sepet) {
    const fragment = document.createDocumentFragment();
    sepet.forEach(item => {
        const li = document.createElement('li');
        li.textContent = `${item.ad} - ${item.fiyat} TL`;
        fragment.appendChild(li);
    });
    const liste = document.getElementById('sepet-listesi');
    liste.innerHTML = ''; // Önce temizle
    liste.appendChild(fragment); // Tek seferde ekle
}

Sepet Uygulamasını Test Etme ve Deployment Süreci

Uygulamanızın üretim ortamına (production) çıkmadan önce uçtan uca test edilmesi gerekir. Özellikle sepete ekleme, adet artırma ve sepeti boşaltma gibi kritik kullanıcı akışlarını otomatize etmek, hataları erkenden yakalamanızı sağlar.

Birim Testleri ve Kullanıcı Senaryoları

Sepet mantığınızı test etmek için Jest gibi bir kütüphane kullanabilirsiniz. Mantıksal işlemlerin (toplam tutar hesaplama, vergi ekleme) arayüzden bağımsız olarak doğru çalıştığından emin olun.

Pro İpucu: Sepet verilerini localStorage üzerinde tutarken, verinin bozulma (corruption) ihtimaline karşı her zaman try-catch blokları kullanın.

Deployment aşamasında ise, sepet verilerinin tarayıcılar arası (Cross-Browser) uyumluluğunu kontrol etmeyi unutmayın. Safari ve Chrome'un localStorage kısıtlamaları bazen farklılık gösterebilir. Uygulamanızı yayına alırken mutlaka HTTPS protokolünü zorunlu tutarak verilerin güvenli bir şekilde taşınmasını sağlayın.

Sonuç

JavaScript ile dinamik bir alışveriş sepeti oluşturmak, web geliştirme temellerini pekiştirmek için mükemmel bir projedir. Bu rehberde, verilerin tarayıcıda nasıl saklanacağını, DOM ile nasıl etkileşime girileceğini ve temel sepet mantığının nasıl kurulacağını öğrendiniz. Bir sonraki adım olarak, bu projeyi bir backend servisi ile entegre ederek verileri veritabanında tutmayı ve ödeme sistemleri (Stripe, Iyzico vb.) ile bağlamayı deneyebilirsiniz.