맞춤형 Magento 2 위젯을 만드는 방법

위젯을 사용하면 Magento 2 매장 관리자가 CMS 페이지 및 블록에 정적/동적 콘텐츠를 추가하여 많은 기능과 간단한 구현을 제공할 수 있습니다. 위젯은 Magento 2의 모든 CMS 블록에 추가할 수 있는 재사용 가능한 구성 요소입니다.

따라서 Magento 2 개발자와 상점 관리자는 프로그래밍에 대해 많이 알지 않고도 프론트 엔드에 대화형 인터페이스와 기능을 추가할 수 있습니다. 물론 위젯을 생성하기 위해 Magento를 사용하는 방법을 알아야 합니다.

이 기사의 목표는 사용자 지정 위젯에 중점을 두고 Magento 2에서 위젯을 만드는 방법을 보여주는 것입니다.

Magento 2 위젯

Magento 2는 오늘날 최고의 전자 상거래 플랫폼 중 하나인 Magento의 최신 버전입니다. 위젯은 특히 기능적 관점에서 Magento 2에서 중요한 역할을 합니다. 더 많은 사용자 측 기능을 제공하는 것 외에도 Magento 위젯은 관리자가 CMS 페이지 및 블록에 정적 또는 동적 콘텐츠를 추가하는 데 도움이 됩니다.

그러나 기술적인 관점에서 보면... Magento 위젯이 무엇입니까?

Magento 2 위젯은 기본적으로 고급 구성 옵션 세트로 설계된 Magento 확장입니다. 유연성과 제어력이 향상되어 Magento 관리자 패널을 통해 정보 및 마케팅 콘텐츠를 제공하는 데 사용됩니다. Magento 2 위젯의 장점 중 하나는 사이트 어디에서나 "호출"할 수 있다는 것입니다.

또한 위젯을 사용하면 관리자가 코딩할 필요 없이(실제로는 코딩 방법을 몰라도) Magento 프런트 엔드에 대화형 인터페이스와 기능을 추가할 수 있습니다.

Magento 2는 다양한 유형의 위젯을 제공합니다.

구현으로 넘어가기 전에 Magento 2에서 지원되는 표준 위젯 범위를 자세히 살펴보겠습니다.

• 최근 비교 제품 — 즐겨 찾는 전자 상거래 사이트에서 제품을 탐색하는 동안 이 위젯을 관찰했을 것입니다. 이 위젯은 카탈로그 페이지의 사이드바에서 최근에 보거나 비교한 제품을 표시하는 데 사용됩니다. 테마에 따라 상점에 나타날 수도 있습니다. 중요한 점 중 하나는 모든 단일 블록에 나열되는 제품의 수를 구성할 수 있다는 것입니다.
• 주문 및 반품 — 온라인에서 제품을 구매할 때마다 주문 및 반품에 빠르게 액세스할 수 있는 필수 위젯이 있습니다. 사용자가 주문 또는 반품된 제품을 검토하려는 경우 주문 ID, 마지막 날짜 청구, 주문 찾기, 이메일 등과 같은 필요한 세부 정보를 입력할 수 있습니다.
• 카탈로그 제품 목록 — 이것은 널리 사용되는 또 다른 위젯입니다. 거의 모든 사이트에 하나가 있기 때문에 모든 사람은 전자 상거래 사이트의 "추천 제품" 섹션에 익숙합니다. 주요 제품은 일반적으로 제품 홍보 목적으로 홈페이지에 배치됩니다. 특정 제품은 가격, 기능 및 장바구니에 추가, 위시리스트에 추가 및 비교 기능에 추가와 같은 옵션과 같은 간략한 세부 정보가 표시됩니다.
• 카탈로그 제품 링크 — 카탈로그 제품 링크 위젯의 주요 목적은 관리자가 관련 제품, 교차 판매, 상향 판매 및 그룹화된 제품을 포함한 제품에 대한 링크를 관리할 수 있도록 하는 것입니다. 카탈로그 제품 링크 페이지를 방문하면 소개와 함께 시작된 다양한 카탈로그 카테고리를 볼 수 있습니다. 여기에서 카탈로그 제품 링크 지정, 카탈로그 제품 링크 속성, 카탈로그 제품 링크 제거, 카탈로그 제품 링크 유형 등과 같은 다양한 하위 링크가 있는 카탈로그 제품 링크를 찾을 수 있습니다.
• 카탈로그 카테고리 링크 — 전자 상거래 웹사이트, 특히 제품 기반 웹사이트에서는 카탈로그 카테고리 링크 위젯이 부족하지 않습니다.
• 사용자 정의 블록 위젯 — 블록, 위젯 및 사용자 정의 페이지를 결합하여 카탈로그의 일부 또는 고객이 유용하다고 생각할 수 있는 기타 정보를 표시할 수 있습니다.

이는 사용자 경험을 개선하고 상점에 기능을 추가하는 데 사용할 수 있습니다. 블록과 위젯은 대부분의 전자 상거래 웹사이트에서 중요한 요소입니다. 이를 통해 사용자는 콘텐츠를 빠르게 생성하고 제어할 수 있으며 다음과 같은 작업을 수행할 수 있습니다.

• 사이드바에 동적/정보 블록 추가
• CMS 페이지에 배너 추가
• 사용자 정의 메뉴 추가
• 대화형 사용자 인터페이스 추가

Magento 2 맞춤형 위젯의 경우

모든 웹 사이트 또는 웹 페이지는 원활하게 실행되고 더 많은 방문자를 참여시키기 위해 많은 기능이 필요하며 매력적인 사용자 경험을 만드는 것은 전자 상거래에서 필수입니다. 그것이 바로 맞춤형 Magento 2 위젯이 작동하는 곳이며, 그것이 바로 그들이 해야 할 일입니다.

위젯은 상점에 추가할 수 있는 더 작은 코드 세트입니다. 위젯은 동적 코드에 대한 간단한 링크를 사용하여 방문자를 돕고 경험을 개선하도록 조정된 모든 종류의 유용한 데이터를 표시할 수 있습니다. 오버헤드가 낮고 재사용 가능한 위젯을 사용하여 참여도를 높이는 기능은 분명히 많은 의미가 있지만 때로는 기성품 위젯을 선택하고 추가하는 것만이 아닙니다.

Magento 2의 Custom Widget 기능을 사용하면 자체 위젯 템플릿을 만들 수 있습니다. 사용자 정의 위젯은 때때로 CMS 블록 또는 페이지 내에서 고품질 콘텐츠를 편집하거나 추가하는 훨씬 더 나은 방법을 제공할 수 있습니다.

그러나 사용자 지정 위젯으로 이동하기 전에 Magento 2의 위젯에 대한 표준 사용 사례를 검토해야 합니다. 기본적이고 널리 사용되는 예를 살펴보겠습니다.

위젯을 사용하여 홈페이지에 새 제품 목록을 추가하는 방법

이 간단한 위젯을 사용하면 웹사이트에서 필요한 곳에 새 제품 목록을 추가할 수 있으며, Magento 2에 새 제품을 나열할 수 있는 다양한 방법이 있습니다.

홈페이지에 Magento 제품 목록을 추가하려면 다음과 같은 간단한 절차를 따르기만 하면 됩니다.

• Magento 2 관리자 페이지에 로그인하고 콘텐츠 > 위젯으로 이동합니다.

• 위젯 추가 버튼을 클릭합니다. 그런 다음 유형 및 디자인 옵션과 테마를 선택해야 하는 설정 탭으로 리디렉션됩니다.

• 프론트 엔드에 표시할 카탈로그 새 제품 목록 을 이미 선택한 아래 스크린샷을 볼 수 있습니다.

• 디자인 테마 옵션으로 LUMA를 선택했습니다.

• 두 값을 모두 선택한 후에는 상점 첫 화면 속성을 채워야 하는 두 번째 단계로 이동해야 합니다. 이제 위젯 제목 및 상점 보기 와 같은 위젯 제목 및 상점 첫화면 속성 을 설정해야 합니다. Toptal New Product List 와 All Store Views 를 사용하고 있습니다.

• 가장 중요한 부분은 이 위젯이 표시될 위치(예: 홈 페이지, 목록 페이지, 체크아웃 페이지 등)를 알려주는 레이아웃 업데이트 섹션입니다. 또한 컨테이너가 표시될 영역을 정의할 수도 있습니다(예: 머리글 아래, 바닥글 위, 바닥글 등).

레이아웃 업데이트 설정은 다음 옵션을 제공합니다.

• 표시 설정: 지정된 페이지 또는 모든 페이지.
• 페이지: CMS 홈페이지
• 컨테이너: 주요 콘텐츠 영역
• 템플릿: 여기에서 새 제품을 표시할 스타일을 그리드 모드 또는 목록 모드로 선택할 수 있습니다.

Specified Page 옵션을 선택하고 나면 속성 설정을 진행하여 특정 페이지에 위젯을 표시할 수 있습니다. 여기에 CMS 홈 페이지 를 선택할 수 있는 페이지 드롭다운이 있습니다. 다음으로 특정 섹션에 위젯을 표시하는 데 사용할 컨테이너와 템플릿을 선택해야 합니다.

마지막으로 위젯 옵션이 포함된 마지막 탭으로 이동합니다. 여기에서 어떤 유형의 제품을 표시할지와 같은 Condition 을 설정하거나 제품 수에 대한 제한 등을 포함할 수 있습니다.

All Products 를 선택하면 가장 최근에 추가된 제품이 이 섹션에 표시됩니다. New Products 를 선택하면 "New"로 표시된 제품만 이 섹션에 표시됩니다. 고객이 여러 목록에 대한 탐색을 제어할 수 있도록 하려면 디스플레이 페이지 컨트롤 을 "예"로 설정해야 합니다. "예"를 선택한 경우 목록에 제품 수를 입력해야 합니다.

표시 할 제품 수에서 새 제품 섹션에 표시할 수 있는 제품 수를 정의할 수 있습니다. 또한 필요한 경우 캐시 수명 설정을 변경할 수 있습니다.

이제 이 위젯을 저장하고 Magento 2 캐시를 플러시해야 합니다. 이는 관리자 또는 명령줄에서 수행할 수 있습니다. 다음 명령을 사용하여 캐시를 플러시할 수 있습니다.

php bin/magento cache:clean and php bin/magento cache:flush

그럼 홈페이지에서 신제품을 만나보실 수 있습니다.

Magento 2에서 사용자 지정 위젯을 만드는 방법

이제 Magento 2용 사용자 지정 위젯을 만드는 방법을 배웁니다. 사용자 지정 위젯은 요구 사항에 맞게 사용자 지정할 수 있기 때문에 CMS 블록 또는 페이지 내부에 콘텐츠를 추가하고 편집하는 가장 좋은 방법을 제공합니다.

기본부터 시작하겠습니다. 모듈을 만드는 방법은 모두 알고 계시죠? Magento 2에서 사용자 지정 모듈을 만드는 데 익숙하지 않은 경우를 대비하여 프로세스를 심층적으로 다루는 훌륭한 자습서가 있습니다.

이제 Magento 2에서 사용자 지정 위젯을 만드는 단계별 프로세스로 이동해 보겠습니다.

먼저 네임스페이스와 모듈 폴더가 필요한 새 모듈을 만들어야 합니다. 이 예에서는 네임스페이스에 Toptal 을 사용하고 모듈 이름에 CustomWidget 을 사용합니다. 따라서 composer.json , registration.php 및 etc/module.xml 을 사용하여 평소와 같이 시작하겠습니다.

app/code/Toptal/CustomWidget/composer.json

이 파일은 실제로 Composer를 모듈과 함께 사용하지 않더라도 실행할 때마다 Composer에 의해 로드됩니다.

이제 모듈을 Magento에 등록해야 하므로 app/code/Toptal/CustomWidget/registration.php 위치에 register.php 를 생성해야 합니다.

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

이제 마지막 등록 파일인 module.xml 을 생성합니다.

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

등록 단계를 완료한 후에는 widget.xml 구성 파일을 생성합니다.

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

위의 코드에서 우리는 위젯이 호출될 때마다 표시될 Title 과 Content 을 매개변수로 얻습니다. <widget> 태그에는 Toptal\CustomWidget\Block\Widget\Samplewidget 블록 클래스가 포함되어 있습니다. 이 클래스는 Block/Widget/Samplewidget.php 내에서 감속됩니다. 클래스는 사용할 템플릿을 위젯에 지시합니다.

다음 코드 스니펫은 위젯에 대한 블록을 정의하는 방법을 보여줍니다. 여기에서 템플릿을 설정합니다. 어떻게 생겼는지 봅시다.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget 은 코드 위에 선언되어 있습니다. 이 파일에서 $_template 변수 내부에 사용자 정의 템플릿 파일을 할당합니다.

다음으로 위젯 템플릿이 포함된 항목을 살펴보겠습니다.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

여기에서 위젯 매개변수에서 값을 선택하는 방법을 볼 수 있습니다. 간단 해:

$this->getData('widgettitle');

그리고

$this->getData('widgetcontent');

우리의 최종 결과는 무엇입니까? Magento Admin에서 어떻게 보이는지 보여드리겠습니다.

이제 이 위젯을 저장하고 캐시를 비워야 합니다. 앞에서 설명한 것처럼 php bin/magento cache:clean 및 php bin/magento cache:flush 를 사용하여 관리자 또는 명령줄에서 수행할 수 있습니다.

여기에서 이 간단한 모듈을 다운로드할 수 있습니다. 분명히 완전한 Magento 2 위젯 템플릿은 아니지만 여전히 학습 보조 도구입니다. 더 많은 리소스가 필요하거나 상대적으로 Magento를 처음 접하는 경우 공식 Magento 2 설명서를 시작하는 것이 좋습니다.

마지막으로 제가 꽤 유용하다고 생각하는 몇 가지 개인 개발자 블로그를 언급하고 싶습니다. Alan Storm은 아마도 Magento를 배울 때 가장 교훈적인 내용을 가지고 있을 것이며 Alan Kent의 블로그도 확인해야 한다고 생각합니다.

위젯: 큰 그림의 중요한 부분

이 기사의 목표는 Magento 2 위젯 개발 및 사용자 지정 위젯 생성을 다루는 기본 단계별 자습서로 시작하여 Magento 2에서 위젯 생성에 대한 가이드를 제공하는 것이었습니다. 맞춤형 솔루션이 더 많은 유연성과 기능을 제공하는 경향이 있기 때문에 저는 분명히 후자의 팬입니다.

Magento 위젯은 중요한 프론트 엔드 기능을 제공하므로 영리한 사용자 정의 위젯이 다음 Magento 프로젝트를 다음 단계로 끌어올리는 데 도움이 될 수 있다고 해도 과언이 아닙니다. 더 많은 기능을 구현하고 다양한 위젯을 사용하여 다양한 유형의 항목을 홈페이지에 추가할 수 있으며 궁극적으로 개발자에게 보다 창의적인 자유를 제공할 수 있습니다.

그러나 사용자 경험과 전환을 개선하거나 멋진 디자인을 만드는 것만이 아닙니다. 모든 클라이언트는 분명히 우선 순위가 있지만 더 작고 덜 명백한 이점이 있습니다. 예를 들어, Magento 위젯은 관리자 측에서도 많은 시간과 골칫거리를 절약할 수 있으며 모든 클라이언트는 작업 시간도 절약하기를 원합니다.

그러나 이는 이 기사의 범위를 벗어납니다. 내 의도는 ROI 및 마케팅에 대해 논의하기 위한 것이 아니라 빠른 기술 개요, 따라하기 쉬운 Magento 2 위젯 튜토리얼을 제공하는 것이었습니다.