Hiluna: Shopify teknik eğitimi

Bu sayfa, Hiluna ekibi için hazırlanan eğitimin 1. Gün (Temeller) kapsamlı eğitmen rehberidir. İçerik; kurulum, kodlama, hata ayıklama (debugging) ve en iyi pratiklerle zenginleştirilmiştir.

---

### DERS 0: EDİTÖR VE ORTAM OPTİMİZASYONU (09:15 - 09:30)

**Hedef:** VS Code'u Shopify geliştirmeye hazır hale getirmek.

1. **Eklentiler:** "Shopify Liquid" (Resmi eklenti), "Prettier" (Kod formatlayıcı) ve "GitLens" (Kim neyi değiştirmiş görmek için) eklentilerini kurdurun.

2. **Ayarlar:** `.vscode/settings.json` oluşturup Liquid dosyaları için HTML formatlamasını açın.

[Eğitmen Notu]: "Renkli parantezler (Bracket Pair Colorizer) artık VS Code'un içinde var, eklentiye gerek yok" bilgisini ver.

---

### DERS 1: KURULUM VE ORTAM HAZIRLIĞI (09:30 - 10:30)

**Teknik Detaylar:**

- **Node.js:** Shopify CLI v3, Node.js 18+ gerektirir. `node -v` ile kontrol edin.

- **CLI Yetkileri:** Giriş yapılan hesabın mağazada "Themes" ve "App development" yetkilerine sahip olması şarttır.

**Adımlar:**

1. `npm install -g @shopify/cli @shopify/theme`

2. `shopify login --store=hiluna.myshopify.com`

**Q&A:**

- **S:** "Neden global kuruyoruz?" -> **C:** Terminalin her yerinden erişmek için.

---

### DERS 2: TEMA MİMARİSİ VE DOSYA YAPISI (10:45 - 11:30)

**Kritik Dosyalar:**

- `layout/theme.liquid`: Master template. Header/Footer burada.

- `templates/*.json`: Sayfa yapıları. Hangi section nerede duruyor?

- `sections/`: Bağımsız bloklar. (Örn: Hero Slider)

- `config/settings_data.json`: Temanın veritabanı. Renkler, fontlar ve section içerikleri.

**Q&A:**

- **S:** "CSS'i nereye yazalım?" -> **C:** `assets/base.css` veya section'ın kendi içine `<style>` etiketiyle (Scoped CSS mantığı).

---

### DERS 3: LOCALHOST VE HMR (11:30 - 12:30)

**Adımlar:**

1. `shopify theme list` -> ID'yi kopyala.

2. `shopify theme pull -i <ID>` -> Temayı indir.

3. `shopify theme dev` -> Sunucuyu başlat.

**Debug İpucu:**

- Eğer CSS yüklenmiyorsa veya 404 alıyorsanız, terminali kapatıp tekrar `shopify theme dev` yapın. Bazen port takılı kalabilir.

---

### DERS 4: LIQUID KODLAMA VE DEBUGGING (13:30 - 15:00)

**Liquid Temelleri:**

- `{{ product.title }}` -> Çıktı (Output)

- `{% if product.available %}` -> Mantık (Logic)

- `{{ product.price | money }}` -> Filtre (Filter)

**Debugging Teknikleri (ÖNEMLİ):**

1. **JSON Filtresi:** Bir objenin içinde ne olduğunu görmek için `{{ product | json }}` kullanın. Ekrana tüm datayı basar.

2. **Comment:** Kodu silmek yerine `{% comment %}...{% endcomment %}` ile saklayın.

3. **Theme Inspector:** Chrome eklentisi "Shopify Theme Inspector" ile hangi section'ın siteyi yavaşlattığını analiz edin.

**Uygulama:**

- `snippets/debug-bar.liquid` oluşturun. İçine `Current Template: {{ template }}` yazıp `theme.liquid` en altına ekleyin.

---

### DERS 5: GIT, GITHUB VE CONFLICT ÇÖZÜMÜ (15:15 - 17:00)

**İş Akışı:**

1. `git checkout -b feature/yeni-header`

2. Kodla -> Commit -> Push

3. GitHub'da PR aç -> Merge et.

**Conflict (Çakışma) Senaryosu:**

- İki kişi aynı anda Panelden "Buton rengini" değiştirirse `settings_data.json` dosyasında conflict çıkar.

- **Çözüm:** VS Code'da "Merge Editor" kullanarak gelen değişikliği (Incoming) mi yoksa bizdekini (Current) mi alacağımıza karar veririz. Genellikle "Incoming" (Panelden gelen) daha günceldir.

---

### BONUS: LIQUID CHEAT SHEET

- **Asset Çağırma:** `{{ "style.css" | asset_url | stylesheet_tag }}`

- **Resim Çağırma:** `{{ product.featured_image | image_url: width: 500 | image_tag }}`

- **Çeviri (Locales):** `{{ "general.cart.title" | t }}`

- **Döngü:** `{% for item in cart.items %} ... {% endfor %}`

- **Matematik:** `{{ product.price | divided_by: 100.0 }}`

Eğitim dokümanlarına erişin.

Daha fazla referans için Shopify directory profilimi inceleyebilirsiniz.