امیرحسین مرجانی

اصلاح تاریخ شمسی در گرید های ناپ‌کامرس

برای مشاهده آموزش اصلاح DatetimePicker  تاریخ شمسی کلیک کنید

اگر به دنبال پروژه های متن باز و راه اندازی فروشگاه اینترنتی بوده اید، حتما با حال اسم NopCommerce  به گوش شما خورده است، پروژه بی نظیری که تصمیم دارم از این به بعد بیشتر در موردش صحبت کنم و بنویسم. آشنایی من با این پروژه بر می گرده به حدود شش سال پیش [پروژه مترجم فایل های ناپ‌کامرس]، آن زمان که نسخه 3.9 منتشر شده بود، آن زمان به درخواست یکی از عزیزان به دنبال راه اندازی فروشگاه اینترنتی با قابلیت پذیریش بیت کوین بودم. کار جدی من با نسخه 4.2 برای سایت آروان چوب، نسخه 4.3 برای فروشگاه اینترنتی طب تیک، و نسخه 4.4 برای فروشگاه دنسیس بوده است.

یکی از دغدغه هایی که در پروژه های متن سازی بین المللی وجود دارد، بومی سازی پروژه های برای مصرف داخل هست، پروژه ناپ‌کامرس به خوبی از چند زبانگی (multi languages) و چند محلی (multicultural) پشتیبانی می کند و برای استفاده در محیط فارسی و شمسی نیاز به تغییر زیادی ندارد، و اکثر تغییرات به صورت خودکار اعمال می شود.

برای نمایش صحیح تاریخ شمسی در گرید های ناپ کامرس لازم هست یک تغییر جزیی اعمال شود.

همانطور که می دانید پروژه ناپ‌کامرس برای نمایش گریدها از کتابخانه قدرتمند datatables  استفاده می کند، همچنین برای نمایش تاریخ و پیشتیبانی از چندمحلی از کتابخانه moment  استفاده می کند، و به همین دلیل تغییرات بسیار ساده اعمال می شود.

تمامی گرید های ناپ کامرس توسط یک Partial View  به نام Table  ساخته می شود، این به این معنی هست که با یک بار تغییر می توان این مسئله را در کل پروژه اصلاح کرد. در ویو Table  یک Partial  دیگر وجود به نام _Table.Definition.cshtml دارد که ساختار گرید را مشخص می کند.

در صورتی که تنظیمات سرور به درستی انجام شده باشد، مشخصات کالچر به صورت صحیح در این خط تنظیم می شود.

    //the locale which MomentJS should use
    var locale = CultureInfo.CurrentCulture.Name;

در نسخه های قبلی نیاز بود که این مقدار به صورت دستی به شکل زیر تغییر کند.

    //the locale which MomentJS should use
    var locale = "fa";

فیلد تاریخ در جداول به صورت Text  با Render از نوع Date مشخص می شود و نتیجه متن تاریخ نهایی در خط زیر مشخص می شود.

case RenderDate date:
    <text>
         render: function (data, type, row, meta) {
            return (data) ? moment(data).locale('@locale').format('@date.Format') : null;
         },
    </text>
    break;

همانطور که ملاحظه می کنید همه تنظیمات به صورت پیش فرض وجود دارد و تنها نیاز هست که پلاگین تاریخ شمسی به moment  اضافه شود. چندین پلاگین تاریخ شمسی توسط اساتید نوشته شده است که من از jalali-calendar  در پروژه ها استفاده می کنم، به دلیل اینکه همه تنظیمات قبلا انجام شده است با اضافه کردن پلاگین شمسی تاریخ ها به صورت صحیح به شمسی نمایش داده می شود.

نتیجه را تصویر زیر مشاهده می کنید

بعد از اعمال تغییرات و نمایش تاریخ شمسی

 

قبل از اعمال تغییرات و تاریخ میلادی

بنا دارم از این به بعد در مورد ناپ کامرس و تجربیاتم بیشتر بنویسم، اگر شما هم سوالی در این مورد دارید بفرمایید، در حد توانم پاسخ می دهم.

معرفی محصولات و مواد اولیه صنعتی

برای مشاهده آموزش اصلاح DatetimePicker  تاریخ شمسی کلیک کنید

1 دیدگاه

  1. سلام
    من این کارها رو برای ناپ کامرس 4.50.1 انجام دادم ولی نتیجه ای نداد.
    آیا شما برای این ورژن انجام دادید؟
    شما jalali-calendar را با چه روشی به ناپ اضافه کرده اید؟
    ممنون می شم راهنمایی کنید!

  2. سلام
    من جلالی مامنت رو اضافه کردم ولی ثانیه رو درست نمایش نمی ده.
    می شه بگید شما کجا رو تغییر دادید که درست نمایش می ده؟
    ممنون!

پاسخی بنویسید

ده + 19 =