Liquid mağazasını Hydrogen’a taşımak: kontrol listesi

Bu kontrol listesi kararın verildiğini varsayar. Verilmediyse headless’ın ne zaman kendini amorti ettiği yazısıyla başlayın. Liquid’den Hydrogen’a geçişin iyi tarafı, zor verinin taşınmamasıdır: ürünler, siparişler, müşteriler ve yönlendirmeler Shopify’da kalır. Risk, temanın sessizce yaptığı ve yeni bir vitrinin bilinçli olarak yapması gereken her şeydedir.

1. Temanın bugün yaptıklarının envanterini çıkarın

• Şablonlar ve URL’ler. Trafik alan her URL desenini dışa aktarın: ürünler, koleksiyonlar, sayfalar, blog yazıları, arama ve varsa özel şablonlar. Hydrogen farklı yollar kullanabilir, ama her değişiklik bir yönlendirme gerektirir.
• Ekibin düzenlediği bölümler. Ürün ve kampanya ekibinin geliştirici olmadan değiştirdiği her şeyi listeleyin. Her birinin metaobject’ler, metafield’lar (meta alanlar) ya da bir CMS gibi yeni bir yere ve yayından önce birinin denediği bir düzenleme akışına ihtiyacı var.
• Vitrinde görünen uygulamalar. Yorumlar, arama, paketler, sadakat, pop-up’lar, canlı destek. Bir uygulamanın temaya blok ya da embed olarak eklediği her şey için Hydrogen’da onu taşıyacak bir tema yoktur: her uygulamanın bir API’ye ya da headless entegrasyona veya bir yedeğe ihtiyacı vardır.
• Script’ler ve pikseller. theme.liquid ve tema ayarlarındaki her etiket, piksel ve snippet; her biri bir sahip ve tutulması için bir gerekçeyle.

2. URL’ler, yönlendirmeler ve SEO

Hydrogen’ın storefrontRedirect aracı, istenen yol için Shopify’da oluşturulmuş bir yönlendirmeyi Storefront API’de sorgular ve uygular; yoksa sizin yanıtınızı olduğu gibi geçirir. Olağan desen, onu yalnızca uygulama 404 döndürdüğünde çağırmaktır; böylece Shopify yönetim panelinde yönetilen yönlendirmeler yayından sonra da çalışmaya devam eder. Test edilecek iki ayrıntı:

• matchQueryParams true olmadıkça eşleştirmede query parametreleri yok sayılır. Eski URL’ler anlamlı parametreler taşıyorsa hangi davranışı istediğinize karar verin.
• Varsayılan olarak /admin, mağazanın Shopify yönetim paneline yönlenir; noAdminRedirect bunu kapatır.

Meta veriler için getSeoMeta; başlıkları, açıklamaları, canonical URL’leri, görselleri ve JSON-LD’yi doküman head’ine yazar. Hydrogen, içerik değiştiğinde bir gün içinde güncellenen sitemap route’ları ve varsayılan olarak 24 saat önbellekte tutulan bir robots.txt route’u üretebilir. Oxygen’da robots.txt yalnızca özel alan adlı public production ortamında sunulur; önizleme bağlantıları her şeyi engelleyen bir dosya alır. Kendiniz barındırıyorsanız bu korumayı kendiniz kurarsınız.

3. Pazarlar ve diller

Hydrogen mağazanın Markets yapılandırmasını okur ve dil-bölge bilgisini Storefront API sorgularına aktarır; ama yönlendirmeyi siz kurarsınız: varsayılan dil-bölge, URL şeması, bir ülke seçici ve varsa dil algılama. Shopify her dil-bölge için ya yol (/fr, /es) ya da alan adı olarak ayrı bir URL önerir; yolların alan adı kurulumu gerektirmemek gibi bir avantajı vardır. Ayrıca ziyaretçileri algılanan dile göre otomatik yönlendirmeye karşı uyarır: sayfa önbelleği dil çerezlerini, header’larını ve arama parametrelerini yok sayar; arama motoru tarayıcıları da bunları göndermeyebilir. Mümkün olduğunda bugünkü pazar URL’lerini koruyun ya da her birini açıkça yönlendirin.

4. Müşteri hesapları

Hydrogen müşterileri OAuth ile Customer Account API üzerinden oturum açtırır: bir login route’u müşteriyi Shopify’a gönderir, bir authorize route’u da token’ı alıp uygulamanın oturumunda saklar. İki kısıtı planlayın. API localhost kabul etmez; bu yüzden yerel geliştirme için Shopify yönetim panelinde kayıtlı bir HTTPS tüneli (callback URI, JavaScript origin ve logout URI) gerekir. Ayrıca Multipass, Customer Account API tarafından desteklenmez; Multipass ile tek oturum açmaya dayanan bir mağazanın başka bir plana ihtiyacı vardır.

5. Analitik ve izin

Analitik Hydrogen’a yerleşiktir, ama Shopify’ın yönlendirmesi açık: herhangi bir şeyi takip etmeden önce, ya Shopify’ın Customer Privacy API’si ve yerleşik çerez bannerıyla ya da üçüncü taraf bir izin hizmetiyle müşteri izni kurallarına uyun. 1. adımdaki etiket listesini bu izin katmanının üzerine yeniden kurun, sonra olayların Shopify analitiğine ulaştığını yayından sonra değil, önce kontrol edin.

6. Önbellek kuralları

Hydrogen, Storefront API isteklerini varsayılan olarak önbelleğe alır; her sorgu için CacheShort, CacheLong, CacheNone ve özel stratejiler vardır. Customer Account API verisi hiçbir zaman önbelleğe alınmaz. Kişiselleştirilmiş her şey, bir ziyaretçinin verisi asla paylaşılan bir önbelleğe düşmesin diye, sorguda CacheNone ve sayfada no-store ya da private header’ı gerektirir. Her route için kuralı yazın; bu aynı zamanda kodu inceleyenin kontrol ettiği listedir.

7. Karşılaştırma için bir başlangıç ölçümü

Yeni vitrin izlenimlerle değil rakamlarla değerlendirilsin diye, yayından önce Liquid mağazanın bugün ne yaptığını kaydedin:

• Search Console’dan organik giriş sayfaları ve trafikleri; böylece geçişten sonra düşen her sayfa aylar değil günler içinde bulunur.
• Shopify’ın web performansı raporlarından ve Search Console’dan sayfa türüne göre Core Web Vitals.
• Shopify analitiğinden cihaza göre dönüşüm oranı ve sepete ekleme oranı.
• 1. adımdan, hangi uygulamaların ve etiketlerin hangi sayfada çalıştığı; yayından sonra aynı olayların geldiğini doğrulamak için.

Yeni bir vitrin çoğu zaman bunların birkaçını aynı anda değiştirir. Bir başlangıç ölçümüyle gerçek bir gerilemeyi olağan dalgalanmadan ayırabilir ve yeni normal hâline gelmeden düzeltebilirsiniz.

8. Adım adım geçiş

1. URL haritası ve etiket listesi doğru kalsın diye yayından kısa bir süre önce tema değişikliklerini dondurun.
2. Hydrogen vitrinini özel ya da noindex bir ortama yayına alın ve tarayın: durum kodları, canonical’lar, yapılandırılmış veri, sitemap.
3. Eski URL listesini ona karşı tekrar çalıştırın ve her birinin sayfayı ya da tek bir yönlendirmeyi döndürdüğünü doğrulayın.
4. Gerçek bir müşteri hesabıyla giriş, çıkış ve sipariş geçmişini, ayrıca her pazarın URL’lerini test edin.
5. İzin ve analitik olaylarını bir test oturumuyla doğrulayın.
6. Alan adını değiştirin, sonra ilk haftalar boyunca 404’leri, Search Console kapsamını ve dönüşümü her gün izleyin.
7. Liquid temayı, yeni vitrin bir süre sorunsuz çalışana kadar yayımlanmamış ama bozulmamış hâlde tutun; geri dönüş planınız odur.

Yeni vitrinin nerede çalışacağı ayrı bir karardır: bkz. Oxygen mı, Workers üzerinde kendi barındırmanız mı.

9. Yayından sonra: sahibi kim?

Bir tema aylarca kendi hâline bırakılabilir; bir Hydrogen vitrini bırakılmamalı. Bağımlılıkları güncelleyecek, Storefront API sürümünü ilerletecek, 404’leri ve önbellek davranışını izleyecek ve yeni pazar ya da uygulama entegrasyonlarını ekleyecek kişiyi belirleyin. Kimse belirlenmediyse taşıma bitmemiştir. 6. adımdaki önbellek kurallarını ve 2. adımdaki URL haritasını depoya koyun; böylece bir sonraki geliştirici kodla birlikte gerekçeyi de devralır.

Lintel buna nasıl yaklaşır

Yayımlanmış bir müşteri Liquid’den Hydrogen’a taşıma projemiz yok ve varmış gibi yapmayacağız. Var olanlar şunlar: geliştirdiğimiz, Storefront API üzerinde çalışan bir Hydrogen vitrini olan Snow / Motion ve kendi yönlendirmeleri, sitemap’i, noindex önizlemeleri ve önbellek kurallarıyla bir Hydrogen uygulaması olan bu web sitesi. Bizimle yapılan bir taşıma projesi bu listenin 1. ve 2. adımlarıyla başlar; bunları tek bir şablon yazılmadan önce yazılı bir plan olarak teslim ederiz.