← Tüm projeler Vaka çalışması · E-posta editörü

E-posta ürün bloğu

Panelin sürükle-bırak e-posta editörü için bir blok. Pazarlamacı bir ürün linki yapıştırıyor, blok ürünün başlığı, fiyatı, görseli ve açıklamasıyla kendini dolduruyor; bir, iki ya da üç ürünlük düzende.

  • 4blok varyantı
  • 3editör kategorisi
  • ~1,8 binsatır, sıfırdan
  • Oca–May2026
Deneyin

Ürün linklerinden bir e-posta kurun

Bir ürün bloğunu e-postaya sürükleyin, bir ürün linki seçin ve dolmasını izleyin. Linklerden biri bilerek hata veriyor.

panel.example / email / editor · sentetik ürünlerEtkileşimli demo
Etkileşimli editör için JavaScript gerekiyor. Blok paleti, e-posta tuvali ve yapıştırılan ürün linkinin bir ürün bloğunu doldurduğu bir ayar paneli gösteriyor.
Ürün sayfaları simüle ediliyor. Canlıda blok bir scrape servisini çağırıyor ve panelin React e-posta editörü içinde çalışıyor.
Sorun

Bir ürünü kampanya e-postasına koymak, başlığını, fiyatını ve görselini tek tek elle kopyalamak demekti.

Fiyatlar değişiyor, görseller yeniden yükleniyor ve e-postadaki yanlış bir fiyat bir destek talebi demek. E-posta editörü kendi blok ve ayar paneli sistemi olan üçüncü taraf bir editör; yeni bloğun onu çatallamak yerine genişleme noktalarına oturması gerekiyordu.

Rolüm

Bloğu uçtan uca ben oluşturdum: temel blok ve bir, iki, üç ürünlük şablonlar, Content, Layout ve Ecommerce kategorilerindeki yerleri ve ayar paneli. Önce sahte veriyle kurdum, sonra gerçek scrape API'sine geçirdim ve düzenleme akışını birkaç sürüm boyunca geliştirdim.

Mimari

Linkten e-posta HTML'ine

  1. BlokEditöre dört varyant ve varsayılan değerlerle kayıtlı.
  2. Ayar paneliLink alanları, görünürlük anahtarları, buton ve düzen ayarları; seçili bloğun farkında.
  3. Scrape servisiMevcut backend endpointi ürün sayfasını okur.
  4. Doldur + renderBloğa eşlenir ve tablo tabanlı e-posta HTML'i olarak dışa aktarılır.

Mor ton: benim yazdığım kısımlar.

Mühendislik kararları

Zor olan neydi, ne yaptım

Editörü çatallama, genişlet

Editör kendi ayar paneli bileşenleriyle geliyor. Onları yapılandırma yöneticisi üzerinden, yalnızca bir kez sarılacak şekilde bir korumayla sardım; yanlış paneli gösteren bir kayıt uyumsuzluğu böyle düzeldi.

Önce sahte veri, sonra gerçek API

İlk branch arayüz erkenden incelenebilsin diye sahte ürün verisiyle çalıştı. İkincisi scrape API'sine geçti, sürükle-bırakı düzeltti ve cross-origin istekte cookie göndermeyi bıraktı.

Güncelleme döngüsü yok

Bloğa geri yazılan varsayılan değerler ayar panelini tetikliyor, o da onları yeniden yazıyordu. Blok artık yalnızca gerçekten değişen değerleri yazıyor.

Bağlama duyarlı düzenleme

Sonraki sürümler ayar panelini bloğun nerede durduğundan haberdar etti; iki sütunlu bir düzendeki ürün orada anlamlı olan ayarları gösteriyor.

Çö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.