Joomla 5 で ModalSelect Form フィールド タイプを使用すると、拡張機能の開発時にカテゴリ、メーカー、検索を使用してモーダル ウィンドウでフィルタリングすることで、数千の中から適切な製品を簡単に見つけることができます。
クライアントと協力する過程では、さまざまなレベルのタスクがあります。誰かが 5 ～ 6 ページのシンプルな Web サイトを必要としています。 REST API を使用してサードパーティ システムと統合された大規模な商品カタログやオンライン ストアが必要な場合があります。利用できる一般的なソリューションがない非標準の機能を必要とする人もいます。
Joomla は開発に適しており、メンテナンスが簡単なコードを作成できます。要件が CMS コアに従っている場合、これらすべてのケースに対する答えが得られます。
大規模なプロジェクトを完了するには、プロジェクトを小さなタスクに分割する必要があります。この記事では、これらのタスクの 1 つを解決する方法について説明したいと思います。
顧客は、Joomla (JoomShopping) のオンライン ストアの人気コンポーネントの 1 つで製品カタログをすでに作成しています。製品のパラメータを選択し、カートに入れて購入することができます。すべていつも通りです。ただし、ここで、製品のグラフィック レイアウトを作成する機能を追加する必要があります。たとえば、商品がマグカップや T シャツであるとします。購入する前に、製品デザイナーにアクセスし、ロゴや写真をアップロードし、テキストを書くと、このレイアウトがオンライン ストアでの注文に添付されます。支払い後、レイアウトは直接制作に入り、画像とテキストがマグカップに適用され、住所に送信されます。
この機能の実装には非常に時間がかかるため、別のプロダクト デザイナー コンポーネントとして作成されます。また、データ プロバイダー プラグインがすでに作成されているため、1 つまたは別の e コマース コンポーネントを操作できるようになります。
小さな応用タスクの 1 つは、オンライン ストア コンポーネントの商品とプロダクト デザイナー コンポーネントの商品間の接続を作成することです。これは、将来コンテンツに取り組むコンテンツ管理者にとって便利で直感的なものとなるはずです。したがって、希望する製品の ID 番号を表示するテキストフィールドを作成するだけでは十分ではありません。オンライン ストアには数十の製品しかないかもしれませんが、コミュニケーション用の製品を選択することはそれほど難しくありません。数千の製品がある場合、パラメータによって製品を検索およびフィルタリングする機能が重要になります。製品のリストをカテゴリ、メーカーでフィルタリングしたり、数百もの製品の中から名前で検索したりできれば、作業がはるかに速く、簡単になります。
ビデオを見る
このフィールドは、エディター ボタン プラグイン (editors-xtd グループ) の機能に非常に似ており、選択用のデータ (記事へのリンク、モジュールの短いコードなど) がモーダル ウィンドウに表示されます。
Joomla 管理者パネルには、他のコンポーネントからのデータを入力する必要があるさまざまなフィールドがあります。記事、メニュー項目、連絡先、製品などを指定します。通常、このようなフィールドは選択オプションのドロップダウン リストとして設計されています。 、データリストを使用して input type="text" として設計できますが、フィルタリング、検索、ページネーションを備えた必要なエンティティのリストを表示する便利なフィールドもあります。サイト内のソース (さまざまなコンポーネント、プラグイン) だけでなく、REST API 経由で利用できるサードパーティのサービス (CRM、配信サービス、外部データベース、他の Joomla サイトなど) もデータ ソースとして機能できます。
私たちは皆、「記事 - 単一の記事」、「連絡先 - 単一の連絡先」などのメニュー項目で記事を選択するとき、またはメニュー項目のエイリアス - 「システム リンク - メニュー」を作成するときに、これらのフィールドが動作しているのを見たことがあるでしょう。アイテムのエイリアス」。ただし、それらがどのようなものであるかを思い出してください。
モーダル記事選択ウィンドウ。
モーダルな単一の連絡先選択ウィンドウ。
これらのフィールドを詳しく見てみましょう。具体的に何ができるのかを見てみましょう。深いところでは、このフィールドの主な役割は選択されたエンティティの ID を取得し、この ID をテキスト フィールドに入力することであると理解しています。しかし、画面には別のものが表示されます。ID 番号の代わりに、記事のタイトルまたは連絡先が表示されます。素敵で便利です。 ID 1452704 の記事の名前を覚えておく必要はありません。また、ビデオでは、フィールドにすでに値がある場合、「クリア」ボタンが表示されることが明確に示されています。フィールドの値がリセットされ、[選択] ボタンを再度クリックできるようになります。
場合によっては、メニュー項目の作成プロセス中に、選択したタイプのエンティティ (記事、連絡先など) を作成する機会があります。このボタンは、ACL (Joomla でのアクセス権の分離) を考慮して機能します。
Web サイトを構築し、「連絡先」ページを作成していると想像してください。複雑な構造を持つ多数の支店がない場合、これは「未分類」カテゴリにある通常の 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 クラスが使用されます)、ファイルリスト タイプの Joomla フィールドを覚えておいてください。フィルタリング パラメータを指定して、たとえば、php ファイルのみまたは CSS ファイルのみを選択できます。
Joomla Form フィールド クラス ファイル は libraries/src/Form/Field にあります。控えめに言っても、それらはたくさんあります。これは管理パネルの構築マテリアルであり、場合によってはフロントエンドでもあります。
クラス ファイルには、$type、$layout、その他動作に必要なクラス プロパティが記述されます。ほとんどのフィールドにはメソッド getInput() - 実際にフィールドの HTML 出力を返します、getLayoutData() - レンダリングに送信する前にフィールドのデータを前処理します、getLabel() - フィールド ラベルの操作などがあります。
フィールド クラスが親 FormField クラスを継承していることを思い出してください。クラス ファイル libraries/src/Form/FormField.php には、フィールドの可能な属性が記述されており、XML での記述に使用できます。それが何なのか、そしてその理由が簡単に説明されています。
子クラス (継承者) は、親クラスのメソッドを操作し、必要に応じてそれをオーバーライドすることができます。
各フィールド クラスには HTML 出力があります。クラシック MVC では、ビューはデータ出力を即座に処理しますが、Joomla には追加レイヤーであるレイアウトがあり、この CMS の最も重要な機能の 1 つであるレイアウトをオーバーライドできます。 コア レイアウトは次のとおりです。このファイルは、サイトのルートの layouts フォルダー に配置されることが予想されます。 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 は、サイトのルートにあるレイアウト フォルダーからレイアウト ファイルへのドット区切りのパスです。 つまり、エントリ $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 で) 管理者にのみ存在します。 /components/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 つの入力フィールドが出力されます。1 つは表示され、もう 1 つは非表示になります。選択した記事、連絡先、または製品のタイトルが、プレースホルダーの形式で表示されるフィールド ($valueTitle パラメーター) に入力されます。 2 番目は彼の 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 クラスの基本メソッドをオーバーライドするフィールド クラスの他のメソッドがあります。
私たちの場合、そのような必要はないので、使用しません。
「選択」ボタンをクリックすると、モーダル ブートストラップ ウィンドウが開き、製品のリストが