بدء الاستخدام مع Email-Builder-js

الطريقة الموصى بها لتثبيت مكتبة Email-Builder-js هي باستخدام NPM. يرجى استخدام الأمر التالي للحصول على تثبيت سلس.

npm install --save @usewaypoint/email-builder
 

إنشاء تصميم قالب بريد إلكتروني قائم على المكونات

في صميم مكتبة Email-Builder-js مفتوحة المصدر يكمن تركيزها على المكونات. باستخدام هذا النهج، يمكن لمطوري البرمجيات إنشاء أجزاء قابلة لإعادة الاستخدام مثل رؤوس الصفحات، وتذييلاتها، وأقسام المحتوى، والأزرار. يمكن دمج هذه المكونات وتبديلها بسهولة لتكوين قالب كامل. من خلال تقسيم التصميم بهذه الطريقة، لا يصبح الكود منظمًا بشكل أفضل فحسب، بل يصبح أيضًا أبسط في تحديث وإدارة القوالب الخاصة بك. في المثال التالي، يتم إنشاء كل مكون على حدة، مما يسمح بتركيب مرن وتحديثات مستقبلية دون تغيير الهيكل الكامل.

 
const EmailBuilder = require('email-builder-js');

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
مرحبًا بكم في منصتنا!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
نحن متحمسون لانضمامك إلينا. استمتع بميزاتنا!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
مع أطيب التحيات,
الفريق
',
  style: { color: '#999', textAlign: 'center', padding: '10px' },
});

// Combine components into a template
const template = email.buildTemplate({
  components: [header, mainContent, footer],
});

// Output the complete HTML template
console.log(template);
 

تطبيق تنسيق مخصص وعلامة تجارية على القوالب

لضمان توافق قوالب البريد الإلكتروني مع هوية التطبيق، تتيح مكتبة Email-Builder-js تخصيصًا واسعًا من خلال سمة style لكل مكوّن. يشمل ذلك تعديل الألوان، الخطوط، الأحجام، وتخطيطات القوالب. يمكن للمطورين استخدام التنسيق المضمّن (inline styling)، وهو أمر حاسم لضمان عرض عملاء البريد الإلكتروني للتصاميم كما هو مقصود. يخلق المقتطف البرمجي التالي زرًا بلون خلفية، وحشو، وزوايا مستديرة، مُصممًا ليشبه زر الدعوة إلى اتخاذ إجراء النموذجي الذي يتماشى مع ألوان العلامة التجارية.

 
const button = email.createComponent({
  tag: 'a',
  content: 'Click Here to Get Started',
  attributes: { href: 'https://example.com/get-started' },
  style: {
    display: 'inline-block',
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: '#fff',
    textDecoration: 'none',
    borderRadius: '5px',
    textAlign: 'center'
  },
});

const template = email.buildTemplate({
  components: [button],
});

console.log(template);
 

حقن محتوى ديناميكي إلى رسائل البريد الإلكتروني في Node.js

بالنسبة للتطبيقات التي ترسل رسائل بريد إلكتروني مخصصة، مثل تأكيدات الطلب أو الإشعارات الخاصة بالمستخدم، تدعم مكتبة Email-Builder-js المفتوحة المصدر حقن المحتوى الديناميكي. يمكن للمطورين إدراج معلومات خاصة بالمستخدم (مثل الأسماء، العنوان أو تفاصيل الشراء) في القوالب برمجيًا، مما يتيح إنشاء رسائل بريد إلكتروني أكثر جاذبية وملاءمة. باستخدام القوالب النصية (template literals)، يمكن للمطورين بسهولة استبدال العناصر النائبة بالمحتوى الديناميكي. هذا النهج فعال للغاية للرسائل البريدية المعاملاتية وأي حالة تكون فيها التخصيص أمرًا أساسيًا كما هو موضح في المثال التالي.

 
const userName = 'John Doe';
const product = 'Premium Subscription';

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
مرحبًا ${userName},
شكرًا لشرائك ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

const template = email.buildTemplate({
  components: [personalizedContent],
});

console.log(template);