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

このレッスンでは

  1. 条件の可視性を設定する
  2. 条件ルールを理解する
  3. 条件とフィルタを理解する
  4. 条件付き可視性でeコマースプロジェクトをサポートする

について説明しています。

〜使用例〜

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

1. 条件付き可視性の設定

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

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


The conditional visibility panel includes a plus icon to add a condition. If no conditions are currently added, a None message is displayed under the conditions section.

条件を設定するには

  1. コレクションリスト内またはコレクションページで、特定の条件を満たした 場合にのみ表示する静的または動的な要素を選択します。
  2. D キーを押して、設定パネルを開きます。
  3. 条件付き可視性セクションで、プラス（+）ボタンをクリックして条件を追加します。
  4. 最初のドロップダウンで、可視性の基準となるフィールドを選択します。
  5. 2番目のドロップダウンで条件を選択します
  6. 必要であれば、値を指定します。
  7. 「保存」をクリックします。

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

2. 条件ルール

条件ルールには、フィルタルールと同様に、フィールドベースとアイテムベースがある。


・フィールドベース条件


フィールドベースの条件は、指定されたフィールドが以下の場合に適用される。


  • 設定されている、または設定されていない
  • ある値と等しいか等しくないか
  • 特定の値を含むか含まないか
  • より大きい、より小さい、または2つの数値の間の数値である。
  • オンまたはオフ
  • ある日付の範囲に属している


・アイテムベースの条件

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

3. フィルタ

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

The add filter drop down menu includes date written, post body, post summary, main image, thumbnail image, featured? and Blog Post.

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

On the left, a featured text block tag is selected. On the right, the text block settings has a condition "Featured? is on" under the Conditional Visibility panel.

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

一方、注目の投稿だけをリストに表示したい場合は、これと同じルールをCollectionリストのフィルタとして設定します。

On the left, two featured blog posts are displayed within a Collection List wrapper. On the right, the collection list settings use a source called Blog posts and has a filter for "Featured? is on".


条件やフィルターを適用する方法には、次のようなものがあります。

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

チームメンバーを含むコレクションリストがあり、メールアドレスを持っている人と持っていない人がいるとします。コレクションリストには、電子メールフィールドから URL を取得するテキストリンクがあります。


ここでは、電子メール アドレスを持たないチーム メンバーのテキスト リンクを非表示にする方法を説明します。

  1. テキストリンクを選択します。
  2. 電子メール・アドレス・フィールドが設定されているときに、この要素が表示されるという条件を追加します。
  3. 保存
The Add condition panel includes two dropdown menus for Element is visible when. The condition settings include Email (Author), Is set. A save button is at the bottom of the panel.
この条件は、メールフィールドに接続されたテキストリンクに設定されます。

ラベルの表示・非表示

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


  1. ブログ投稿のコレクションリストに「注目」ラベルを作成する
  2. ラベルを選択
  3. Featured?（スイッチ）がオンのとき、この要素が表示されるという条件を追加します。(スイッチ)がオンのとき、要素を表示するという条件を追加する
  4. 保存をクリック


現在の項目を強調表示する

ブログ記事コレクションのページに、ブログ記事のリストがあるとします。このリストには、現在のブログ記事、つまり現在いるページのブログ記事アイテムも含まれています。この現在のブログ記事をフィルターで隠すこともできますが、Collectionアイテムに2つ目のデザインを作成することで、強調することができます。

A collection list wrapper includes eight blog post cards. Two are coming soon and six are posted with read more buttons to enter the post.

これで、Collectionリストの各Collectionアイテムに、各ブログ記事に対して2つの表現ができるようになります。

In the navigator a collection item includes a Post item wrapper and a Blog post list item.

現在のブログ記事だけユニークなデザインを表示したいので、2つのことをする必要があります。

  1. 最初のデザインを非表示にする条件を追加する。この例では、現在のアイテムに対して「Post item wrapper」です。
  2. 新しいデザインを表示するための条件を追加する。この例では、"Current post item wrapper" を、現在のアイテムに対してのみ表示します。
On the left, a post item wrapper is selected. On the right, the edit condition panel includes the settings Blog Post is not for "Element is visible when".
On the left, a blog post list item is selected. On the right, the edit condition panel includes the settings Blog Post is for "Element is visible when".

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

特定のコレクションページでのみ表示したいセクションがある場合があります。このセクションとその子セクションは、例えば、カテゴリが "クリスマス" のときのみ表示されるように条件を作成することができます。


  1. セクションを選択する
  2. 条件を追加する
  3. 最初のドロップダウンでCategoryフィールドを選択します
  4. 2番目のドロップダウンで「等しい」を選択
  5. 値としてクリスマスを指定する
  6. 保存

その他の例や使用例は、さまざまなコレクションフィールドガイドで見ることができます。

4. 条件付き可視化でECプロジェクトを支援する

eコマースストアでユニークなデザインを実現しましょう。条件付き表示機能を使用して、製品や注文のデータに基づいて要素を表示または非表示にします - 製品の属性を強調したり、チェックアウト時に追加情報を提供します。


製品および製品バリアントフィールドに基づく要素の表示/非表示

メイン画像、価格比較、長さ、幅、SKUなどのバリアントフィールドに条件付き可視性を設定することで、特定のデザインを固有の製品バリアントに関連付けることができます。


ユニークな製品バリアントの要素を表示または非表示にするには、以下の手順に従います。


  1. 特定の条件を満たしたときに表示させたい要素を選択します。
  2. 設定パネルで、「条件」を追加します。
  3. ドロップダウンメニューで、製品フィールド（例：価格比較）を1つ選択します。
  4. 条件を設定します（例：特定の値が存在する、または等しい）。
  5. 保存する

同じバナーまたはコールアウトのコンセプトは、SKU条件付き表示オプションを使用して、製品バリエーションに適用することができます。思い描いたコールアウト要素を作成し、製品バリエーションが選択された場合にのみ表示するよう設定します。


使用例

  • 製品が出荷可能でない場合、「店舗で受け取る」バッジを追加する。
  • compare-at-price が設定されているかどうかで、販売バッジを表示または非表示にする。


※compare-at-price フィールドが設定された製品に販売バッジを追加した例。


The add condition panel is highlighted on the bottom right of the Designer.
Example one on the left, a condition is set as "Element is visible when Name equals a value". Second example on the right, a condition is set as "Element is visible when Compare-at price Is Set".

‍ 商品をナビゲートする際にセールバッジがライブで更新される例。

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

チェックアウト情報に依存するバナーや吹き出しを追加することができます。例えば、カートの合計金額、小計、配送情報に応じてバナーを表示することができます。

チェックアウトページで条件付き可視性を設定するには。

  1. 特定の条件を満たしたときに表示させたい要素を選択します。
  2. 条件を追加する
  3. ドロップダウンメニューから配送欄（例：小計）を1つ選択します。
  4. 条件を設定します（例：特定の値が存在する、または等しい）。
  5. 保存

使用例

  • 注文の小計に応じて「送料無料」バッジを表示または非表示にする。
  • 特定の国への配送時に、特定のメッセージを表示または非表示にする。
重要事項：国または請求先住所に基づいて条件付きの可視性を設定する場合、国は2文字の略語として入力する必要があります。例えば、United StatesはUSと入力する必要があります。

知っておくと便利なこと 価格に関する条件を追加する場合、ストアの価格設定に関係なく、金額は1000.00としてフォーマットする必要があります（小数点以下を使用）。例えば、100,50ユーロは、100.50と入力します。