web-dev-qa-db-ja.com

ページビューに条件付きフィールドを表示するにはどうすればよいですか？

保存時に選択したフィールドに応じて、ページレンダリングで2つのフィールドのいずれかを表示したい。

バナーヘッダーと呼ばれる段落フィールドを持つコンテンツタイプがあります。バナーヘッダーには、吹き出しリンクと呼ばれるフィールドグループがあります。吹き出しリンクには3つのアイテムが含まれています。

  1. 単一のリンクを受け入れるフィールド。
  2. 複数のリンクを受け入れるフィールド。
  3. コールアウトリンクコントロールと呼ばれる選択リストのラジオボタン。

これが私のバナーヘッダーのカスタム段落コードです。

{# initiate the printing of the banner #}
{{content.field_banner}}
<div class="banner-info
{% if content.field_callout_icon.0 or content.field_callout_text.0 %} has-callout
{% else %}
no-callout
{% endif %}">
    {# print out the title of the node #}
    <h1>{{ node_title }}</h1>
    <div class="leadin-wrapper {{ content.field_leadin_background.0['#markup'] }}">
       <div class="leadin-subwrapper">
           {{content.field_leadin}}
       </div>
    {# If there is content in the field_callout_icon or field_callout_text #}
        {% if content.field_callout_icon.0 or content.field_callout_text.0 %}
           <div class="callout-wrapper {% if content.field_callout_link.0 or content.field_small_callout_button_link.0 %} linked{% endif %}">
                {% if content.field_callout_link_control.0 == 'A single large button link' %}
                         <a href="{{ content.field_callout_link.0['#url'] }}">
                {% endif %}
                {% if content.field_callout_link_control.0 == 'Multiple small button links' %}
                        <a href="{{ content.field_small_callout_button_link.0['#url'] }}">
                        {% if content.field_callout_link.0 %}
                                <div style="visibility: hidden;">{{content.field_callout_link.0}}</div>
                        {% endif %}
                {% endif %}
                <div class="callout-wrapper-inner">
                   {{ content.field_callout_icon }}
                   {{ content.field_callout_text }}
               </div>
                </a>
           </div>
        {% endif %}
    </div>
</div>

選択したラジオボタンに応じて、対応する吹き出しリンクフィールド（field_callout_linkまたはfield_small_callout_button_link）を表示します。

これをいくつかの方法で試しました。私のコードを見るとわかるように、小枝を使ってフィールドの表示方法を制御しようとしました。

また、conditional_fieldsモジュールを試し、次の依存関係を設定しました。

条件1

  • ターゲットフィールド：field_callout_link

  • 制御者：field_callout_link_control

  • 説明：！disabled

  • 値：[対応するラジオボタンが選択されています]

条件2

  • ターゲットフィールド：field_small_callout_button_link

  • 制御者：field_callout_link_control

  • 説明：！disabled

  • 値：[対応するラジオボタンが選択されています]

私が見る動作では、どのラジオボタンが選択されているかに関係なく、フィールドfield_callout_linkのみがページレンダリングに表示されます。

ラジオボタンの選択に基づいてページがレンダリングされるときに、どのフィールドを表示するかをどのように制御できますか？

8themingentitiesjavascript
1
lane

これには条件フィールドは必要ありません。このIMOを行う最も簡単な方法は、Twigファイルの値を確認するか、プリプロセス関数で新しい変数を作成して、何をすべきかを示すことです。

例：

{% if node.field_callout_icon or node.field_callout_text %}
  {% if node.field_callout_link_control.value == 'A single large button link' %}
    markup
  {% elseif ... %}
    markup
  {% endif %}
{% endif %}

または、ノードを前処理して、フィールド値を確認することもできます。

function mytheme_preprocess_node(&$variables) {
  $node = $variables['elements']['#node'];

  $field_value = $node->get('field_name')->getValue();
  // .. do stuff with the field value
  $variables['my_new_flag'] = 'some value or bool';
}

次に、ノードtwigで、ブール値の場合：

{% if my_new_flag %}

または、値を割り当てた場合：

{% if my_new_flag == '...' %}

私がお勧めしないのは、レンダー配列を調べて値を読み取るか探すことです。ノードオブジェクトを使用するか、ノードを前処理して値を評価し、必要に応じて新しい変数を作成します。

ここに私が使用している実際の例があります。コンテンツがサービスであるかツールであるかを示すノードタイプの選択フィールドがあります。どちらに応じて、タイトルの横に正しいSVGファイルを出力する必要があります。値をチェックして、テンプレートの変数を作成しています。

mytheme.theme：

/**
 * Implements hook_preprocess_node().
 */
function mytheme_preprocess_node(&$variables) {
  $node = $variables['elements']['#node'];

  if ($node->getType() == 'services') {
    $variables['icon_type'] = $node->get('field_service_or_tool')->value;
  }
}

ノードタイプtwig file：

{% if icon_type == 'service' %}
  {% include "@mytheme/svg/general/service.html.twig" %}
{% else %}
  {% include "@mytheme/svg/general/tool.html.twig" %}
{% endif %}

twigでも確認できますが、テンプレートをすっきりさせたままにすることができます/私の意見では読みやすくなっています。

1
Kevin