料金プランを有効化して学習を始めましょう。

コンディションビジビリティ

条件付き表示（conditional visibility）を使用して、動的なデザインで要素を表示または非表示にし、さまざまな条件に基づいてコレクションアイテムのユニークなデザインを作成します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

条件付き表示（Conditional visibility）は、動的なデザインで要素を表示または非表示にするための最も汎用性のある方法であり、異なる条件に基づいて異なるコレクションアイテムのためのユニークなデザインを作成します。コレクションリスト内でどのコレクションアイテムが表示されるかを指定するフィルタとは異なり、条件はコレクションリストまたはコレクションページで任意の要素（静的または動的）が表示されるタイミングを指定します。

このレッスンで学ぶこと

使用例:

  • コレクションリスト内の要素を表示または非表示にする
  • ラベルを表示または非表示にする
  • 現在のアイテムを強調表示する
  • コレクションページのセクションを表示または非表示にする
  • 製品が発送できない場合に「店舗で受け取り」のバッジを追加する（e コマース）
  • 比較価格が設定されているかどうかに応じてセールスバッジを表示または非表示にする（e コマース）
  • 注文合計金額に応じて「送料無料」のバッジを表示または非表示にする（e コマース）
  • 特定の国に発送する場合に特定のメッセージを表示または非表示にする（e コマース）

条件付き表示（conditional visibility）を設定する

条件付き表示は、要素が表示されるタイミングを指定します。条件は、コレクションリストまたはコレクションページ内のフィールドまたはアイテムの値に基づいています。

各コレクションフィールドタイプには、選択できる異なる条件があります。

条件を設定するには：

  1. 特定の条件が満たされた場合にのみ表示したいコレクションリスト内またはコレクションページ内の要素（静的または動的）を選択します。
  2. D キーを押して settings panel を開きます。
  3. conditional visibility セクションで、プラス (+) ボタンをクリックして condition を追加します。
  4. 最初のドロップダウンで、表示の基準にしたいフィールドを選択します。
  5. 2番目のドロップダウンで条件を選択します。
  6. 必要に応じて値を指定します。
  7. Save をクリックします。

条件を複数追加することができます。複数の条件が適用されると、すべての条件が満たされる必要があるということを意味します。条件を削除するには、条件の横にあるゴミ箱アイコンをクリックします。

条件ルールを理解する

条件ルールは、フィールドベースのものとアイテムベースのものの2つの種類があります。

フィールドベースの条件

フィールドベースの条件は、指定したフィールドが次のいずれかの条件を満たす場合に効果を発揮します：

  • 設定されている（Is set） または 設定されていない（not set）
  • 特定の値と 等しい（Equals） または 等しくない（doesn’t equal）
  • 特定の値を 含む（contains） または 含まない（doesn’t contain）
  • 数値の 大きい（is greater than）、小さい（less than）、または2つの数値の間（between）にある
  • Is ON または OFF
  • 特定の日付範囲に含まれる

アイテムベースの条件

アイテムベースの条件は、コレクションアイテムが 現在のアイテムである または 現在のアイテムでない 場合に適用されます。

条件とフィルタの違いを理解する

コレクションリストのフィルターは、ルールに基づいてコレクションリスト内のコレクションアイテムを表示または非表示にすることを可能にします。

条件付き表示では、同じルールを使用して、コレクションリスト内またはコレクションページで要素を表示または非表示にします。

例えば、"Featured (switch) is on "というルールを使って、注目のブログ記事には "Featured "というテキストラベルを表示し、Featuredスイッチがオフに設定されている要素にはこのラベルを非表示にすることができます。

一方、特集記事だけをリストに表示したい場合は、同じルールをコレクションリストのフィルターとして設定することができます。

例

以下は、条件とフィルタを適用するいくつかの方法です。

コレクションリスト内の要素を表示または非表示にする

たとえば、チームメンバーが含まれており、一部はメールアドレスを持っているが、他のメンバーは持っていないとします。コレクションリストには、メールフィールドからURLを取得するテキストリンクがあります。

メールアドレスのないチームメンバーのためにテキストリンクを非表示にする方法を見てみましょう。

  1. テキストリンクを選択します。
  2. メールアドレスフィールドが設定されている場合に要素が表示されるようにする Condition を追加します。
  3. Save します。

この条件は、Eメールフィールドに接続されているテキストリンクに設定されます。

ラベルを表示または非表示にする

ブログ投稿のコレクションリストがあるとしましょう。注目のアイテムに「注目」というラベルを表示したいとします。コレクションリストに追加された要素はすべてのコレクションアイテムに表示されるため、この要素を「注目がオン」の条件を満たさないアイテムでは非表示にするために条件付き表示を使用できます。

  1. ブログ投稿のコレクションリスト内に「注目」のラベルを作成します。
  2. ラベルを選択します。
  3. ラベルが「注目がオン」の場合に要素が表示されるようにする Condition を追加します。
  4. Save します。

現在のアイテムを強調表示する

ブログ投稿コレクションページにブログ投稿の一覧があるとしましょう。このリストには現在のブログ投稿、つまり現在表示しているページのブログ投稿アイテムも含まれています。この現在のブログ投稿を非表示にするには フィルターを使用するか、コレクションアイテムのための第二のデザインを作成して強調表示することができます。

これで、Collectionリストの各Collectionアイテムに、各ブログ記事の2つの表現ができました。

現在のブログ投稿に対して固有のデザインを表示したい場合、次の2つの手順を実行する必要があります：

  1. 現在のアイテムに対して、最初のデザインである「Post item wrapper」を非表示にする条件を追加します。
  2. 現在のアイテムに対して、新しいデザインである「Current post item wrappe」を表示する条件を追加します。

コレクションページのセクションを表示または非表示にする

特定のコレクションページでのみ表示したいセクションがあるかもしれません。たとえば、カテゴリが「Christmas」の場合にのみ、このセクションとその子要素が表示される条件を作成できます。

  1. セクションを選択します
  2. Condition を追加します
  3. 最初のドロップダウンで Category field を選択します
  4. 二番目のドロップダウンで equals を選択します
  5. 値として Christmas を指定します
  6. Save します

さまざまなコレクションフィールドガイドでさらなる例とユースケースをご覧いただけます。

conditional visibilityを使用して、ECサイトをサポート

ECサイトで独自のデザインを作成しましょう。コンディショナルビジビリティを使用して、製品または注文データに基づいて要素を表示または非表示にし、製品の属性を強調表示したり、チェックアウト時に追加情報を提供したりできます。

製品および製品バリアントフィールドに基づいて要素を表示または非表示にする

特定のデザインを固有の製品バリアントに紐づけるには、メインイメージ、比較価格、長さ、幅、SKUなどのバリアントフィールドにコンディショナルビジビリティを設定します。

固有の製品バリアントに対して要素を表示または非表示にするには：

  1. 特定の条件が満たされた場合に表示される要素を選択します
  2. 設定パネルで Condition を追加します
  3. ドロップダウンメニューで製品フィールド（たとえば、比較価格）のいずれかを選択します
  4. 条件を設定します（存在するか、特定の値と等しいなど）
  5. Save します

同じバナーやコールアウトの概念は、製品バリアントが選択された場合にのみ表示されるようにSKUのコンディショナルビジビリティオプションを使用して適用できます。

使用例：

  • 製品が出荷できない場合、店頭受け取りのバッジを追加
  • 比較価格が設定されているかどうかに応じてセールバッジを表示または非表示

比較価格フィールドが設定されている製品にセールバッジを追加した例

ライブプロダクトのナビゲーション時にセールバッジが更新される例。

製品注文データに基づいてチェックアウトフロー内の要素を表示または非表示にする

チェックアウト情報に依存するバナーやコールアウトを追加できます。たとえば、カートの合計、小計、または配送情報に応じてバナーを表示できます。

チェックアウトページに条件付きの表示を設定するには：

  1. 特定の条件が満たされた場合に表示される要素を選択します
  2. Condition を追加します
  3. ドロップダウンメニューから配送フィールドのいずれかを選択します（例：小計）
  4. 条件を設定します（存在するか、特定の値と等しいなど）
  5. Save します

使用例：

  • 注文の小計に応じて「送料無料」バッジを表示または非表示にする
  • 特定の国への発送時に特定のメッセージを表示または非表示にする
重要なこと：国または請求先住所に基づいた条件付きの表示を設定する際、国は2文字の略語として入力する必要があります。たとえば、アメリカ合衆国はUSとして入力する必要があります。
重要なこと：価格に基づいた条件を追加する際、価格はストアの価格設定に関係なく、小数点のセパレータとしてドットを使用して1000.00のようにフォーマットする必要があります。たとえば、100,50 €は100.50と入力する必要があります。