Aegean Sun Fruit

Yoğun bir katalog, iki dil

Kuru meyve ticareti ayrıntıyla yürür: çeşit, sınıf, kalibre, ambalaj ve sevkiyat koşulları. Alıcılar birkaç tedarikçiyi karşılaştırır ve çoğu zaman ikinci bir dilde okur. Müşterinin bu ayrıntıyı İngilizce ve Türkçe olarak, okuru boğmadan sunması ve her sayfanın tek bir eyleme, talep göndermeye yönlendirmesi gerekiyordu. Sitenin barındırması ucuz, değiştirmesi de geliştiriciye ihtiyaç duymadan kolay olmalıydı.

İkinci kısıt gizlilikti. Ziyaretçilerin önemli bir kısmının AB'den gelmesi beklendiği için analitik, ziyaretçi onay vermeden yüklenemezdi; gizlilik sayfası da sitenin gerçekte ne yaptığını anlatmalıydı. Formların ücretli bir arka uç ya da bakım isteyen bir sunucu olmadan çalışması gerekiyordu. Kısacası sitenin, ayrı bir altyapıya ihtiyaç duymadan kendi başına işlemesi bekleniyordu.

Benim rolüm

Siteyi baştan sona düz HTML, CSS ve vanilla JavaScript ile geliştirdim: iki dildeki tüm sayfalar, ortak tasarım değişkenleri, formlar ve bunların Google Forms'a iletimi, çerez onay bandı, kural tabanlı satış asistanı ve arama dosyaları. İşletme içeriği, ürün bilgileri ve fotoğraflar müşteriden gelir; onayı da müşteriye aittir.

Neler geliştirildi

Sitede her İngilizce sayfanın Türkçe bir karşılığı var: ana sayfa, ürünlere genel bakış, dört ürün sayfası, hakkımızda, iletişim ve gizlilik metni. Her sayfa bir talebe yönlendiriyor. Onay, analitik, otomatik yanıtlar ve asistan gibi destek parçaları da müşterinin geliştirici olmadan yönetebileceği şekilde kuruldu.

• Eşleştirilmiş iki dilli sayfalar

  Yayında

  Her İngilizce sayfanın kendi adresi olan Türkçe bir karşılığı var. Dil seçici ziyaretçiyi ana sayfaya değil, aynı sayfanın diğer dildeki sürümüne götürüyor.

• Ürün kataloğu

  Yayında

  Karşılaştırma tablosu içeren bir ürün genel bakış sayfası ve her ürün için özellik, sınıf, ambalaj ve kullanım alanlarını anlatan ayrı sayfalar.

• Talep formları

  Yayında

  Ana sayfalarda koli etiketi biçiminde bir talep formu, iletişim sayfalarında ayrıntılı bir form. İkisi de tarayıcıda doğrulanıp müşterinin Google Forms'una iletiliyor.

• Çift onaylı bülten

  Yayında

  Onay bağlantısı, karşılama e-postası ve çalışan bir abonelikten çıkma bağlantısı gönderen Google Apps Script destekli kayıt formu. Form sahibi tek seferlik kurulumu tamamladığında çalışır.

• Onaya bağlı analitik

  Yayında

  Reddet düğmesinin Kabul et kadar belirgin olduğu bir çerez bandı. Google Tag Manager ve Analytics yalnızca kabulden sonra yükleniyor; çerezsiz Vercel sayacı ayrı çalışıyor.

• Kural tabanlı satış asistanı

  Yayında

  Arka ucu olmayan küçük bir sohbet aracı. Anahtar kelimeleri eşleştiriyor ve yalnızca sitede zaten yayımlanmış bilgilerle, sayfanın dilinde yanıt veriyor.

• Arama ve yapay zekâ hazırlığı

  Yayında

  Mutlak canonical adresler, x-default içeren hreflang çiftleri, dil alternatifli site haritası, ana sayfalarda JSON-LD, yapay zekâ tarayıcılarını adıyla anan robots.txt ve bir llms.txt özeti.

Nasıl çalışıyor

Site statik: çerçeve, derleme adımı ya da bağımlılık yok. Her sayfa kendi üst bölümü, menüsü ve meta etiketleriyle eksiksiz bir HTML dosyası; tüm sayfalar tasarım değişkenlerine dayanan tek bir stil dosyasını paylaşıyor. Sayfanın lang özelliği tüm betiklerin dilini belirliyor; form mesajları, çerez bandı ve asistan, sayfa başına ayar gerekmeden İngilizce ya da Türkçe yanıt veriyor.

Form önce tarayıcıda denetleniyor: hatalı alanlar ekran okuyucular için işaretleniyor ve ilk hatalı alana odaklanılıyor. Ardından değerler bir Google Form'a gönderiliyor. Gizli bir tuzak alanı ve sayfada geçen asgari süre basit spam'i eliyor. İstek başarısız olursa ziyaretçiye önceden doldurulmuş bir e-posta öneriliyor. Bir Google Apps Script de her gönderene kendi dilinde yanıt yolluyor.

Günlük işleyiş

Talepler Google Forms yanıt tablolarına düşüyor; müşteri e-posta bildirimlerini açabiliyor. Otomatik yanıtlar günlük bir sınırla gönderiliyor, böylece herkese açık formlar e-posta kotasını tüketmek için kullanılamıyor. Bülten bir Gmail taslağı olarak yazılıyor ve tek bir betik komutuyla gönderiliyor; aynı sayı bir kişiye asla iki kez gitmiyor.

Depodaki README bir işletim kılavuzu gibi çalışıyor. Bir sayfanın iki dilde nasıl ekleneceğini, yanıtları sessizce kaybetmeden bir form sorusunun nasıl değiştirileceğini ve bir bilginin neden sayfada, llms.txt'de ve asistanda birlikte güncellenmesi gerektiğini anlatıyor. Böylece site, onu geliştiren kişiye bağımlı kalmadan müşteri tarafından yönetilebiliyor.

Kararların arkası

Temel tercihler gerekçeleriyle birlikte depoda yazılı. Onay modu gelişmiş değil temel düzeyde tutuldu; çünkü gelişmiş mod onaydan önce Google'a bağlanır, gizlilik sayfasındaki bir sözü bozar ve bu trafik düzeyinde modellenmiş veri de üretmez. Asistan, işletme maliyeti ve veri sızıntısı riski olmasın diye kural tabanlı kaldı. Doğrulanmamış işletme rakamları uydurulmadı; müşteri için yer tutucu olarak işaretlendi.