در حال بارگزاری ...

آموزش مقدماتی طراحی پلاگین ناپ کامرس (بر اساس ASP.NET MVC) – بخش 2

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

موضوعاتی که در این مقاله شرح خواهیم داد:

  • روش افزودن گزینه های منو به بخش مدیریت سایت از طریق پلاگین
  • رونویسی (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}");

نظر خود را وارد نمایید.
نظرات
23/09/1395 07:58 ق.ظ
سلام مهندس،خیلی خوب بود
بیشتر
بیشتر
0 سبد
جستجو
دسته ها
تماس
دسته بندی ها