آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 19) - آموزش قرار دادن صورت حساب یا فاکتور

- visibility ٠ mode_comment

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.

در جلسه قبل در مورد قرار دادن تصویر و Spacer صحبت کردیم و توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن صورت حساب یا فاکتور با استفاده از تگ mj-invoice، توضیحاتی رو خدمتتون بیان کنیم.

صورت حساب یا فاکتور با استفاده از تگ mj-invoice

با استفاده از این تگ میتونین جدولی رو درون ایملتون قرار بدین که فاکتور یا صورتحسابی رو به مشتری یا کاربر نشون میده. این تگ قابلیت این رو داره که خودش محاسبات مربوط به قیمت کل رو حساب کنه و نمایش بده. بیشتر مواقع شما کالایی رو درون سایتتون به کاربر میفروشید و میخاید که فاکتوری با استفاده از ایمیل برای کاربر فرستاده بشه. کد زیر رو در نظر بگیرید:

همونطور که دیدید درون ستون موجود، تگ mj-invoice رو قرار دادیم و با استفاده از ویژگی format، فرمت واحدپولی که مورد استفاده قرار میگیره رو مشخص کردیم. همچنین با استفاده از ویژگی intl مشخص کردیم که عنوان ستون اول برابر با Product Name باشه. درون mj-invoice دو تا تگ mj-invoice-item قرار دادیم و میتونستیم بیشتر هم قرار بدیم. هر آیتم نقش یک کالا رو بازی میکنه. آیتم اول نامش TV هست و قیمت یا price اون 549 پوند هست. تعداد یا Quantity اون هم 1 عدد هست. آیتم یا کالای دوم یک DVD هست که قیمت اون 22.99 پوند و 2 عدد هست. خروجی بصورت زیر میشه:mjml invoice

میبینید که درون یک جدول زیبا، تمامی کالاها نمایش داده شده و در ردیف آخر جمع کل قیمت بصورت اتوماتیک و بدون دخالت ما حساب شده. بهمین راحتی میتونین کالاهای دیگه هم اضافه کنید و این ابزار محاسبات رو برای شما انجام میده و به کاربران نمایش میده. ویژگی های زیر برای تگ mj-invoice کاربرد داره:

  • align : ترازبندی کل فاکتور رو مشخص میکنه و بصورت پیش فرض در سمت چپ قرار داره
  • color : رنگ عنوان فاکتور و متن ردیف آخر رو مشخص میکنه
  • font-family : میتونین فونت متن رو مشخص کنید
  • font-size : میتونین سایز فونت رو مشخص کنید
  • line-height : فاصله بین خطوط رو مشخص میکنه
  • border : میتونین نوع border برای عنوان و فوتر جدول رو مشخص کنید
  • padding
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
  • intl : عناوین فاکتور یا جدول رو مشخص میکنید. مقدار پیش فرض اون “name:Name;quantity:Quantity;price:Price” هست و میتونین یکی یا همه اونا رو تغییر بدین
  • format : با استفاده از این ویژگی مشخص میکنید که قیمت کل نهایی با چه فرمتی نمایش داده بشه. این فرمتها بر اساس numeraljs هستن.

ویژگی هایی که برای mj-invoice-item مورد استفاده قرار میگیرن:

  • color : رنگ متن رو مشخص میکنه
  • text-align : میتونین ترازبندی متن رو تغییر بدین
  • name : مشخص کردن نام آیتم یا کالا
  • price : مشخص کردن قیمت آیتم یا کالا (باید مطابق با فرمت نهایی باشه)
  • quantity : مشخص کردن تعداد این کالا

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.