جستجو

تقویم شمسی برای ناپ‌کامرس

اگر از طریق موتورهای جستجو وارد این صفحه شده اید، به این معنی هست که حتما با سیستم ناپ‌کامرس آشنایی دارید، برای آشنایی بیشتر می توانید به صفحات مربوط به معرفی ناپ‌کامرس مراجعه کنید.

به طور خلاصه ناپ‌کامرس یک فروشگاه ساز متن باز بین الملی هست که از فروشگاه های خرد تک محصولی تا فروشگاه های چند ملیتی و چندزبانه بزرگ پشتیبانی می کند. در سال اخیر ناپ‌کامرس در کامیونیتی فارسی به سرعت در حال رشد هست و افراد زیادی برای راه اندازی کسب و کار آنلاین خود از این سیستم استفاده می کنند.

ناپ‌کامرس به صورت پیش فرض از زبان ها و فرهنگ و تقویم های مختلف پشتیبانی می کند و زبان فارسی و تقویم شمسی هم از این قاعده مستثنی نیست. ناپ کامرس به خوبی ورودی های تاریخ شمسی را دریافت می کند و در نمایش تاریخ های شمسی به کاربران مشکلی ندارد. در مورد تاریخ شمسی در ناپ کامرس  و نمایش صحیح تاریخ شمسی در گریدهای ناپ کامرس قبلا صحبت شده است.

 

مشکل کامپوننت تقویم در ناپ‌کامرس

مشکلی که دریافت تاریخ شمسی وجود دارد این هست که کامپوننت وارد کردن تاریخ، تقویم شمسی را به درستی نمایش نمی دهد، که البته این مورد هم مربوط به ناپ کامرس نیست. همان طور که اطلاع دارید ناپ کامرس در پنل کاربری مدیریت، از کامپوننت های Kendo-UI  استفاده میکند. datetimepicker  در kendoui  از تقویم شمسی پشتیبانی نمی کند، به همین دلیل ورودی هایی که با این کامپوننت وارد می شوند به اشتباه ذخیره می شوند. دلیل این هم این هست که ناپ کامرس انتظار دارد که یک تاریخ با فرمت شمسی دریافت کند.

 

در تصویر زیر می بینید که ورودی از تقویم به چه صورتی در دیتابیس ذخیره می شود:

 

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

 

انتخاب کامپوننت مناسب

کامپوننتی که انتخاب می شود باید قابلیت دریافت تاریخ و زمان را داشته باشد، همچنین با وضعیت فعلی پنل و سایر استایل ها هم خوانی داشته باشد. ده سال قبل لیست کامپوننت های تقویم را استخراج کرده بودم، از آن سال خیلی تغییری در لیست پروژه های متن باز و عمومی به وجود نیامده است. برای استفاده در ناپ کامرس به دلیل آنچه که در بالا آمده است بهتر است از MD.BootstrapPersianDateTimePicker استفاده شود، به دلیل اینکه

  • دریافت تاریخ و زمان را یکجا دارد
  • هم از تقویم میلادی و هم از تقویم شمسی پشتیبانی می کند
  • بر بستر بوت استرپ توسعه داده شده است که با پنل مدیریت ناپ کامرس هم خوانی دارد

به دلیل اینکه از نسخه 3 بوت استرپ  در پنل مدیریت استفاده می شود (آپدیت نشده است) ما هم مجبوریم از نسخه ای مطابق با آن استفاده کنیم. (لینک نسخه 3)

مطابق با نسخه demo  اقدام می کنیم.

 

اضافه کردن فایل مورد نیاز

همان طور که در بالا گفته شد، به دلیل اینکه پنل مدیریت هم از بود استرپ استفاده می کند، نیازی به اضافه کردن فایل های بوت استپرپ اضافه شود و فقط فایل های مورد نیاز کامپوننت اضافه می شود

این سه فایل نیاز هست که سلوشن اضافه شود:

بعد ازاضافه کردن به سلوشن نیاز هست که به پروژه اضافه شود. فایل های استاتیک در پنل مدیریت در فایل مسترپیج مدیریت _AdminLayout.cshtml اضافه می شود

\Presentation\Nop.Web\Areas\Admin\Views\Shared\_AdminLayout.cshtml

فایل CSS

;Html.AppendCssFileParts($"~/css/admin/jquery.Bootstrap-PersianDateTimePicker.css")

فایل های JS

;Html.AppendScriptParts("~/js/jalaali.js")
;Html.AppendScriptParts("~/js/jquery.Bootstrap-PersianDateTimePicker.js")

 

 

اصلاح فایل قالب ورودی تاریخ

همان طور که در مطلب قبلی توضیح داده شد، هر کدام از فیلدهای ورودی دارای فایل قالب هستند، فایل قالب برای ورود تاریخ (نال پذیر) فایل DateTimeNullable.cshtml هست.

فایل قالب در مسیر زیر قراردارند

Presentation\Nop.Web\Areas\Admin\Views\Shared\EditorTemplates

فایل به صورت زیر تغییر می کند

برای مشاهده کد کلیک کنید

  • از خط 3 تا 12 نحوه نمایش تکست باکس و دکمه تقویم را اصلاح می کنیم
  • در خط 9 class  را برای نمایش صحیح اضافه می کنیم
  • همچنین در خط 9 فرمت نمایش تقویم را مشخص می کنیم ("yyyy/MM/dd hh:mm:ss tt") این مقدار باید با فرمت کامپوننت یکسان باشد.
  • خط 14 کالچر فعلی کاربر را می گیریم
  • در خط 16 بررسی می کنیم که آیا کاربر در وضعیت فارسی قرار دارد، در صورتی که مثبت هست کامپوننت جدید را نمایش می دهیم در غیر این صورت کامپوننت kendoui  نمایش داده می شود
  • از خط 20 تا 27 نحوه نمایش کامپوننت تاریخ نمایش داده می شود

در نهایت در صورتی که در حالت زبان فارسی قرارداشته باشید، به این صورت نمایش داده می شود

 

دو نکته بسیار مهم

 

  • کامپوننت MD.BootstrapPersianDateTimePicker در نسخه بوت استرپ 3 خطایی دارد که من در این pull request  اون رو حل کردم، ممکن هست زمانی که شما از این کامپوننت استفاده می کنید، merge  نشده باشد و خودتان باید دستی این دو خط را اصلاح کنید
  • اگر کامپوننت در جای درست خود قرار نگرفت و به گوشه ای افتاد لازم هست تغییرات انجام شده در این لینک را لحاظ کنید

 

در صورتی که نیاز به راهنمایی و همکاری دارید، با ما تماس بگیرد

انصراف از نظر
نظرات
14/02/1401 11:38 ق.ظ
سلام این کار برای ورژن جدید هم شدنی است؟
22/02/1401 07:14 ب.ظ
سلام، تصاویر برای 4.3 هست، ولی فکر می کنم بدون مشکل روی نسخه های دیگه هم قابل اجرا باشه
آرشیو بلاگ
Filters
Sort
display