Joomla 5의 ModalSelect Form 필드 유형을 사용하면 확장 프로그램 개발 시 카테고리, 제조업체 및 검색을 사용하여 모달 창에서 필터링하여 수천 개 중에서 올바른 제품을 쉽게 찾을 수 있습니다.
클라이언트와 작업하는 과정에는 다양한 수준의 작업이 있습니다. 누군가는 5~6페이지의 간단한 웹사이트가 필요합니다. 누군가는 REST API를 사용하여 타사 시스템과 통합된 대규모 상품 카탈로그 또는 온라인 상점이 필요합니다. 다른 누군가에게는 널리 사용되는 솔루션이 없는 비표준 기능이 필요합니다.
Joomla는 개발에 적합하며 쉽게 유지 관리할 수 있는 코드를 만들 수 있습니다. 요구 사항이 CMS 핵심을 따른다면 이 모든 경우에 대한 답이 있습니다.
대규모 프로젝트를 완료하려면 작은 작업으로 나누어야 하는데, 이 글에서는 이러한 작업 중 하나를 해결하는 방법에 대해 이야기하고 싶습니다.
고객은 이미 Joomla(JoomShopping) 온라인 상점의 인기 구성 요소 중 하나에 제품 카탈로그를 만들었습니다. 제품의 매개변수를 선택하고 장바구니에 담은 후 구매할 수 있습니다. 모든 것이 평소와 같습니다. 그러나 이제 제품에 대한 그래픽 레이아웃을 생성하는 기능을 추가해야 합니다. 예를 들어 제품은 머그잔이나 티셔츠입니다. 구매하기 전에 제품 디자이너에게 가서 로고나 사진을 업로드하고 텍스트를 작성하면 이 레이아웃이 온라인 상점 주문에 첨부됩니다. 결제 후 레이아웃이 바로 제작에 들어가고 이미지와 텍스트가 머그에 적용되어 주소로 전송됩니다.
이 기능을 구현하는 데는 상당한 시간이 소요되므로 별도의 제품 디자이너 구성 요소로 생성됩니다. 그리고 데이터 제공자 플러그인이 이미 생성되어 있어 하나 또는 다른 전자 상거래 구성 요소와 함께 작업할 수 있습니다.
작은 응용 작업 중 하나는 온라인 상점 구성 요소의 상품과 제품 디자이너 구성 요소의 상품 간의 연결을 만드는 것입니다. 이는 향후 콘텐츠 작업을 수행할 콘텐츠 관리자에게 편리하고 직관적이어야 합니다. 따라서 원하는 제품의 ID 번호가 표시될 텍스트 필드를 만드는 것만으로는 충분하지 않습니다. 온라인 상점에는 수십 개의 제품만 있을 수 있으며 커뮤니케이션을 위한 제품을 선택하는 것은 그리 어렵지 않습니다. 수천 개의 제품이 있는 경우 매개변수별로 제품을 검색하고 필터링하는 기능이 중요합니다. 카테고리, 제조업체별로 제품 목록을 필터링하거나 수백 개의 다른 제품 중에서 이름으로 찾을 수 있다면 작업이 훨씬 빠르고 쉬워질 것입니다.
영상보기
이 필드는 선택을 위한 데이터가 모달 창에 표시되는 편집기 버튼 플러그인(editors-xtd 그룹) 작업과 매우 유사합니다(기사 링크, 모듈 단축 코드 등).
Joomla 관리자 패널에는 기사, 메뉴 항목, 연락처, 제품 등을 지정하는 등 다른 구성 요소의 데이터로 채워야 하는 다양한 필드가 있습니다. 일반적으로 이러한 필드는 선택 옵션 드롭다운 목록으로 설계됩니다. , 데이터 목록을 사용하여 입력 유형="텍스트"로 설계할 수 있지만 필터링, 검색 및 페이지 매김을 사용하여 원하는 엔터티 목록을 표시하는 편리한 필드도 있습니다. 사이트 내의 소스(다양한 구성 요소, 플러그인)뿐만 아니라 REST API를 통해 제공되는 타사 서비스(CRM, 배달 서비스, 외부 데이터베이스, 기타 Joomla 사이트 등)도 데이터 소스로 작동할 수 있습니다.
"기사 - 단일 기사", "연락처 - 단일 연락처"와 같은 메뉴 항목에서 기사를 선택하거나 메뉴 항목의 별칭 - "시스템 링크 - 메뉴를 생성할 때 이러한 필드가 작동하는 것을 모두 확인했습니다. 항목 별칭". 하지만 그들이 어떻게 생겼는지 생각해 봅시다.
모달 기사 선택 창
모달 단일 접점 선택 창.
이러한 필드를 자세히 살펴보겠습니다. 정확히 어떤 작업을 수행할 수 있는지 살펴보겠습니다. 우리는 이 필드의 주요 작업이 선택한 엔터티의 ID를 가져와 이 ID를 텍스트 필드에 입력하는 것임을 알고 있습니다. 그러나 화면에는 ID 번호 대신 기사 제목이나 연락처가 표시되는 다른 내용이 표시됩니다. 좋고 편리합니다. ID가 1452704인 기사 이름을 기억할 필요가 없습니다. 또한 비디오에는 필드에 이미 값이 있으면 "지우기" 버튼이 나타나는 것을 명확하게 보여줍니다. 필드 값을 재설정하고 "선택" 버튼을 다시 클릭할 수 있게 해줍니다.
어떤 경우에는 메뉴 항목을 만드는 과정에서 바로 기사, 연락처 등 선택한 유형의 엔터티를 만들 수 있는 기회가 있습니다. 이 버튼은 ACL(Joomla의 액세스 권한 분리)을 고려하여 작동합니다.
웹사이트를 구축하고 '연락처' 페이지를 만들고 있다고 상상해 보세요. 복잡한 구조를 가진 여러 회사 지점이 없다면 이것은 "분류되지 않음" 범주에 있는 일반적인 Joomla 기사일 뿐입니다. 그리고 이미 텍스트나 변수 형태의 모든 연락처가 있습니다. 고대에는 먼저 기사를 생성한 다음 메뉴 항목으로 이동하여 해당 항목을 생성해야 했습니다. 이제는 그러실 필요가 없습니다.
필드에 이미 값이 있는 경우 메뉴 항목을 생성하는 과정에서 선택한 엔터티(기사, 메뉴 항목 등)를 바로 편집할 수 있는 경우도 있습니다.
모달 창의 선택 필드를 사용하여 다음을 수행할 수 있습니다.
이것이 내 눈앞에 있다. 그러나 Joomla에는 선택한 값을 필드에 지정된 URL로 보낼 수 있는 흥미로운 urlCheckin 매개 변수도 있습니다. Joomla의 이 기능은 꽤 오랫동안 점진적으로 발전해 왔다는 점은 주목할 가치가 있습니다. 하지만 필요에 따라 사용할 수 있는 별도의 범용 필드 유형은 Joomla 5에서만 나타났습니다. Joomla 4에도 없습니다.
이전에는 이 생성자를 JForm이라고 했습니다. 나는 모든 독자가 PHP Storm 또는 VS Code와 같은 IDE(개발 환경)와 같은 개발 도구를 손에 갖고 있지는 않다고 가정할 것이므로 코드 베이스 탐색을 위한 추가 지침을 제공하려고 노력할 것입니다.
Joomla에서는 로직이 뷰(실제 HTML 출력)와 분리되어 있으므로 동시에 여러 곳에서 살펴보겠습니다.
Logic은 Form 클래스입니다. Joomla 5에서 Form 클래스 파일은 libraries/src/Form에 있습니다. 논리 자체, 데이터에 어떤 일이 발생하는지, 데이터를 사용하는 방법을 이해하기 위해 이러한 파일을 검사합니다.
간단히 말하면 Form 생성자는 필드에 대한 설명이 포함된 XML을 받습니다. 데이터(필드 유형, addfieldprefix 속성의 사용자 정의 필드 클래스 등)를 읽고 FormHelper를 사용하여 필수 필드 클래스를 로드합니다. 필드에 출력 데이터 필터링을 위한 몇 가지 규칙이 있는 경우(FormRule 클래스가 사용됨) 필터링 매개변수를 지정하고 예를 들어 PHP만 또는 CSS 파일만 선택할 수 있는 파일 목록 유형의 Joomla 필드를 기억하세요.
Joomla 양식 필드 클래스 파일은 libraries/src/Form/Field에 있습니다. 가볍게 말하면 그것들이 많이 있습니다. 이는 관리자 패널의 구성 요소이며 때로는 프런트엔드이기도 합니다.
클래스 파일은 $type, $layout 등 작업에 필요한 클래스 속성을 설명합니다. 대부분의 필드에는 getInput() 메소드가 있습니다. - 실제로 필드의 HTML 출력을 반환하고, getLayoutData() - 필드에 대한 데이터를 렌더링으로 보내기 전에 사전 처리하고, getLabel() - 필드 레이블 작업 등을 수행합니다.
필드 클래스는 상위 FormField 클래스를 상속한다는 것을 기억합니다. 클래스 파일 libraries/src/Form/FormField.php에는 XML 설명에 사용할 수 있는 필드의 가능한 속성이 설명되어 있습니다. 그것이 무엇인지, 왜 그런지에 대한 간략한 설명이 있습니다.
하위 클래스(상속자)는 상위 클래스의 메서드를 사용하여 작업할 수 있으며 필요한 경우 이를 재정의할 수 있습니다.
각 필드 클래스에는 HTML 출력이 있습니다. 클래식 MVC에서 보기는 데이터 출력과 함께 즉시 작동하지만 Joomla에는 추가 레이어인 레이아웃이 있습니다. 이 레이어를 사용하면 레이아웃을 재정의할 수 있습니다. 이는 이 CMS의 가장 중요한 기능 중 하나입니다 핵심 레이아웃은 다음과 같습니다. 사이트 루트의 레이아웃 폴더에 있을 것으로 예상됩니다. getLayoutData() 메서드에서 받은 모든 데이터와 함께 $displayData 배열을 전달합니다. $layout 클래스 속성에서 사용할 출력 레이아웃을 지정합니다.
<?php /** * Name of the layout being used to render the field * * @var string * @since 3.7 */ protected $layout = 'joomla.form.field.email';
이런 유형의 녹음은 매우 일반적입니다. Joomla에서 레이아웃은 사이트 루트에 있는 레이아웃 폴더의 레이아웃 파일에 대한 점으로 구분된 경로입니다. 즉, $layout = 'joomla.form.field.email' 항목은 다음을 의미합니다. 필드를 렌더링할 때 레이아웃이 사용됩니다 layouts/joomla/form/field/email.php.
<?php
use Joomla\CMS\Layout\LayoutHelper;
$displayData = [
'src' => $this->item->image,
'alt' => $this->item->name,
];
echo LayoutHelper::render(
'joomla.html.image',
$displayData
);
마찬가지로 이 예에서는 layouts/joomla/html/image.php 레이아웃을 사용합니다. 일부 레이아웃은 사이트 템플릿과 관리 패널의 html 폴더에서 재정의될 수 있습니다.
따라서 최종적으로 레이아웃에 어떤 데이터가 들어오고 어떻게 표시되는지 정확히 알고 싶으시면 레이아웃 파일에 가서 보시면 됩니다.
이제 기사의 주요 작업으로 돌아가겠습니다.
우리가 공부하는 데에는 예제가 중요합니다(이 글을 쓰는 시점에서는 Joomla 5.0.1):
이 글을 작성할 당시 com_contacts의 단일 접점 모달 선택 필드는 아직 범용 필드 유형으로 변환되지 않았으며 단지 (이 글이 작성되었을 때 Joomla 5.0.2에서) administrator에 있었습니다. /comComponents/com_contact/src/Field/Modal/ContactField.php. ModalSelectField가 아닌 FormField를 직접 상속합니다.
자신의 필드를 추가하는 작업 알고리즘은 다음과 같습니다.
<?php /** * Name of the layout being used to render the field * * @var string * @since 3.7 */ protected $layout = 'joomla.form.field.email';
PHP에서 일어나는 모든 일을 명확하게 하려면 먼저 필드 출력의 레이아웃을 살펴봐야 합니다. layouts/joomla/form/field/modal-select.php 파일에 있습니다. 실제로 2개의 입력 필드가 출력됩니다. 하나는 표시되고 다른 하나는 표시되지 않습니다. 선택한 기사, 연락처 또는 제품의 제목은 자리 표시자($valueTitle 매개변수) 형식으로 표시되는 필드에 입력됩니다. 두 번째는 그의 ID인 $value입니다. 아직 아무것도 선택하지 않은 경우 필드에 "기사 선택" 또는 "제품 선택"과 같은 문구가 있어야 합니다. 이는 XML 필드의 힌트 속성이나 필드 클래스의 setup() 메소드에 넣는 언어 상수입니다.
출력 레이아웃에 사용 가능한 모든 매개변수(프로그래밍 방식으로 또는 XML 파일에서 사용할 수 있는 매개변수를 의미):
<?php /** * Name of the layout being used to render the field * * @var string * @since 3.7 */ protected $layout = 'joomla.form.field.email';
짐작하셨겠지만 필드 클래스는 제 플러그인에 있습니다. 그 방법은 plugins/wtproductbuilder/providerjoomshopping/src/Field/ProductlistField.php입니다. 저는 단일 모달 기사 선택 필드를 기본으로 삼아 필요에 맞게 다시 디자인했습니다. 즉, JoomShopping 온라인 상점에서 제품을 선택했습니다. 상위 ModalSelectField 클래스를 자체 클래스로 확장합니다.
내 작업에는 제품 선택만 포함되고 편집 및 생성은 포함되지 않으므로 기사 텍스트에서는 제품 선택에 대해서만 이야기합니다. PHP 수업은 규모가 작아서 전체적으로 올려드리고 댓글로 달겠습니다.
<?php
use Joomla\CMS\Layout\LayoutHelper;
$displayData = [
'src' => $this->item->image,
'alt' => $this->item->name,
];
echo LayoutHelper::render(
'joomla.html.image',
$displayData
);
이미 선택되어 저장된 경우 선택한 엔터티(제품 이름, 기사 제목 등)의 이름을 표시하는 getValueTitle() 메서드가 별도로 도입되었습니다. 즉, 메뉴 항목을 편집하러 갔지만 필드를 터치하지 않고 ID뿐만 아니라 사람들이 이해할 수 있는 기사 제목/제품명을 보고 싶습니다. 이 방법을 사용하면 원하는 제목이 표시됩니다.
<field
type="productlist"
name="product_id"
addfieldprefix="Joomla\Plugin\Wtproductbuilder\Providerjoomshopping\Field"
label="Field label"
hint="Field placeholder"
/>
다국어 연결 등 더 복잡한 기능이 필요한 일부 필드에는 FormField 클래스의 기본 메서드를 재정의하는 필드 클래스의 다른 메서드가 있습니다.
저희 경우에는 그럴 필요가 없어서 사용하지 않습니다.
'선택' 버튼을 클릭하면