Site içi widget'lar

Bir kampanya kurun, önizlemeyi izleyin

Kaynağı, düzeni ya da rengi değiştirin; önizleme postMessage ile yeniden render ediliyor. Neyin kaydedildiğini görmek için "Üretilen script"i açın.

Sorun

Pazarlamacılar kendileri değiştirebilecekleri, ürünleri elle seçilen ya da otomatik dolan bir günlük fırsat bloğu istiyordu.

İlk sürüm sınırlıydı; her yeni düzen ya da kaynak bir geliştirici gerektiriyordu. Yeni sürümün de build adımı ve ortak çalışma zamanı olmayan mağazalarda çalışması ve veritabanı değişikliği olmadan yayınlanması gerekiyordu.

Rolüm

Günlük fırsat widget'ının yeni sürümünü uçtan uca ben oluşturdum: builder arayüzü, widget scriptini üreten derleyici, iframe önizleme ve mağaza tarafındaki çalışma zamanı. Aynı panelde ekip arkadaşlarımın başlattığı sosyal kanıt, geri sayım, çekmece, çarkıfelek, sabit bar, upsell ve çıkış niyeti widgetlarında çalıştım; site içi widget dashboard'unu yeni tasarıma göre yeniden kurdum.

Formdan mağazaya

1. Builder durumuBaşlık, sayaç, düzen, renkler ve seçiciden ya da otomatik kaynaktan en fazla dört ürün.
2. DerlemeDurum, config'i içine gömülü tek bir vanilla JS widget'a dönüşür.
3. ÖnizlemeBir iframe her değişikliği postMessage ile alır ve yeniden render eder.
4. KayıtScript mevcut widget kaydında metin olarak saklanır.
5. MağazaMevcut yükleyici onu markanın sayfalarına ekler.

Mor ton: benim yazdığım kısımlar. Kayıt ve yükleme mevcut widget hattını kullanıyor.

Zor olan neydi, ne yaptım

Yorumlama değil derleme

Ayarları API'den okuyan genel bir çalışma zamanı yerine builder config'i içinde olan, kendi kendine yeten bir script üretiyor. Mağazalar tek dosya yüklüyor; mevcut kayıt ve yükleme hattı yeni bir tablo ya da alan gerektirmedi.

Canlıyla aynı önizleme

Önizleme üretilen kodun aynısını bir iframe içinde çalıştırıyor; pazarlamacılar müşterinin göreceğini görüyor. Güncellemeler debounce edilmiş postMessage ile gidiyor ve üst sayfa yalnızca kendi iframe'inden gelen mesajları kabul ediyor.

Otomatik ürün kaynakları

Elle seçimin yanında bir kampanya kendini çok satanlar, öneriler, yeni gelenler, trendler ya da indirime girenlerle doldurabiliyor; blok her gün düzenleme gerekmeden güncel kalıyor.

Ortak bir kod tabanında çalışmak

Panelin çok sayıda katkıcısı ve uzun bir geçmişi var. Değişiklikleri dar tuttum, branch ve review kurallarına uydum, bir çarkıfelek hotfix'i gibi canlı sorunları diğer widgetları bozmadan düzelttim.