Craft CMS でドロップダウンフィールドの設定を利用してフロント側で select 要素を書き出す

Craft CMS でドロップダウンフィールドの設定から select 要素を書き出す方法をご紹介します。

Craft CMS Logo

Craft CMS で下記のような設定のドロップダウンフィールドを作成したとします。フィールドのハンドルは player です。

Create a new field Craft min

これを元にして、公開側で select を書き出す方法をご紹介します。検索フォームを作るときなどに便利だと思います。

テンプレートを実装

テンプレートは下記のようになります。

{% set playerField = craft.app.fields.getFieldByHandle('player') %}
<select name="player" id="player">
    {% for option in playerField.settings.options %}
        <option value="{{ option.value }}">{{ option.label }}</option>
    {% endfor %}
</select>

craft.app.fields.getFieldByHandle('player') でフィールドの情報を取得し、 .settings.options で選択肢の情報を取得します。

なお、Craft 2 までは、

craft.fields.getFieldByHandle('player')  

だったのが、Craft 3 から、

craft.app.fields.getFieldByHandle('player')  

となりました(詳しくは「Upgrading from Craft 2 | Craft CMS Documentation | 3.x」参照)。

出力される HTML は下記のようになります。

<select name="player" id="player">
    <option value="baggio">ロベルト・バッジョ</option>
    <option value="cruyff">ヨハン・クライフ</option>
    <option value="zico">ジーコ</option>
</select>
Published 2018-02-22
Updated 2024-02-21