بسته

آموزش مقدماتی طراحی تم ناپ کامرس – بخش 1

راهنمای مقدماتی طراحی تم ناپ کامرس به شما مبانی ایجاد تم ناپ کامرس را آموزش خواهد داد.

این راهنما برای مبتدیان است. فرض بر این است که شما دانش ابتدایی با ناپ کامرس را دارید و با HTML و CSS آشنایی دارید.

تم مجموعه ای از تنظیمات خصوصیاتی است که به شما اجازه تعریف ظاهر صفحات و کنترل ها، و سپس ظاهر در کل صفحات در یک وب سایت را می دهد.تم ها از مجموعه ای از عناصر ساخته شده اند:پوسته، style sheets(CSS)، تصاویر و سایر منابع. حداقل، یک تم شامل پوسته است. تم ها در پوشه خاص در وب سایت شما قرار می گیرند.

تم همچنین شامل فایل css است. هنگامی که شما یک فایل css را در پوشه تم قرار می دهید، css به طور خودکار به عنوان بخشی از تم اعمال می شود. با استفاده ازcss در پوشه تم، یک style sheet تعریف کنید.

تم در ناپ کامرس چیست ؟

تم ناپ کامرس مجموعه ای از فایلهایی است که به راحتی می توانید طراحی وب سایت خود از جمله طرح بندی هایش را تغییر دهید. تم برای داشتن یک طرح و ظاهر یکسان در تمام صفحات سایت استفاده می شود. تم ناپ کامرس از تعدادی فایل، style sheet برای ظاهر صفحه و عکس ها تشکیل شده است . قالب ناپ کامرس تنها شامل تغییرات ظاهری بخش کاربر (فروشگاه عموی) ، آنچه که یک بازدید کننده آنلاین هنگام مرور فروشگاه می بیند می باشد.

تم ها در سایت ناپ کامرس چه چیزهایی می توانند انجام دهند ؟

  • تم ها می توانند محتوا و داده های ذخیره شده توسط ناپ کامرس را با سبک تعریف شده نمایش دهند.
  • تم می تواند طرح بندی سایت ناپ کامرس شما را تغییر دهد: استاتیک یا ریسپانسیو و طرح بندی یک یا چند ستونه
  • تم می تواند تجربه یکسانی را به کاربر در چندین دستگاه با سیستم عامل های متفاوت در سایت فروشگاه ناپ کامرس ارائه بدهد.
  • تم می تواند عناصر سایت را از طریق CSS سفارشی سازی کند.

ساختار پوشه تم در ناپ کامرس (موارد مورد نیاز)

به منظور کار با ناپ کامرس، درک ساختار فایل ها و پوشه ها مهم است.

محل تم ها در ناپ کامرس: تمام تم ها در پوشه /Themes/ قرار دارند.

  • پوشه Content : این پوشه شامل همه CSS ها و تصاویر است.
  • پوشه Views : این پوشه شامل همه View های (صفحات وب که شامل تگ های HTML و کد های سمت سرور است) MVC است.
  • فایل عکس preview.jpg : تصویر بند انگشتی تم که به عنوان پیش نمایش استفاده می شود.
  • فایل theme.config : این فایل شامل اطلاعات تم مانند نام تم و شرح آن است

اینجا یک مثال از فایل "theme.config" است:

<?xml version="1.0" encoding="utf-8" ?>

<Theme title="Default clean"

   supportRTL="true"

     previewImageUrl="~/Themes/DefaultClean/preview.jpg"

     previewText="The 'DefaultClean' site theme.">

</Theme>

 

تفاوت بین تم ناپ کامرس و پلاگین ناپ کامرس

تم ناپ کامرس کل ظاهر سایت فروشگاه را کنترل می کند (مانند فروشگاه عمومی) در حالی که پلاگین ناپ کامرس برای گسترش قابلیت های وب سایت ناپ کامرس است.

روش نصب تم و اعمال آن در ناپ کامرس

فرض می کنیم که شما هم اکنون یک تم جدید بصورت فایل zip دانلود کرده اید.

فایل Zip را ار حالت فشرده خارج کنید و محتوای آن را به پوشه Themes مانند شکل زیر کپی کنید:

برای اعمال تم جدید ، بروید به : بخش مدیرت --> تنظیمات --> تنظیمات عمومی و متفرقه

نکته: همچنین می توانید به آدرس URL زیر برای دسترسی به بخش مدیریت بروید:

 

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

تم راست به چپ

ناپ کامرس نسخه راست به چپ تم فروشگاه عمومی را پشتیبانی می کند. تم پیش فرض ناپ کامرس "DefaultClean" با ویژگی راست به چپ ارائه شده است. اگر شما در حال ایجاد تم خود می باشید می توانید ویژگی های تم را در فایل styles.rtl.css بازنویسی و ذخیره کنید.

 

برای فعال کردن "راست به چپ" تم بروید به:

مدیریت --> پیکربندی --> زبان ها

 

روی "ویرایش" زبان کلیک کنید:

 

حال ، مطمئن شوید که گزینه "راست به چپ" فعال باشد.

نکته: تم فعال باید RTL را پشتیبانی کند و این فقط بر روی فروشگاه عمومی تاثیر می گذارد.

ایجاد تم شخصی ( با استفاده از تم پیش فرض)

در ویژوال استادیو وب سایت (نسخه وب) را باز کنید. به اینجا بروید:

اگر سورس کد را دارید : \Nop.Web\Themes\

اگر از نسخه تحت وب استفاده کی کنید: \[Project Root]\Themes\

  • تم پیش فرض یا کنونی را انتخاب کنید

 

  • روی تم راست کلیک کنید --> گزینه COPY را انتخاب کنید

 

  • پوشه "Theme" را انتخاب کنید --> راست کلیک --> PASTE

 

 

  • شما چیزی شبیه به "DefaultClean - Copy" را خواهید دید

 

  • آنرا تغییر نام دهید – هر چیزی که دوست دارید نام تم جدید شما باشد. برای مثال: NewTheme

 

  • حال در پوشه تم جدید "NewTheme"  --> فایل "theme.config" را باز کنید

 

  • نام تم کنونی را به نام تم جدید "NewTheme" تغییر دهید

 

  • داخل پوشه تم جدید "NewTheme"  --> پوشه Content  --> پوشه Images --> تصاویر جدید خود را در پوشه "images” اضافه کنید و بر اساس نیاز خود فایل styles.rtl.css را سفارشی سازی و بروزرسانی کنید

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

 

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

  • روش افزودن گزینه های منو به بخش مدیریت سایت از طریق پلاگین
  • رونویسی (override) view پیش فرض از طریق پلاگین
  • روش افزودن ارجاعات JS و CSS در پلاگین

 

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

اصولا همه گزینه های منو که در بخش مدیریت ناپ کامرس نمایش داده می شود در فایل sitemap.config در پوشه Nop.Admin ذخیره شده است.

 

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

 eertert

کد زیر کد اصلی کلاس پلاگین در 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",

                      &nbsp ;    "",

                      &nbsp ;    new { controller = "Home", action = "Index" },

                      &nbsp ;    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",

                      &nbsp ;    "",

                      &nbsp ;    new { controller = "Home", action = "Index" },

                      &nbsp ;    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}");

 

ثبت نظرات

دسته ها
جستجو
0 سبد
پروفایل
بیشتر
تماس
دسته بندی ها