ویجت (ابزارک widget) در ناپ کامرس برای افزودن تعدادی قابلیت یا ویژگی و یا حتی نمایش اطلاعات استفاده می شود که می تواند در بخشی از فروشگاه عمومی ارائه شود. به محل قرار گیری ابزارک ناحیه ابزارک (widget zone) می گویند. در این پست روش ایجاد ویجت آموزش داده می شود.
ویجت یک برنامه مستقل است که می نواند توسط هر کاربر روی یک صفحه سایت ثالث اضافه شود. یک برنامه کوچک است که می تواند توسط یک کاربر در داخل یک صفحه نصب و اجرا شود.
ویجت در ناپ کامرس چیست؟
یک ویجت یک عنصر رابط کاربر کرافیکی (GUI) است که اطلاعاتی را که توسط مدیر سایت یا فروشگاه می تواند تغییر یابد را نمایش می دهد. ناپ کامرس دارای چندین ویجت توکار است مانند Google Analytics و Nivo Slider و غیره. هنگام افزودن ویجت به فروشگاه ، مدیر سایت یا فروشگاه باید ناحیه نمایش ویجت (ابزارک) را مشخص کند. حال ممکن است که شما متعجب شوید و بپرسید ناحیه ابزارک چیست ؟ ناحیه ابزراک (widget zone) بخشی از UI (رابط کاربر) در فروشگاه عومی است که ابزارک می تواند در آن نمایش داده شود. برای مثال شما می توانید ویجت چت آنلاین را در ستون سمت چپ یا راست ناحیه ابزارک قرار دهید. ناحیه ابزارک اصولا محلی از پیش تعیین شده در فروشگاه ناپ کامرس است که نمایش هر نوع اطلاعاتی را برای برای مدیر فروشگاه برای تسهیل می کند.
تفاوت ویجت ها با پلاگین ها در ناپ کامرس چیست ؟
ویجت ها برای افزودن قابلیت ها و گاهی برای نمایش اطلاعات در ناپ کامرس استفاده می شوند که می تواند در بخشی از فروشگاه عمومی (محل ابزارک) نمایش داده شود. در حالی که پلاگین ها در ناپ کامرس برای توسعه قابلیت ها ناپ کامرس استفاده می شوند.ناپ کامرس چندین نوع افزونه دارد. برای مثال روش های پرداخت (مانند بانک ملت ، سامان ، پاسرگاد ، پی پال) ، ارائه دهندگان مالیات ، روش های محاسبه هزینه ارسال (مانند ایران مارکت سنتر ، فروتل) ، ابزارک ها یا ویجت ها (مانند جت آنلاین) و خیلی موارد دیگر.
در سایت ناپ کامرس فارس می توانید انواع افزونه ، ویجت ، تم ارائه شده است می توانید در آن جستجو کنید و ببینید قبلا ویجت یا افزونه ای طراحی شده است که مورد نیاز شما باشد.
ناپ کامرس هم اکنون با انواع افزونه ها منتشر شده است. شما می توانید انواع افزونه ها را در سایت ناپ کامرس جستجو کنید تا ببینید قبلا افزونه ای طراحی شده است که مورد نیاز شما باشد.
ساختار ویجت و فایلهای مورد نیاز
اولین کاری که شما باید انجام دهید این است که یک پروژه "Class Library" جدید در solution ایجاد کنید. بهترین کار این است که همه ویجت ها را در پوشه \Plugins در فهرست ریشه قرار دهید. (با پوشه \Plugins در زیر پوشه in \Nop.Web که برای ویجت های کامپایل شده استفاده می شود اشتباه نگیرید).
مراحل طراحی ویجت ناپ کامرس
مرحله 1) پروژه ناپ کامرس را در Visual Studio باز کنید (باید سورس کد کامل را داشته باشد)
مرحله 2) روی پوشه plugin راست کلیک کنید --> Add --> گزینه New Project
مرحله 3) در پنجره افزودن پروژه جدید
- NET Framework 4.5.1 را انتخاب کنید
- #Visual C را انتخاب کنید
- Class Library را انتخاب کنید
مرحله 4) نام ویجت و محل آنرا بصورت زیر مشخص کنید:
در این مورد ، ما نام پلاگین را Nop.Plugin.Widgets.MyCustomWidget وارد کردیم.
محل: روی دکمه "Browse" کلیک کنید و پوشه Plugin را که دارای سورس کد همه پلاگین ها و ویجت ها است را انتخاب کنید. ( و نه پوشه Nop.Web که فقط حاوی فایلهای dll کامپایل شده است)
مرحله 5) شما باید پروژه ویجت سفارشی خود را مانند شکل زیر در پنجره solution explorer ببینید:
مرحله 6) reference ها را وارد کنید. راست کلیک روی References -->گزینه Add Reference…
همه reference ها را وارد کنید (مانند شکل زیر). در صورتی که reference های مورد نیاز را پیدا نکردید ، به سایر پلاگین ها که آنها را دارند نگاه کنید و رفرنس ها را از آنجا بدست آورید.
مرحله 7) ویجت سفارشی خود را در ساختار مناسب پیکربندی کنید.
توضیحات: مرحله بعدی ایجاد فایل Description.txt است که برای هر ویجت مورد نیاز است. این فایل شامل اطلاعات و شرح ویجت شما است. این فایل را از سایر پلاگین ها کپی کنید و آنرا بر اساس نیاز خود تغییر دهید.
Group: Widgets
FriendlyName: MyCustomWidget
SystemName: Nop.Plugin.Widgets.MyCustomWidget
Version: 1.00
SupportedVersions: 3.80
Author: Lavish Kumar
DisplayOrder: 1
FileName: Nop.Plugin.Widgets.MyCustomWidget.dll
Web.config : یک فایل web.config ایجاد کنید و مطمئن شوید که بصورت copied to output تنظیم شده است. این فایل را از سایر ویجت های موجود ها کپی کنید.
مرحله 8) یک کلاس به نام MyCustomWidget.cs ایجاد کنید و کدهای زیر را در آن وارد کنید:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.IO;
using System.Web.Routing;
using Nop.Core;
using Nop.Core.Plugins;
using Nop.Services.Cms;
using Nop.Services.Configuration;
using Nop.Services.Localization;
using Nop.Services.Media;
using Nop.Services.Common;
namespace Nop.Plugin.Widgets.MyCustomWidget
{
/// <summary>
/// PLugin
/// </summary>
public class MyCustomWidget : BasePlugin, IWidgetPlugin
{
/// <summary>
/// Gets widget zones where this widget should be rendered
/// </summary>
/// <returns>Widget zones</returns>
public IList<string> GetWidgetZones()
{
return new List<string> { "home_page_before_categories" };
}
/// <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 = "MyCustomWidget";
routeValues = new RouteValueDictionary { { "Namespaces", "Nop.Plugin.Widgets.MyCustomWidget.Controllers" }, { "area", null } };
}
/// <summary>
/// Gets a route for displaying widget
/// </summary>
/// <param name="widgetZone">Widget zone where it's displayed</param>
/// <param name="actionName">Action name</param>
/// <param name="controllerName">Controller name</param>
/// <param name="routeValues">Route values</param>
public void GetDisplayWidgetRoute(string widgetZone, out string actionName, out string controllerName, out RouteValueDictionary routeValues)
{
actionName = "PublicInfo";
controllerName = "MyCustomWidget";
routeValues = new RouteValueDictionary
{
{"Namespaces", "Nop.Plugin.Widgets.MyCustomWidget.Controllers"},
{"area", null},
{"widgetZone", widgetZone}
};
}
/// <summary>
/// Install plugin
/// </summary>
public override void Install()
{
PluginManager.MarkPluginAsInstalled(this.PluginDescriptor.SystemName);
}
/// <summary>
/// Uninstall plugin
/// </summary>
public override void Uninstall()
{
PluginManager.MarkPluginAsUninstalled(this.PluginDescriptor.SystemName);
}
}
}
مرحله 9) کلاس MyCustomWidgetController.cs را در پوشه Controllers در داخل ویجت ایجاد کنید و کدهای زیر را در آن وارد کنید:
using System;
using System.Collections.Generic;
using System.Data.Entity.Migrations;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web.Mvc;
using Nop.Services;
using Nop.Web.Framework.Controllers;
using Nop.Web.Framework.Kendoui;
using Nop.Services.Localization;
using Nop.Services.Security;
using Nop.Core.Domain.Localization;
using Nop.Core.Data;
using Nop.Core;
using Nop.Web.Models.Common;
using Nop.Core.Caching;
using Nop.Web.Infrastructure.Cache;
using Nop.Core.Infrastructure;
namespace Nop.Plugin.Widgets.MyCustomWidget.Controllers
{
public class MyCustomWidgetController : BasePluginController
{
[AdminAuthorize]
public ActionResult Configure()
{
return View("/Plugins/Widgets.MyCustomWidget/Views/Configure/Configure.cshtml");
}
public ActionResult PublicInfo(string widgetZone, object additionalData = null)
{
return View("/Plugins/Widgets.MyCustomWidget/Views/Configure/PublicInfo.cshtml");
}
}
}
مرحله 10) Configure.cshtml (View) را داخل پوشه Views اضافه کنید. در این مورد یک view خالی ایجاد می کنیم.
نکته: مطمئن شوید خصوصیتoutput directory در فایلConfigure.cshtml مقدار “Copy if newer” تنظیم شده است.
مرحله 11) روی پروژه "Nop.Plugin. Widgets. MyCustomWidget " راست کلیک کنید و گزینه "Properties" را انتخاب کنید.
مطمئن شوید نام اسمبلی و اسمبلی پیش فرض بصورت زیر باشد (همراه با .NET Framework):
به زبانه "Build" در سمت چپ پنجره properties بروید:
به سمت پایین روی "Output" پیمایش کنید و مطمئن شوید که مسیر بصورت زیر است:
..\..\Presentation\Nop.Web\Plugins\Widgets.MyCustomWidget\
مرحله 12) مطمئن شوید که همه چیز ذخیره شده و ساختار آن شبیه زیر است :
مرحله 13) روی پروژه ویجت سفارشی خود راست کلیک کنید و گزینه “Build” را انتخاب کنید.
مرحله 14) بعد از re-building کردن پروژه ، کل solution را اجرا کنید و به بخش مدیریت بروید و روی "خالی کردن کش" کلیک کنید.
مرحله 15) به بخش افزونه ها بروید و روی دکمه "بارگزاری لیست افزونه ها" کلیک کنید:
مرحله 16) اگر به سمت پایین پیمایش کنید ، باید بتوانید ویجت سفارشی جدید خود را در لیست افزونه ها ببینید. روی دکمه نصب در ویجت سفارشی خود کلیک کنید.
مرحله 17) بروید به بخش مدیریت --> پیکربندی --> ابزارک ها
حال شما باید بتوانید ویجت خود را در لیست ببینید.
مرحله 18) روی لینک پیکربندی کلیک کنید ، شما باید بتوانید چیزی شبیه به زیر را ببینید:
ثبت نظرات