WooCommerce Renk Seçicileri 10.9 Beta ile Bugün Geldi

Yaklaşık on yıldır, tişört, ayakkabı, boya, kumaş ya da görselleştirilmesi gereken bir varyasyonu olan her WooCommerce mağazasının üçüncü taraf bir renk seçici (swatch) eklentisine ihtiyacı oldu. Bazıları çok iyiydi. Bazıları her WooCommerce sürümünde patlayan bir JavaScript mayın tarlasıydı. Yarım çalışan bir renk seçici eklentiyle gece üçte boğuşan yeterince mağaza kurtardım: sorun her zaman aynı şekildeydi. Eklenti, veri modelinin dışında yaşıyor, varyasyon arayüzüne kanca atıyor ve çekirdek bloklardan herhangi biri değişir değişmez başkasının render katmanını ayıklıyorsunuz.

Bu yüzden 3 Haziran’da Porto’dan gelen haber, başlığın söylediğinden çok daha önemliydi. WooCommerce, renk ve görsel seçicileri sonunda çekirdeğe alıyor; üstelik metin açılır menüsüne üstten yapıştırılmış bir stil katmanı olarak değil, birinci sınıf bir ürün özniteliği türü olarak. Bugün, yani 8 Haziran itibarıyla bu iş, WooCommerce 10.9 beta 1’le birlikte, bir özellik bayrağının arkasında ve blok temaları için açık olarak hayata geçiyor.

Uzun zamandır beklediğim cinsten bir değişiklik. Renk seçicileri tek başına heyecanlı bir konu olduğu için değil; bunları veri modelinin içine taşımak, “etrafından dolaştığınız bir özellik” ile “gerçekten güvenebileceğiniz bir özellik” arasındaki farkı belirlediği için.

Asıl yeni olan ne

WooCommerce 10.9, Color / Image adında yeni bir ürün özniteliği türü getiriyor. Bu tür dahili olarak wc-visual şeklinde tescilleniyor. wc- öneki bilinçli bir tercih: WooCommerce ekibi geliştirici blogundaki duyurusunda bunu, halihazırda kendi öznitelik türlerini kaydeden mevcut renk seçici eklentileriyle çakışmayı önlemek için kullandıklarını açıklıyor.

İşleyiş yalın. Ürünler → Öznitelikler bölümünde yeni bir öznitelik oluşturup tür olarak Color / Image seçiyorsunuz. Her terim için ya bir HEX renk değeri giriyor ya da Medya kitaplığından bir görsel yüklüyorsunuz. Görsel seçeneği aslında insanların düşündüğünden daha kritik: desenli kumaşlar, mermer dokular, ahşap damarları ve baskılı tasarımlar tek bir HEX değeriyle temsil edilemez ve eski nesil renk seçici eklentilerinin çoğu görsel desteğini ücretli sürüme saklıyordu.

Öznitelik tanımlandıktan sonra renk seçiciler, mevcut WooCommerce bloklarında otomatik olarak çıkıyor: Sepete Ekle + Seçenekler bloğunun içindeki Varyasyon Seçici, Özniteliğe Göre Filtrele, Ürün Filtreleri içindeki Liste bloğu ve Chips bloğu. Her seçici, HEX rengi ya da yüklenen görseli bir daire içinde gösteriyor. Şablonunuza eklemeniz gereken ayrı bir “swatch bloğu” yok — alttaki öznitelik Color / Image türündeyse mevcut bloklar kendiliğinden renk seçici farkındalığı kazanıyor.

Bu özelliği açmak için WooCommerce → Ayarlar → Gelişmiş → Özellikler altındaki Color swatches for attributes seçeneğini etkinleştiriyorsunuz. Tamamen tercihe bağlı, bayrağın arkasında ve geliştirici blogunun belirttiğine göre şimdilik yalnızca blok temalar için. Klasik temalar 10.9 sürümünün kapsamında değil.

Zamanlama programa uygun. WooCommerce sürüm takvimi belgelerine göre, beta 1 özellik dondurulmasından bir hafta sonra çıkıyor. 10.9 için özellik dondurma 1 Haziran’daydı, dolayısıyla beta 1 bugüne, 8 Haziran’a denk geliyor. Bir önceki sürüm olan WooCommerce 10.8.0 (26 Mayıs) minimum WordPress gereksinimini 6.9’a çıkarmış, satın alma sonrası ürün değerlendirme isteyen yeni e-postayı eklemiş ve misafir siparişlerin tamamlanması üzerinden REST API’de bir güvenlik açığını kapatmıştı. 10.9 ise gözle görülür UX işinin sergilendiği döngü.

WordPress ve WooCommerce dünyası için neden önemli

Asıl hikâye “WooCommerce, renk seçici eklentilerine yetişti” değil. Asıl hikâye, eklenti ekosisteminde yaşayan bir özelliğin platformun parçası haline gelmesiyle neyin değiştiği.

Üç şey değişiyor.

Bir, veri modeli artık sabit. Store API üzerinden başsız (headless) bir önyüz kuruyorsanız, ürünleri bir ERP’ye senkronluyor ya da öznitelikleri öneri motoruna besliyorsanız, renk seçici verisi şimdiye kadar her eklentide farklı bir şekildeydi. Artık bu şekil tek ve sahibi çekirdek. Müşteri tema değiştirdiğinde ya da hosting yükselttiğinde kaybolmuyor. Yalnız bu bile geçiş maliyetine değer.

İki, varyasyon arayüzü bir JavaScript pazarlığı olmaktan çıkıyor. Üçüncü taraf renk seçici eklentileri genellikle yerleşik varyasyon açılır menüsünü DOM düzeyinde ele geçirip kendi tıklama olaylarını bağlıyor, ardından temanın Sepete Ekle bloğuyla yaptığı her şeyle savaşıyor. Çekirdek bloklar renk seçiciyi doğal biçimde işlediğinde bu kırılgan katmanın tamamı ortadan kalkıyor. Ajanslar için bu, planlamak zorunda kalmadığınız bir bağımlılık demek.

Üç, erişilebilirlik ve performans çekirdeğin sorumluluğuna geçiyor. Eski nesil renk seçici eklentilerinin çoğu kendi CSS’ini, kendi klavye davranışını taşıyor ve çoğu zaman ekran okuyucu desteği konusunda ciddi bir hikâyesi olmuyor. Bu iş Varyasyon Seçici ve Özniteliğe Göre Filtrele bloklarının içinde yaşadığında, çekirdeğin Interactivity API tarafında zaten yaptığı erişilebilirlik çalışmasını miras alıyor. Duyuru henüz erişilebilirlik modelini ayrıntılandırmıyor — ki beta sürecinde dikkatle test etmek istediğim konulardan biri bu — ama yapısal cevap, “her sitenin farklı bir renk seçici eklentisi ve farklı bir erişilebilirlik hikâyesi” durumundan iyidir.

Önemli bir uyarı var. Şimdilik yalnızca blok temalar. Hâlâ klasik tema kullanan bir mağazanız varsa — ki özellikle B2B tarafında ciddi gelir üreten birçok mağaza hâlâ böyle çalışıyor — 10.9’un bu özelliğinin kitlesinde değilsiniz. Ya bekleyeceksiniz ya da zaten gecikmiş olan blok temaya geçiş konuşmasını gündeme alacaksınız.

Yerinde olsam ne yapardım (ya da yapmazdım)

Canlıda bir WooCommerce mağazası işletiyorsanız bu özellik bayrağına yayın ortamında dokunmayın. Söylemesi sıkıcı ama biri mutlaka deneyecek. Beta 1 bir betadır ve bir sebeple bayrağın arkasında.

Bu hafta gerçekten yapacağım şeyler:

• Mağazanın bir staging kopyasını ayağa kaldırın, WooCommerce 10.9 beta 1’i resmi WooCommerce GitHub sürümler sayfasından kurun, halen klasik temadaysanız blok temaya geçin ve Color swatches for attributes bayrağını açın.
• Bugün üçüncü taraf bir renk seçici eklentisine bağlı, temsili bir üründe Color / Image özniteliği oluşturun ve varyasyon akışını, filtre davranışını, chips görünümünü karşılaştırın.
• Veri şeklini Store API ve REST API üzerinden kontrol edin. Headless çalışıyorsanız asıl önemli kısım görsel değil, bu. wc-visual şeması önyüzünüzün uzun vadede bağımlı olacağı şey.
• Ekran okuyucu ve klavye davranışını NVDA ya da VoiceOver ile sınayın. Varsayım yapmayın. Yapısal iyileşmeler gerçek olabilir ama erişilebilirlik güvendiğiniz değil, doğruladığınız bir şeydir.
• Bir renk seçici eklentisi ya da varyasyon seçiciyi geçersiz kılan bir tema bakımı yapıyorsanız, wc-visual öznitelik türünün kaynağını şimdi okuyun. Bayrak açıkken çekirdeğe yol vermek mi, yoksa kendi render yolunuzu korumak mı; bilinçli bir karar olarak verin. İkisi de savunulabilir.

Yapmayacağım şey: müşterilere “renk seçiciler artık WooCommerce yerlisi” diye duyuru çıkmak. Bayrak deneysel, kapsam blok temalarla sınırlı ve veri şekli 10.9 final sürümüne kadar değişebilir. Müşteriye işin geldiğini söyleyin, beklentiyi şimdiden kurun ve mevcut renk seçici eklentisinden geçişi 2. çeyrek sürprizi değil, 3. çeyrek projesi olarak takvime koyun.

Bu, başlığa çıkmayan ama varyasyon arayüzünün önümüzdeki on yılını yeniden döşeyen sessiz WooCommerce değişikliklerinden biri. WordPress örüntüsü genellikle böyledir: çekirdeğe sıkıcı geçiş, uzun vadede en çok birikim üreten geçiştir. Gelecek yıl güvenemeyeceğim parlak bir lansmana göre, ben bunu tercih ederim.