플러그인을 사용하여 관리자 측에 탭을 추가하는 방법 nopCommerce 4.3

이 문서에서는 플러그인을 사용하여 관리 측nopCommerce에 탭을 추가하는 방법을 설명합니다. 개발자가 이러한 유형의 문서를 검색할 때 문제를 배우거나 해결하는 데 도움이 되는 솔루션을 찾고 있기 때문에 구현 부분에 대해 직접 살펴보겠습니다. 다음은 nopCommerce 4.3에서 플러그인을 사용하여 관리자 측에 탭을 추가하는 단계입니다.

찾기위젯존

먼저, 탭을 추가할 관리자 측 페이지를 식별합니다. 이 글에서는 관리자 주문 편집 페이지에 탭을 추가하고 있습니다. 그래서 먼저 페이지의 WidgetZone을 확인하기 위해 소스 코드에서 주문 편집 페이지를 찾아야 합니다. 이 위젯 영역에서 새 탭 보기 페이지로 돌아갑니다. ~\Presentation\Nop.Web\Areas\Admin\Views\Order\Edit.cshtml에서 위젯 영역을 찾고 있습니다. Widgetzone의 이름은 AdminWidgetZones.OrderDetailsBlock입니다.

ViewComponent 및 WidgetZone 이름 추가

관리자 측에 사용자 지정 탭을 추가하려면 기존 nopCommerce NivoSlider 플러그인을 사용하고 있습니다. 새 플러그인으로 확인하려면 다음을 수행할 수 있습니다Create Plugin. 새 플러그인을 만들거나 기존 플러그인으로 작업한 후 먼저 Plugins\Nop.Plugin.Widgets.NivoSlider\NivoSliderPlugin.cs 플러그인 파일로 이동합니다. 새 플러그인인 경우 플러그인이 IWidgetPlugin을 상속하는지 확인하십시오. GetWidgetZones() 메서드로 이동하여 주문 편집 페이지에서 찾은 위젯 영역을 추가합니다. 예: AdminWidgetZones.OrderDetailsBlock. 이제 GetWidgetZones()는 다음과 같이 표시됩니다.

/// <summary>    
/// Gets widget zones where this widget should be rendered    
/// </summary>    
/// <returns>Widget zones</returns>    
public IList < string > GetWidgetZones() {  
    return new List < string > {  PublicWidgetZones.HomepageTop, 
        AdminWidgetZones.OrderDetailsBlock // this we added for custom order  
    };  
}

이제 동일한 파일의 GetWidgetViewComponentName에 **viewcomponentname을 추가합니다. viewcomponent 이름 WidgetsAdminOrderDetails를 추가합니다. 이 viewcomponent는 관리자 주문 편집 페이지를 볼 때 호출합니다. 그리고 이 보기 구성 요소는 추가하려는 탭 목록을 반환합니다.

/// <summary>    
/// Gets a name of a view component for displaying widget    
/// </summary>    
/// <param name="widgetZone">Name of the widget zone</param>    
/// <returns>View component name</returns>    
public string GetWidgetViewComponentName(string widgetZone) 
{  
  if (widgetZone == AdminWidgetZones.OrderDetailsBlock) 
        return "WidgetsAdminOrderDetails";  
  return "WidgetsNivoSlider";  
}   

ViewComponent 및 TabList 및 TabContent cshtml 파일 만들기

이제 보기 구성 요소 파일 WidgetsAdminOrderDetailsViewComponent.cs를 생성합니다. 다음은 코드입니다. 파일 위치는\Nop.Plugin.Widgets.NivoSlider\Components\WidgetsAdminOrderDetailsViewComponent.cs입니다.

namespace Nop.Plugin.Widgets.NivoSlider.Components 
{  
    [ViewComponent(Name = "WidgetsAdminOrderDetails")]  
    public class WidgetsAdminOrderDetailsViewComponent: NopViewComponent 
    {  
        public WidgetsAdminOrderDetailsViewComponent() {}  
        public IViewComponentResult Invoke(string widgetZone, object additionalData) 
        {  
            return View("~/Plugins/Widgets.NivoSlider/Views/WidgetsAdminOrderDetails/AdminOrderTabList.cshtml");  
        }  
    }  
}   

이제 AdminOrderTabList.cshtml을 생성합니다. 이 파일에서 탭 콘텐츠 파일과 함께 탭 목록을 제공합니다. 다음 위치에 이 파일을 생성합니다: Plugins\Nop.Plugin.Widgets.NivoSlider\Views\WidgetsAdminOrderDetails\AdminOrderTabList.cshtml. 플러그인의 보기 폴더 아래에 새 폴더 WidgetAdminOrderDetails를 만들고 있습니다. 다음은 AdminOrderTabList.cshtml 파일입니다.

@using Nop.Services.Common    
@using Nop.Core    
@* You can add above 2 namespace in _ViewImport.cshtml. This 2 namespace required for workcontext and generic attribute service.*@     
@inject IWorkContext workContext 
@inject IGenericAttributeService genericAttributeService 
@{  
    const string hideCustomBlockAttributeName = "CustomOrderPage.HideCustomBlock";
    var hideCustomBlock = genericAttributeService.GetAttribute<bool>(workContext.CurrentCustomer, hideCustomBlockAttributeName);    
}    
<nop-panel asp-name="custom-order-tab" asp-icon="fa fa-th-list"    
  asp-title="CustomTabTitle"    
  asp-hide-block-attribute-name="@hideCustomBlockAttributeName"    
  asp-hide="@hideCustomBlock" asp-advanced="true">    
    @await Html.PartialAsync("/Plugins/Widgets.NivoSlider/Views/WidgetsAdminOrderDetails/_CustomTab.Order.cshtml")   
</nop-panel>

주문 편집 페이지에 여러 탭을 추가하려면 동일한 파일에 이 코드를 복제하고 탭 콘텐츠에 대해 다른 cshtml 파일 위치를 제공합니다. [팁: 이 내용은 nopcommerce의 order/edit.cshtml 파일에서 복사했습니다.]

탭 콘텐츠의 경우/Plugins/Widgets.NivoSlider/Views/WidgetsAdminOrderDetails/_CustomTab.Order.cshtml을 지정했습니다. 따라서 다음은 _CustomTab.Order.cshtml 파일 내용의 내용입니다.

<div class="panel-body">    
  <div class="panel panel-default sub-panel">    
      <div class="panel-body">    
        Custom Body content    
    </div>    
  </div>    
</div>

이제 아래 스크린샷과 같이 두 .cshtml 파일이 복사본으로 표시되어 있는지 확인하십시오. VSCode를 사용하는 경우 이를 plugin.csproject 파일 즉(Plugins\Nop.Plugin.Widgets.NivoSlider\Nop.Plugin.Widgets.NivoSlider.csproj)에 수동으로 추가해야 합니다.


이제 플러그인을 빌드하고 nopCommerce의 주문 편집 페이지( AdminOrderList -> VIEW 버튼 클릭)를 확인합니다. 다음은 CustomTabTitle 탭에서 볼 수 있는 최종 결과입니다.


다음은 이 기능을 구현하기 위해 추가하거나 변경한 파일의 스크린샷입니다.



귀하의 피드백과 제안은 이 문서를 개선하는 데 도움이 됩니다. 이 기사의 주요 목적은 플러그인을 사용하여 admin nopCommerce에서 사용자 정의 탭을 추가하는 전체 단계를 보여주는 것이기 때문에 이 기사에서는 코드를 많이 설명하지 않았습니다. 이 기사를 따라가는 동안 문제가 발생하면 개선할 수 있도록 의견에 언급해 주십시오. nopCommerce에 대한 다른 기사를 보고 싶다면 댓글로 알려주세요.

시간을 내어 읽고 제안해 주셔서 감사합니다.