Tema geliştirme
Tarayıcıda çalışan şapka tasarım kurucusu
Müşteri şapkayı ve patch'i seçiyor; önizleme patch'i cırt cırt pedinin üstüne perspektifle oturtuyor.
Müşteri: BlackBörk USA
Başlangıç durumu
Türkiye mağazasındaki tasarım aracı bir Shopify uygulamasıydı ve ABD mağazasında kurulu değildi; uygulama kurulumu API üzerinden yapılamıyor. İlk denemede patch tek bir sabit yüzdeyle basılıyordu — şapka fotoğrafları 3/4 açıdan çekildiği için ön panel ekranda dikdörtgen değil, perspektifte bir yamuk. Düz basılan patch pedin üstüne oturmuyordu.
Yapılan
- Uygulama yerine tema içinde çalışan bir kurucu yazıldı; mağazada aylık ücretli uygulama bağımlılığı yok.
- Kurucudaki 112 şapka fotoğrafının her birinde cırt cırt pedinin dört köşesi ölçülüp ayrı bir veri dosyasına yazıldı; tarayıcı bu dörtgene homografi kurup patch'i matrix3d ile basıyor.
- Ölçüm için üç yöntem denenip elendi: boş/patch'li fotoğraf farkı (çiftler aynı çekim değil), serbest hizalama (dörtgeni bozup patch'i şapkanın dışına taşıyor) ve serbest şekil araması (32 fotoğrafta yanlış şekil kazandı). Çalışan yöntem şekli kilitleyip yalnız kaydırma ve ölçek aramak oldu.
- Patch fotoğrafları beyaz fonda geliyor; tarayıcıda kanvasla beyaz saydamlaştırılıp içeriğe kırpılıyor, kanvas reddedilirse sabit kırpma yedeğine düşüyor.
- Ürün sayfasındaki “tasarla” butonu sessizce ölüydü: koleksiyon eşlemeleri başka mağazanın adreslerini taşıyordu, URL alanları boştu ve adresin tamamı URL kodlandığı için JS yüklenmeden tıklanınca 404 veriyordu.
- Tek seçimli panelde ilk seçimden sonra bütün kartların artı butonu kilitleniyordu; müşteri seçimi değiştirmek için önce eskisini elle çıkarmak zorundaydı.
LiquidJavaScriptCanvasmatrix3dShopify CDN
Sonuç
- Önizlemede eski patch'in ekranda kaldığı süre 192 ms'den 0–16 ms'ye indi (masaüstü ve 375 px mobil).
- Izgara her tıkta baştan yazılmak yerine yerinde güncelleniyor; tıklamanın senkron maliyeti 65–69 ms.
- Patch kesimi ~39 ms sürüyor ve karta imleç gelince önceden yapılıp önbelleğe alınıyor.
- Kurucu tema dosyası olarak çalışıyor: dış uygulama, aylık ücret ve veri bağımlılığı yok.
Sizde de benzer bir durum mu var?
Mağazanın adresini yollayın; bakıp ne gördüğümü yazayım.