Yapay Zeka Ajanları
Tüm site türleri
🛒
Claude Code Rehberi

E-Ticaret

Ürün katalog + sepet + ödeme (Stripe/Iyzico).

İleri 1-2 haftaÖrnek: Butik, dijital ürün, kurs

E-ticaret = ürün satışı için kompleks ama Claude Code ile yapılabilir. Modern e-ticaret = ürün katalog + sepet + checkout + ödeme + sipariş yönetimi + e-posta bildirimleri. Türkiye için Iyzico, uluslararası için Stripe. Shopify'a alternatif: kendi koduna sahip ol, ek aylık komisyon yok. Niş, butik veya dijital ürün için ideal.

Kim İçin Uygun?

  • Butik mağazalar (10-100 ürün)
  • Dijital ürün satıcıları (e-kitap, kurs, plugin)
  • Niş market (örn: vegan kozmetik, el yapımı takı)
  • B2B kataloglar (toptan, fiyat istek)
Tipik Özellikler

E-Ticaret için olmazsa olmazlar

1

Ürün katalog + filtreleme

Kategori, fiyat, marka, özellik filtreleri. Hızlı arama.

2

Ürün detay (galeri + video)

Görsel slider, video, açıklama, özellikler, beden/renk seçici.

3

Sepet (LocalStorage)

Kullanıcı giriş yapmadan sepet tutulur.

4

Checkout flow

Adres + kargo + ödeme — 3 adım veya tek sayfa.

5

Stripe / Iyzico

Kart ödeme, 3D Secure, taksit (Iyzico).

6

Sipariş takibi + e-posta

Otomatik onay, hazırlanıyor, kargo, teslim e-postaları.

7

Admin paneli

Sipariş listesi, stok yönetimi, ürün ekleme.

8

Müşteri hesabı

Geçmiş siparişler, adres defteri, favoriler.

Önerilen Yığın

Next.js 14 Supabase (Auth + DB + Storage) Stripe veya Iyzico React Hook Form + Zod Resend (e-posta) Vercel
Adım Adım Kurulum

8 adımda yayında

1

Veri modeli (60 dk)

Tablolar: products, categories, orders, order_items, customers, addresses. Claude'a sor: 'Supabase için bu e-ticaret schema'sını yaz, RLS politikalarıyla.'

2

Ürün katalog (90 dk)

/products grid + filtreleme + arama. Ürün kartı: image + title + price + 'sepete ekle'. Sayfalama.

3

Ürün detay (120 dk)

/products/[slug]: 5-image galeri (Swiper), video, açıklama, beden/renk select, miktar, sepete ekle. Schema: Product JSON-LD.

4

Sepet (60 dk)

Zustand store + localStorage. /cart sayfası: ürünler + miktar değiştir + toplam.

5

Checkout + Stripe (180 dk)

/checkout: 1) adres formu, 2) kargo seçimi, 3) Stripe Checkout veya Iyzico iframe. Webhook ile sipariş kaydı.

6

Admin paneli (90 dk)

/admin: siparişler tablosu, durum güncelle, ürün ekle/sil. Auth kontrolü.

7

E-posta bildirimleri (60 dk)

Resend + React Email: sipariş onayı, kargo, teslim. Müşteriye + admin'e.

8

Test + deploy (60 dk)

Stripe test mode → live. SSL, KVKK aydınlatma metni, satış sözleşmesi. Vercel.

Önemli · Video Slider Rehberi

E-Ticaret'da Video / Slider Nasıl Yapılır?

E-ticaret'te ürün galerisi alıcı için en kritik karar noktası. Statik 5 görsel yetersiz — 360° döner görsel + ürün kullanım videosu = dönüşüm 2-3× artar. Amazon, Apple bu yüzden yapıyor.

1

Ürün galeri Swiper

Ana görsel + 5 thumbnail. Tıklayınca büyük görüntü değişsin. Mobil için swipe.

"use client";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Thumbs } from 'swiper/modules';
import { useState } from 'react';

export function ProductGallery({ images }) {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  return (
    <div className="space-y-4">
      <Swiper
        modules={[Navigation, Thumbs]}
        thumbs={{ swiper: thumbsSwiper }}
        navigation
        className="rounded-xl overflow-hidden"
      >
        {images.map((img, i) => (
          <SwiperSlide key={i}>
            <img src={img.url} alt={img.alt} className="w-full aspect-square object-cover" />
          </SwiperSlide>
        ))}
      </Swiper>

      <Swiper
        onSwiper={setThumbsSwiper}
        modules={[Thumbs]}
        slidesPerView={5}
        spaceBetween={8}
        watchSlidesProgress
        className="thumbs"
      >
        {images.map((img, i) => (
          <SwiperSlide key={i} className="cursor-pointer border-2 border-transparent">
            <img src={img.url} alt="" className="w-full aspect-square object-cover rounded" />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
2

Ürün videosu (kullanım gösterimi)

Galerinin son slaytı olarak video. 30-60 sn ürün kullanım gösterimi.

<SwiperSlide>
  <video
    src="/products/usage.mp4"
    poster="/products/usage-poster.jpg"
    controls
    playsInline
    className="w-full aspect-square object-cover"
  />
</SwiperSlide>
3

360° döner görsel

36 görsel (her 10 derecede bir). Kullanıcı sürükledikçe ürün döner.

npm install react-three-360-product

// veya manuel:
const images = Array.from({ length: 36 }, (_, i) => `/360/product-${i + 1}.jpg`);
const [angle, setAngle] = useState(0);

<div
  className="relative aspect-square cursor-grab"
  onMouseMove={(e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    setAngle(Math.floor(x * 36) % 36);
  }}
>
  <img src={images[angle]} className="w-full h-full" />
</div>
4

Zoom on hover

Görselin üzerine gelince büyütüp gösterir — Amazon tarzı.

npm install react-image-magnify

import ReactImageMagnify from 'react-image-magnify';

<ReactImageMagnify {...{
  smallImage: { src: image.url, width: 600, height: 600 },
  largeImage: { src: image.url, width: 1800, height: 1800 },
  enlargedImagePosition: 'beside',
}} />
5

Müşteri yorumlarında video

İncelemeler bölümünde unboxing/kullanım videoları. Sosyal kanıt en güçlü hali.

<div className="grid grid-cols-2 gap-4">
  {reviews.filter(r => r.video).map(r => (
    <div key={r.id}>
      <video src={r.video} controls poster={r.thumbnail} className="rounded-lg" />
      <div className="mt-2 flex items-center gap-2">
        <Avatar src={r.userAvatar} />
        <div>
          <p className="font-bold">{r.userName}</p>
          <Stars rating={r.rating} />
        </div>
      </div>
      <p className="mt-2">{r.text}</p>
    </div>
  ))}
</div>
6

Ürün listesi hover video

Katalogda ürün kartı üzerine gelince statik görsel video'ya dönüşür. Engagement artar.

<Link href={`/products/${product.slug}`}>
  <div
    className="group relative aspect-square overflow-hidden"
    onMouseEnter={(e) => e.currentTarget.querySelector('video')?.play()}
    onMouseLeave={(e) => {
      const v = e.currentTarget.querySelector('video');
      v?.pause(); v.currentTime = 0;
    }}
  >
    <img src={product.image} className="absolute inset-0 group-hover:opacity-0 transition" />
    <video
      src={product.previewVideo}
      muted loop playsInline
      className="absolute inset-0 w-full h-full opacity-0 group-hover:opacity-100 transition"
    />
  </div>
</Link>
Hazır Promptlar

Claude Code'a Yapıştır

Köşeli parantezleri kendi içeriğinizle değiştirin.

Supabase e-ticaret schema

Aç ▾
Supabase için tam e-ticaret schema'sı oluştur:

Tablolar:
- products (id, slug, name, description, price, sale_price, stock, images[], video_url, category_id, brand, is_active, created_at)
- categories (id, name, slug, parent_id)
- product_variants (id, product_id, size, color, sku, stock, price_diff)
- product_reviews (id, product_id, user_id, rating, text, video_url, approved)
- customers (id, auth_id, name, email, phone)
- addresses (id, customer_id, type, name, address1, city, postal_code, phone)
- orders (id, customer_id, address_id, status, total, payment_id, tracking, created_at)
- order_items (id, order_id, product_id, variant_id, quantity, price, total)
- cart_items (geçici, localStorage'a alternatif)

RLS politikaları:
- customers: kendi kayıtlarını okur/günceller
- orders: kendi siparişlerini okur, admin tümünü görür
- products: herkes okur, admin günceller

Migrations dosyaları + TypeScript tipleri ile.

Stripe Checkout flow

Aç ▾
Stripe Checkout entegrasyonu:

1. /api/checkout endpoint
   - Body: { items: [{ productId, quantity, variantId? }], addressId, email }
   - Stripe Checkout Session oluştur (line_items)
   - successUrl: /siparis/[orderId]?session_id={CHECKOUT_SESSION_ID}
   - cancelUrl: /sepet
   - Türk Lirası (TRY) destek
   - 9 taksit seçeneği (Türk kartları için)

2. /api/webhooks/stripe — webhook handler
   - checkout.session.completed → sipariş veritabanına kaydet
   - Resend ile müşteriye onay maili gönder
   - Admin'e Slack bildirim
   - Stok düş

3. Test mode kurulum + canlıya geçiş checklist'i

Stripe types kullanılsın, error handling sağlam olsun.

Iyzico alternatifi

Aç ▾
Türkiye için Iyzico entegrasyonu:

Iyzico Checkout Form (iframe) ile:
1. /api/iyzico/init endpoint
   - Iyzico SDK ile CheckoutForm oluştur
   - Token döndür
2. Frontend: iyzicopay.js yükle, iframe göster
3. /api/iyzico/callback
   - Token doğrulama
   - Ödeme başarılıysa sipariş onayla
   - Webhook (Iyzico bildirimleri)

Iyzico Türk Lirası, taksit, 3D Secure native destek var.
Test ortamı ile başla, sonra production keys.

Iyzico vs Stripe karşılaştırma tablosu da ekle.
Gerçek Örnek

Bu rehberden gerçek bir vaka

Brief

Vegan kozmetik markası. 50 ürün, ortalama 200 TL. Hedef: aylık 100 sipariş.

Sonuç

10 günde: 50 ürün katalogu + ürün galerisi + sepet + Iyzico ödeme + admin paneli + 6 otomatik e-posta. Mobile responsive, KVKK uyumlu.

Next.jsSupabaseIyzicoResendTailwindVercel
Sık Hatalar

Bunlardan kaçının

Hata

Stok kontrolü yapmıyor — fazla satış yapıyor

Çözüm

Her sepete ekleme + checkout'ta stok lock. Postgres transaction kullan.

Hata

Mobilde checkout flow karmaşık

Çözüm

Tek sayfa checkout (multi-step değil). Adres + ödeme yan yana. Mobile-first.

Hata

E-posta otomasyon kurulmamış

Çözüm

Sipariş onayı, hazırlanıyor, kargo, teslim — 4 e-posta zorunlu. Müşteri güveni için kritik.

SSS

E-Ticaret için sık sorular

Shopify yerine kendi koduma sahip olmak mantıklı mı?

Aylık komisyondan kurtulur, tam kontrolün olur, hız + SEO çok daha iyi. Ama: 10 ürün için Shopify daha hızlı başlar. 100+ ürün veya niş özelleştirme istiyorsanız kendi kod. Migration de mümkün.

Stripe vs Iyzico vs Param vs PayU?

Türkiye müşterisi: Iyzico (taksit, 3D, KVKK uyumlu, TL native). Uluslararası: Stripe. KOBİ için Param da iyi. PayU eski, modernize gerek. Iyzico'da entegrasyon 2 saatte tamam.

Kargo entegrasyonu nasıl?

Yurtiçi/MNG/Aras için Sürat Kargo API veya basit Shopify-tarzı manuel takip kodu girme. Otomatik: Shippy gibi entegrasyon platformları kullan.