← Tüm projeler Vaka çalışması · Widget oluşturucu

Akıllı widgetlar

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.

panel.example / widgets / deal-of-the-day · sentetik veriEtkileşimli demo
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

  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.

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

Konuşmaya başla

Full-stack ve uygulamalı AI rollerine açığım, uzaktan veya hibrit.

Rolü, ekibi ve problemi anlat.