Pazarlamacıların kod yazmadan kurduğu dönüşüm widgetları. Deal of the Day V2'yi sıfırdan geliştirdim: pazarlamacının ayarlarını kendi kendine yeten bir mağaza scriptine çeviren, yazdıkça güncellenen canlı önizlemeli bir builder. Ekibin panelindeki widget ailesinin geri kalanında da çalıştım.
847commit, ekip paneline
6ürün kaynağı
4kampanya başına en fazla ürün
0backend veya şema değişikliği
Deneyin
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.
Etkileşimli builder için JavaScript gerekiyor. Bir ayar formu, iframe içinde canlı mağaza önizlemesi, üretilen widget scripti ve diğer widgetlardan bir galeri gösteriyor.
Canlı üründeki oluşturucu ekibin panelinde React ile yazıldı. Bu yeniden kurulum aynı fikri kullanıyor: ayarlar girer, kendi kendine yeten bir script çıkar, önizleme postMessage ile çalışır.
Sorun
Pazarlamacılar kendileri değiştirebilecekleri, ürünleri elle seçilen ya da otomatik dolan bir günün 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
Deal of the Day V2'yi 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; akıllı widget dashboard'unu yeni tasarıma göre yeniden kurdum.
Mimari
Formdan mağazaya
Builder durumuBaşlık, sayaç, düzen, renkler ve seçiciden ya da otomatik kaynaktan en fazla dört ürün.
DerlemeDurum, config'i içine gömülü tek bir vanilla JS widget'a dönüşür.
ÖnizlemeBir iframe her değişikliği postMessage ile alır ve yeniden render eder.
KayıtScript mevcut widget kaydında metin olarak saklanır.
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.
Mühendislik kararları
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.
Çözmeye değer bir problemin mi var?Birlikte çözelim