illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 109 ۲۱ آبان ۹۵

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 : مشخص کردن تعداد این کالا

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram