Ana içeriğe geç

Rentiva v4.37.2 — Bayi profil UX cilası

· 6 dakikalık okuma
MaxHandMade
MaxHandMade
Maintainer

v4.37.0/v4.37.1'den ertelenen bayi profil sayfası 7 UX bulgusu v4.37.2'de kapatıldı: 3rd-party avatar eklentilerini bozmadan Gravatar mystery-man silüetinin yerini alan deterministic SVG initials avatar, featured image → galeri → compact kart ile düşen araç thumbnail cascade, mevcutsa Yoast / Rank Math / AIOSEO'ya yol veren SEO defaults class'ı, filter'lı URL'lerle hero CTA stack, scoped CSS class adları ve nihayet küçük ekranları tek-sütuna çeviren mobile breakpoint.

Neden bir cila release'i​

v4.37.0 bayi profil sayfasını Pro feature olarak yayınladı. v4.37.1 smoke testte yakalanan 3 fonksiyonel bug'ı hot-patch'ledi (rozet wiring, rating-count semantic mismatch, review-stars meta-key fallback). Geriye kalan tasarım pürüzleriydi — sayfayı kırmayan ama bitmemiş hissi veren küçük şeyler:

  • Gravatar email kaydı olmayan her bayinin aynı görünmesine yol açan gri Gravatar silueti.
  • Foto'su olmayan ve hero'daki ★★★★½ yerine sayının yanında tek ★ glifi gösteren araç kartları.
  • Canlı profilde <title>Rentiva Dev</title> browser tab'ı, plus <meta name="description"> da yok.
  • Hero'daki şehri tekrarlayan KONUM section'ı.
  • .mhm- prefix'i olmayan ve theme defaults'la yan yana duran .label class'ı.
  • 3 araçlı bir bayide ilk satırda iki kart, ikinci satırda yalnız üçüncü kart.
  • Call-to-action yok — sayfa pasif bilgi, belirgin sonraki tıklama yok.

Her biri tek başına küçük bir düzeltme. Kısıt eklentinin global olması — orada olan her temaya, her avatar eklentisiyle, her SEO eklentisiyle inmesi gerekiyor. Yani cila aslında CSS değil. Her düzeltme için doğru ekosistem hook'unu seçip eklentinin sitenin geri kalanıyla savaşmasını engellemekle ilgili.

B4 — Deterministic SVG initials avatar​

Gravatar mystery-man fallback tanınabilir ama email kaydı olmayan her bayi için aynı silüet. Bir directory sayfasında 3-4 bayiyle (v4.38.0'da geliyor), görsel aynılık "bu bayiler gerçek değil" gibi okunuyor.

VendorAvatarFallback bayinin iki harfli initial'ını taşıyan renkli SVG circle ile yer değiştirir. Renk display name'in deterministic hash'inden gelir (Slack / Gmail / Material pattern):

$hash = crc32($display_name);
$hue  = $hash % 360;
return hsl_to_hex($hue, 55, 50);

Aynı isim → her render aynı renk. Farklı bayiler görsel olarak ayırt edilebilir avatarlar alır, biz brand paleti seçmeden (host site'in brand'ini bilmiyoruz).

Implementation get_avatar_data filter'ına priority 99'da bağlanır — varsayılan WP avatar pipeline priority 10'da koşar, 3rd-party avatar eklentileri (Simple Local Avatars, Avatar Privacy, WP User Avatar) tipik olarak orada kayıt olur. En son koşarak, sadece daha önce hiçbir şey gerçek bir avatar resolve edemediğinde devreye giriyoruz. Ayrıca yer değiştireceğimiz URL'in gerçekten Gravatar mystery-man placeholder'ı olduğunu kontrol ediyoruz (?d=mm / ?d=mp / ?d=blank) — gerçek Gravatar URL'i ya da custom 3rd-party-resolved URL değişmeden geçer.

SVG inline (data:image/svg+xml;utf8,...) — avatar render etmek için harici HTTP request yok.

Burada yakaladığımız küçük ama öğretici bir bonus bug var: WordPress'in esc_url() fonksiyonu data: scheme'ini varsayılan olarak strip eder — protocol whitelist'inde değil. Fallback'i wire ettikten sonra ilk browser smoke boş src="" attribute'ları gösterdi (browser'lar relative reference olarak page URL'ine düştü). Hero partial artık scheme'e göre dallanıyor:

$is_inline_svg = strpos($url, 'data:image/svg+xml') === 0;
echo $is_inline_svg ? esc_attr($url) : esc_url($url);

esc_attr() burada güvenli çünkü SVG payload bizim kendi class'ımız tarafından inşa ediliyor — uzaktan içerik yok, kullanıcı input'u yok.

B5 — Araç thumbnail cascade​

Provider::collect_vehicles() artık kart thumbnail'ını üç adımda çözüyor:

  1. WP featured image (get_the_post_thumbnail_url).
  2. Rentiva gallery meta'sındaki ilk attachment ID — VehicleDetails::get_gallery()'nin zaten desteklediği canonical _mhm_rentiva_gallery_images plus legacy _mhm_gallery_images ve _mhm_rentiva_gallery aliasları.
  3. Boş string — template generic "no image" placeholder dikdörtgen göstermek yerine image element'siz --compact modifier kart render eder.

Compact kart bilinçli bir tercih. Beş fotoğraflı aracı ve bir fotosüz aracı olan bir site, dört fotoğraflı kart artı bir gri "no image" dikdörtgenli kart göstermemeli — o tek kart sırıtır. Sadece title + rating'li ince farklı bir compact kart kasıtlı okunur, kırık değil.

Araç kartı rating'i artık hero ile aynı stars_html() helper'ını kullanıyor — tek ★ glifi yerine full half-star barı. Sayfa boyunca tutarlı rating display.

B6 — show_location default'u no'ya çevrildi​

Bu near-deletion ama forward-compatible tutuyoruz. Location section hero'daki şehri tekrarlıyordu (📍 Antalya · 2024'den beri üye), yani sıfır bilgi ekliyordu.

Plan section'ı v4.40.0+ Transfer Map zenginleştirmesine ayırıyor — gerçek bir map pin section'ı yerine değer kazandırır. O zamana kadar bunu isteyen layout'lar açıkça show_location="yes" ile render eder. Default sadece göstermiyor. Block.json default'u ve Elementor widget kontrol default'u shortcode ile eşlemek için flipped.

B7 — .label → .mhm-vendor-section-label​

Generic bir .label class'ı çakışma bekliyor — Bootstrap, theme starter kit'ler ve birkaç form eklentisi .label stili gönderiyor. Tüm 4 section partial ve eşleşen CSS kuralı boyunca renamed. Bu, hiçbir şey değişmemiş gibi görünen tip bir düzeltme — ki amacı tam olarak bu.

B8 — SEO eklentilerine yol veren SEO defaults​

VendorProfileSeo::register() her bayi profil request'inde koşar, ama yaptığı ilk şey aktif SEO eklentilerini kontrol etmek:

return class_exists('WPSEO_Frontend')                   // Yoast
    || defined('WPSEO_VERSION')                          // Yoast (alt)
    || class_exists('RankMath')                          // Rank Math
    || defined('RANK_MATH_VERSION')                      // Rank Math (alt)
    || defined('AIOSEO_VERSION')                         // All-in-One SEO
    || class_exists('AIOSEO\\Plugin\\AIOSEO')            // AIOSEO Pro
    || class_exists('Smartcrawl_Init')                   // SmartCrawl
    || defined('SEOPRESS_VERSION')                       // SEOPress
    || defined('THE_SEO_FRAMEWORK_VERSION');             // The SEO Framework

Bunlardan biri match'lerse, hiçbir filter register etmiyoruz ve hiçbir head tag emit etmiyoruz. Bu eklentilerin daha zengin ayarları, vendor-style içerik için özel UI'ları var ve kullanıcıları zaten yapılandırmış — onlara ihtiyaçları olan son şey bizim ekstra <meta name="description">'ımızın onlarınkiyle yarışması.

Gerçek bir SEO eklentisi aktif değilse iki şey kayıt ediyoruz:

  • Tema default başlığı yerine bayinin display name'ini koyan bir document_title_parts filter'ı. Site adı kısmı, gösteren temalar için bırakılıyor.
  • Bayinin bio'sundan <meta name="description"> emit eden priority 1 wp_head action'ı — açıklama kelime ortasında kesilmesin diye 155 karakterde kelime sınırında trim'leniyor.

Site sahipleri tamamen opt-out edebilir:

add_filter('mhm_rentiva_vendor_profile_seo_disable', '__return_true');

B9 — Hero CTA stack​

Bayi profili pasifti — bayi hakkında oku, araçlarına göz at, ayrıl. CTA stack hero'yu şişirmeden net bir sonraki tıklama ekliyor:

<div class="mhm-vendor-hero-cta">
    <a class="mhm-vendor-hero-cta-primary" href="#mhm-vendor-vehicles">Araçları görüntüle</a>
    <!-- opsiyonel secondary -->
    <a class="mhm-vendor-hero-cta-secondary" href="...">Mesaj gönder</a>
</div>

Primary CTA her zaman görünür — araç grid'ine same-page anchor scroll. Secondary CTA sadece mhm_rentiva_vendor_profile_message_url filter'ı non-empty URL döndürdüğünde render olur, böylece bayi messaging surface'i wire etmemiş sitelerde buton görünmez.

Hem etiket hem URL filter'lı. External booking sistemi olan bir site primary CTA'yı deep link ile değiştirebilir; messaging olmayan bir directory site partial'ı override etmeden secondary'i tamamen gizleyebilir.

B10 — Mobile breakpoint 480px → 600px​

Önceki 480px breakpoint'i phone-landscape (568px) ve küçük tabletlerin (480-768px aralığı) satır başına 2 kart göstermesine yol açıyordu. 3 araçla üçüncü kart 2. satırda yalnız orphan'dı.

Breakpoint 600px'e taşındı — altındaki her şey (phone-landscape, küçük Android tabletler, dar custom layout'lar) tek-sütuna düşüyor. Cascade ile daha çok kart mümkün olduğu için (featured set değilken galeri fallback), genişletilmiş tek-sütun bölgesi daha iyi okunuyor.

Testler​

Test suitev4.37.1v4.37.2
PHPUnit toplam9871007
Doğrulamalar31703208
Yeni regression dosyaları—VendorAvatarFallbackTest, VendorProfileSeoTest, VendorVehicleThumbnailCascadeTest, VendorProfileShowLocationDefaultTest
PHPCS hata00

Browser smoke 3 test bayisi (Akif Yıldız, Mehmet Çelik, Zeynep Demir) desktop (1920px) ve mobile (390px) viewport'larda doğrulandı. Mevcut VendorProfileShortcodeTest::test_max_vehicles_attribute_caps_vehicle_count regression'ı da assertion update aldı çünkü v4.37.2 aynı class attribute'unda mhm-vendor-vehicle-card--compact modifier'ı tanıttı, böylece önceki exact class="mhm-vendor-vehicle-card" substring artık match etmiyor. Assertion artık <a> openings'de kart class'ının başlangıcını match'leyen regex kullanıyor.

Linkler​