Ürün önerilerini markanın kendi kart tasarımı ve carousel'i içinde gösteren, config ile yönetilen tek bir script. Sayfadan gerçek bir ürün kartını kopyalıyor, öneri verisiyle dolduruyor ve üzerinde mağazanın kendi slider kütüphanesini başlatıyor; widget sitenin parçası gibi görünüyor.
"Motoru çalıştır"a basın, sonra mağaza temasını değiştirip tekrar çalıştırın. Atıf olayını görmek için önerilen bir karta tıklayın.
Markalar öneri widgetlarımızın sitelerine benzemediğini söylüyordu.
İlk sürüm kendi HTML metinlerini üretiyor, kendi slider'ını ve CSS'ini çalıştırıyordu. Her marka kendi kartını istiyordu: farklı görsel oranları, rozetler, fiyat düzenleri, fontlar. Her birini elle eşlemek marka başına CSS yazmak ve marka tasarım değiştirdikçe yeniden düzeltmek demekti.
Motoru tek geliştirici olarak tasarlayıp yazdım: widget mimarisi, çalışma zamanı ve entegrasyon; ayrıca kodsuz kurulum rehberi olan doküman sitesi. Öneri stratejileri (çok satanlar, benzer ürünler, birlikte alınanlar, kişiselleştirilmiş ve diğerleri) backend'de hesaplanıyor; ben onları kullanıyorum.
destroy()Mor ton: benim yazdığım kısımlar.
Canlı bir slider kartı carousel sınıfları, inline transformlar, ID'ler ve dinleyiciler taşır. Motor bir referans kartı derin kopyalıyor, bu durumu temizliyor, dolduruyor ve kendi kökünde yerleştiriyor. Mağazanın slider'larına hiç dokunulmuyor; destroy() eklediği her şeyi kaldırıyor.
Slick, Owl ve Swiper farklı markup ve seçenekler istiyor. Bir adaptör katmanı mağazanın zaten yüklediği kütüphane için doğru yapıyı ve seçenekleri kuruyor; ek bir slider gönderilmiyor.
Sayfa tipi (ana sayfa, kategori, ürün, sepet) ve ziyaretçiye (beş ürün görüntüledikten sonra tanınan ya da misafir) göre bir matris stratejiyi ve yedeklerini seçiyor. Sepet sayfaları birden çok stratejiyi tekrarsız birleştiriyor. Kategori sayfaları breadcrumb'ı okuyor ve bir seviye boşsa üst kategoriyle tekrar deniyor.
Tıklamalar öneri parametreleri taşıyor, dönüşümler bir hook ile raporlanıyor. Sonradan yaptığım bir düzeltme kampanya atfını yalnızca tıklamada değil widget yüklenir yüklenmez ayarlıyor; kampanya kaynağı yedi gün korunuyor.
Acil olmayan işler tarayıcı boşta kaldığında çalışıyor, DOM değişikliklerinden sonraki yeniden renderlar debounce ediliyor, carousel başlamadan render edilen kart sayısı sınırlanıyor ve iskelet kategori sayfalarında layout kaymasını sıfırda tutuyor.
Yeni bir marka tek bir config dosyası: yerleşim seçicileri, referans slider ve kart, rozet ve görseller için özel etiketler, carousel seçenekleri, özel CSS. Aramalı bir doküman sitesi her anahtarı açıklıyor; kurulum bana bağlı değil.
Full-stack ve uygulamalı AI rollerine açığım, uzaktan veya hibrit.
Rolü, ekibi ve problemi anlat.