یکی از ویژگی های ناپ کامرس معماری ماژولار و چند لایه بودن آن است که اجازه می دهد قابلیت اضافی و عناصر نمایشی بصورت پویا در زمان اجرا به برنامه اضافه شود. معمماری ماژولار بودن ، ایجاد افزونه و مدیریت فروشگاه ساز ناپ کامرس را ساده می کند. حال ببیینم این کار چطور انجام می شود.
پلاگین در ناپ کامرس چیست ؟
افزونه ها برای توسعه قابلیت های ناپ کامرس استفاده می شوند. ناپ کامرس چندین نوع پلاگین (افزونه) دارد. برای مثال: روش های پرداخت (مانند بانک ملت، سامان، پاسارگاد، پی پال) ، ارائه دهندگان مالیات ، روش های محاسبه هزینه ارسال (مانند ایران مارکت سنتر ، فروتل) ، ابزارک ها یا ویجیت ها (مانند چت آنلاین) و خیلی موارد دیگر. ناپ کامرس هم اکنون با انواع افزونه ها منتشر شده است. شما می توانید انواع افزونه ها را در سایت ناپ کامرس (nopShop.ir) جستجو کنید تا ببینید قبلا افزونه ای طراحی شده است که مورد نیاز شما باشد.
نام پیشنهادی برای پروژه پلاگین "Nop.Plugin.{Group}.{Name}" است. {Group} گروه پلاگین (برای مثال “Payment” ، "Shipping” ). است. {Name} نام پلاگین شماست (برای مثال "Mellat"). برای مثال درگاه پرداخت بانک ملت نامNop.Plugin.Payments.Mellat است. اما توجه داشته باشید که آن اجباری نیست و شما می توانید هر نامی برای پلاگین انتخاب کنید. برای مثال "MyBestPlugin".
ساختار پلاگین و فایلهای مورد نیاز
اولین کاری که شما باید انجام دهید این است که یک پروژه "Class Library" جدید در solution ایجاد کنید. بهترین کار این است که همه پلاگین ها را در پوشه \Plugins در فهرست ریشه قرار دهید. (با پوشه \Plugins در زیر پوشه in \Nop.Web که برای پلاگین های کامپایل شده استفاده می شود اشتباه نگیرید).
مراحل ایجاد پلاگین سفارشی جدید در ناپ کامرس
مرحله 1) پروژه ناپ کامرس را در ویژوال استودیو باز کنید (به یاد داشته باشید که به سورس کد کامل نیاز دارید)
مرحله 2) راست کلیک روی پوشه Plugins -->گزینه Add -->گزینه New Project
مرحله 3) در پنجره افزودن پروژه جدید گزینه .NET Framework 4.5.1 را انتخاب کنید.
- انتخاب Visual C#
- انتخاب Class Library
مرحله 4) نام پلاگین را وارد کنید و محل آنرا بصورت زیر تعیین کنید:
در این مورد نام پلاگین را بصورت رویرو وارد کنید: Nop.Plugin.Misc.MyCustomPlugin
محل: روی دکمه “Browse” کلیک کنید و پوشه Plugins را انتخاب کنید. این پوشه حاوی سورس کد همه پلاگین ها است (پوشه داخل Nop.Web که حاوی فایل های dll کامپایل شده است اشتباه نگیرید.)
مرحله 5) شما باید پروژه پلاگین سفارشی خود را مانند شکل زیر در پنجره solution explorer ببینید:
مرحله 6) reference ها را وارد کنید. راست کلیک روی References -->Add Reference…
همه reference ها را وارد کنید (مانند شکل زیر). در صورتی که reference های مورد نیاز را پیدا نکردید ، به سایر پلاگین ها که آنها را دارند نگاه کنید و رفرنس ها را از آنجا بدست آورید.
مرحله 7) پلاگین سفارشی خود را در ساختار مناسب پیکربندی کنید.
توضیحات: مرحله بعدی ایجاد فایل Description.txt است که برای هر پلاگینی مورد نیاز است. این فایل شامل اطلاعات و شرح پلاگین شما است. این فایل را از سایر پلاگین ها کپی کنید و آنرا بر اساس نیاز خود تغییر دهید.
Group: Misc
FriendlyName: MyCustomPlugin
SystemName: MyCustomPlugin
Version: 1.00
SupportedVersions: 3.70
Author: Lavish Kumar
DisplayOrder: 1
FileName: Nop.Plugin.Misc.MyCustomPlugin.dll
Web.config : یک فایل web.config ایجاد کنید و مطمئن شوید که بصورت copied to output تنظیم شده است. این فایل را از سایر پلاگین های موجود کپی کنید.
مرحله 8) یک کلاس به نام MyCustomPlugin.cs ایجاد کنید و کدهای زیر را در آن وارد کنید:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Routing;
using Nop.Core.Plugins;
using Nop.Services.Common;
namespace Nop.Plugin.Misc.MyCustomPlugin
{
public class MyCustomPlugin: BasePlugin, IMiscPlugin
{
/// <summary>
/// Gets a route for provider configuration
/// </summary>
/// <param name="actionName">Action name</param>
/// <param name="controllerName">Controller name</param>
/// <param name="routeValues">Route values</param>
public void GetConfigurationRoute(out string actionName, out string controllerName, out RouteValueDictionary routeValues)
{
actionName = "Configure";
controllerName = "MyCustomPlugin";
routeValues = new RouteValueDictionary { { "Namespaces", "Nop.Plugin.Misc.MyCustomPlugin.Controllers" }, { "area", null } };
}
}
}
مرحله 9) کلاس MyCustomPluginController.cs را در پوشه Controllers در داخل پلاگین ایجاد کنید و کدهای زیر را در آن وارد کنید:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
using Nop.Web.Framework.Controllers;
namespace Nop.Plugin.Misc.MyCustomPlugin.Controllers
{
[AdminAuthorize]
public class MyCustomPluginController : BasePluginController
{
public ActionResult Configure()
{
return View("/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml");
}
}
}
مرحله 10) Configure.cshtml (View) را داخل پوشه Views اضافه کنید. در این مورد یک view خالی ایجاد می کنیم.
نکته: مطمئن شوید خصوصیتoutput directory در فایلConfigure.cshtml مقدار “Copy if newer” تنظیم شده است.
مرحله 11) روی پروژه "Nop.Plugin.Misc.MyCustomPlugin" راست کلیک کنید و گزینه "Properties" را انتخاب کنید.
مطمئن شوید نام اسمبلی و اسمبلی پیش فرض بصورت زیر باشد (همراه با .NET Framework) :
به زبانه "Build" در سمت چپ پنجره properties بروید:
به سمت پایین روی "Output" پیمایش کنید و مطمئن شوید که مسیر بصورت زیر است:
مانند:
..\..\Presentation\Nop.Web\Plugins\Misc.MyCustomPlugin\
مرحله 12) مطمئن شوید که همه چیز ذخیره شده و ساختار آن شبیه زیر است :
مرحله 13) روی پروژه پلاگین سفارشی خود راست کلیک کنید و گزینه “Build” را انتخاب کنید.
مرحله 14) بعد از re-building کردن پروژه ، کل solution را اجرا کنید و به بخش مدیریت بروید و روی "خالی کردن کش" کلیک کنید.
مرحله 15) به بخش افزونه ها بروید و روی دکمه "بارگزاری لیست افزونه ها" کلیک کنید:
مرحله 16) اگر به سمت پایین پیمایش کنید ، باید بتوانید پلاگین سفارشی جدید خود را در لیست افزونه ها ببینید. روی دکمه نصب در پلاگین سفارشی خود کلیک کنید.
مرحله 17) روی دکمه پیکربندی پلاگین سفارشی خود کلیک کنید:
اگر همه چیز به درستی و بدون مساله کار کند، شما باید بتوانید صفحه زیر را ببینید:
در بخش اول آموزش مقدماتی طراحی پلاگین ناپ کامرس ، مبانی پلاگین ناپ کامرس شامل نحوه طراحی یک پلاگین ساده را یاد گرفتیم. در این بخش تعدادی ویژگی و قابلیت پیشرفته که هر توسعه دهنده ای می تواند با استفاده از پلاگین ناپ کامرس انجام دهد را شرح می دهیم.
موضوعاتی که در این مقاله شرح خواهیم داد:
- روش افزودن گزینه های منو به بخش مدیریت سایت از طریق پلاگین
- رونویسی (override) view پیش فرض از طریق پلاگین
- روش افزودن ارجاعات JS و CSS در پلاگین
روش افزودن گزینه های منو به بخش مدیریت سایت از طریق پلاگین
اصولا همه گزینه های منو که در بخش مدیریت ناپ کامرس نمایش داده می شود در فایل sitemap.config در پوشه Nop.Admin ذخیره شده است.
برای افزودن گزینه منو به بخش مدیریتی از طریق پلاگین سفارشی ، نیاز به پیاده سازی IAdminMenuPlugin در کلاس اصلی پلاگین ها است.
کد زیر کد اصلی کلاس پلاگین در MyCustomPlugin.cs است:
public class MyCustomPlugin : BasePlugin, IMiscPlugin
همراه با این ، ما همچنین مانند زیر به ارجاع به Nop.Web.Framework.Menu نیاز داریم:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Routing;
using Nop.Core.Plugins;
using Nop.Services.Common;
using Nop.Web.Framework.Menu;
توسط افزودن کد زیر در MyCustomPlugin.cs گزینه منو را اضافه خواهیم نمود:
public void ManageSiteMap(SiteMapNode rootNode)
{
var menuItem = new SiteMapNode()
{
SystemName = "MyCustomPlugin",
Title = "MyCustomPlugin Title",
ControllerName = "MyCustomPlugin",
ActionName = "Configure",
Visible = true,
RouteValues = new RouteValueDictionary() { { "area", null } },
};
var pluginNode = rootNode.ChildNodes.FirstOrDefault(x => x.SystemName == "Third party plugins");
if (pluginNode != null)
pluginNode.ChildNodes.Add(menuItem);
else
rootNode.ChildNodes.Add(menuItem);
}
پلاگین را rebuild کنید و به بخش مدیریتی سایت بروید:
گزینه منوی خود را در اینجا خواهیم دید:
روش رونویسی view پیش فرض از طریق پلاگین
این یکی از سوالات متداول توسعه دهندگان از انجمن ناپ کامرس است ، همانطوری که اکثر می دانید این یک کار پیچیده است. اما در واقعیت هنگامی که ASP.NET MVC و ساختار فایلهای ناپ کامرس را بدانیم ، رونویسی view پیش فرض از طریق پلاگین کاملا ساده خواهد بود.
در این مقاله ، تلاش خواهیم کرد تا view صفحه نخست پیش فرض که در اینجا خواهید دید را رونویسی کنیم:
یک پوشه Home در داخل پوشه View در پلاگین سفارشی خود ایجاد کنید و به سادگی View پیش فرض صفحه نخست (Index.cshtml) را مانند زیر از Nop.Web کپی و Paste کنید.
اکنون ، عنوان تست را در View صفحه نخست اضافه می کنیم ، بنابراین ما می دانیم کدام view از پلاگین می آید.
<h1>This view is coming from plugin</h1>
کد view صفحه نخست در پلاگین شبیه زیر خواهد بود:
@using System;
@using System.Collections.Generic;
@using Nop.Core.Domain.Seo;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework.UI;
@using System.Web.Mvc;
@using Nop.Web.Framework;
@using Nop.Web.Framework.Mvc;
@{
Layout = "/Views/Shared/_ColumnsOne.cshtml";
//page class
Html.AppendPageCssClassParts("html-home-page");
}
<div class="page home-page">
<div class="page-body">
<br />
<h1>This view is coming from plugin</h1>
<br/> <br/> <br/>
@Html.Widget("home_page_top")
@Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
@Html.Widget("home_page_before_categories")
@Html.Action("HomepageCategories", "Catalog")
@Html.Widget("home_page_before_products")
@Html.Action("HomepageProducts", "Product")
@Html.Widget("home_page_before_best_sellers")
@Html.Action("HomepageBestSellers", "Product")
@Html.Widget("home_page_before_news")
@Html.Action("HomePageNews", "News")
@Html.Widget("home_page_before_poll")
@Html.Action("HomePagePolls", "Poll")
@Html.Widget("home_page_bottom")
</div>
</div>
اکنون یک کنترلر برای صفحه نخست مانند زیر اضافه خواهیم نمود:
نام کنترلر را مانند کنتزلر پیش فرض صفحه نخست HomeController.cs می نامیم
مانند زیر در HomeController ، یک action که به view ی Index.cshtml اشاره می کند را اضافه می کنیم:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
using Nop.Web.Framework.Security;
using Nop.Web.Framework.Controllers;
using Nop.Web.Framework;
namespace Nop.Plugin.Misc.MyCustomPlugin.Controllers
{
public class HomeController : BasePluginController
{
[NopHttpsRequirement(SslRequirement.No)]
public ActionResult Index()
{
return View("/Plugins/Misc.MyCustomPlugin /Views/Home/Index.cshtml");
}
}
}
ما یک RouteProvider در Nop.Web داریم . همچنین یک پوشه Infrastructure و فایل RouteProvider.cs در پلاگین سفارشی خود خواهیم داشت. مانند شکل زیر:
در فایل RouteProvider.cs ، مسیر صفحه نخست دلخواه خود را ثبت خواهیم کرد:
public void RegisterRoutes(RouteCollection routes)
{
routes.MapLocalizedRoute("HomePagePlugin",
"",
new { controller = "Home", action = "Index" },
new[] { "Nop.Plugin.Misc.MyCustomPlugin.Controllers" });
}
در فایل RouteProvider.cs ، نیاز است که دوباره به اولویت توجه کنیم. بنابراین view ی صفحه نخست پلاگین جایگزین view ی صفحه نخست می شود:
public int Priority
{
get
{
return int.MaxValue; ;
}
}
کد زیر کد کامل RouteProvider.cs است:
using Nop.Web.Framework.Mvc.Routes;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Routing;
using System.Web.Mvc;
using Nop.Web.Framework.Localization;
namespace Nop.Plugin.Misc.MyCustomPlugin.Infrastructure
{
public class RouteProvider : IRouteProvider
{
public void RegisterRoutes(RouteCollection routes)
{
routes.MapLocalizedRoute("HomePagePlugin",
"",
new { controller = "Home", action = "Index" },
new[] { "Nop.Plugin.Misc.MyCustomPlugin.Controllers" });
}
public int Priority
{
get
{
return int.MaxValue; ;
}
}
}
}
نکته: مطمئن شوید که در پنجره خصوصیت ، ویژگی output directory برای View ی صفحه نخست (Index.cshtml) بصورت "Copy if newer" تنظیم شده باشد.
پلاگین خود را Rebuild کنید و سعی کنید به فروشگاه عمومی بروید (پس از اینکه پلاگین شما نصب شده).
ما باید ببینیم که viewی پلاگین ، view ی صفحه نخست را مانند زیر رونویسی (جایگزین آن) کرده است :
روش افزودن فایل های JS و CSS به پلاگین های طراحی شده
برای بارگزاری ارجاعات JS و CSS در پلاگین تان ، یابد ارجاعت را در فایلهای view پلاگین اضافه کنید.
برا بارگزاری فایاهای منابع در صفحات view ، می توانیداز متد helper زیر استفاده کنید:
- Html.AddScriptParts() : برای بارگزاری فایلهای JS
- Html.AddCssFileParts() : برای بارگذاری فایلهای CSS
کل چیزی که نیاز است این است که اینها را در فایل view خود با مسیر پیش فرض منابع قرار دهید. مانند زیر:
//For JS
//Third parameter value indicating whether to exclude this script from bundling
Html.AddScriptParts(ResourceLocation.Foot, "/Plugins/{PluginName}/scripts/JS_file.js", true);
//Loading CSS file
Html.AddCssFileParts(ResourceLocation.Head, "/Plugins/{PluginName}/Content/{CSSFileName.Css}");
برای شروع عالی بود.
ادامه بده و آموزش یه پلاگین ساده یا کاربردی رو بزار.
مثلا آمار ویزیتور های در طول هفته ماه فصل سال
موفق باشی
بعد از ایجاد کلاس MyCustomPlugin
این کلاس از اینترفیس IMiscPlugin ارث بری می کند این ربطی به اسم گروه پلاگین دارد؟؟؟؟ این اینترفیس کجا نوشته شده و چه کاریمی کند
آیا برای ایجاد هر پلاگینی باید از IMiscPlugin ارث بری کرد؟؟؟