コレクションリストは、CMSコレクションまたはEコマースコレクションから動的なコンテンツを追加してデザインする2つの方法のうちの1つです。コレクションリストは、どのようなタイプのページにも追加することができます。もう一つの方法は、Collectionページを使用して動的コンテンツを追加する方法です。
このレッスンでは
- コレクションリストを追加する
- コレクションリストをコレクションに接続する
- コレクションリストを設計する
- コレクションリストの構造を理解する
- コレクションリストの設定を構成する
について説明しています。
1. コレクションリストの追加
アイテムを持つコレクションが1つ以上あれば、プロジェクト内の静的ページやコレクションページにコレクションリストを追加することができます。追加パネルからコレクションリストをドラッグするか、クイック検索(CMD/CTRL+E)から追加することができます。
2. コレクションに接続する
コレクションリストは、コレクションに接続されていなければ意味がありません。コレクションリストをダブルクリックして、コレクションリストの設定を開き、ドロップダウンから必要なコレクションを選択します。
3. コレクションリストを設計する
Collectionを選択すると、CollectionリストにはそのCollectionの全アイテムが空のブロックとして表示されます。リストに要素を追加し、Collectionフィールドに接続すると、自動的に各Collectionアイテムの正しいデータを取得することができるようになります。
静的・動的要素の追加
空のコレクションアイテムブロックのいずれかに要素をドロップすると、そのアイテムはそのコレクション内のすべてのアイテムに対して繰り返されます。これは、「静的」コンテンツ、つまりコレクションに由来しないコンテンツと呼ばれます。
ここで、その要素をCollectionフィールドに接続すると、要素内のコンテンツが各Collectionアイテムのコンテンツに自動的に置換されます。コンテンツがCMSから供給されるため、「動的」コンテンツとなります。
コレクションフィールドへの要素の接続
静的要素をコレクションフィールドに接続し、その要素のコンテンツを動的に更新することができます。静的要素は青い輪郭を持ち、動的要素、または CMS からデータを受け取る要素は、キャンバス上で紫の輪郭を持ちます。要素をコレクションフィールドに接続するには以下の操作をします。
- コレクションリストで要素を選択します。
- 要素設定を開きます。
- Get <data type=""> from <collection></collection></data>" というラベルの付いたボックスをチェックします。
- ドロップダウンを開き、コンテンツを取得したいコレクションフィールドを選択します。
動的要素のスタイル設定
コレクションリストに静的要素を追加すると、それらのアイテムが繰り返されるのと同様に、任意の要素（静的または動的）にスタイルを追加すると、そのリスト内のすべてのコレクションアイテムにわたってそのスタイルが適用されます。たとえば、見出しをフィールドに接続し、その見出しのテキスト色を緑にすると、そのリスト内のすべてのアイテムは、内容は異なりますが、同じ緑のスタイルを持つことになります。
カラーフィールドやイメージフィールドから色や背景画像を取得することで、動的なスタイル設定を適用することができます。
コレクションリストの構造を理解する
コレクションリストラッパー
デフォルトでは、コレクションリストラッパーは、次のコンポーネントを含んでいます: コレクションリストと空の状態。ページネーションが有効な場合は、ページネーションラッパーも含まれます。ラッパーを複製することで、複数のパジネーションラッパーを追加することができます。
コレクションリスト
コレクションリストコンポーネントには、リストのコレクションアイテムが含まれます。このコンポーネントには、他の要素を追加することはできません。
コレクションアイテム
コレクションアイテムコンポーネントには、コレクションリストに追加される実際のコンテンツが含まれます。ここにドロップされたアイテムは、リスト内のすべてのアイテムに反映されます。これらの要素は、Collectionフィールドに接続されるか、条件付き可視性が適用されるまでは静的です。これにより、動的要素に変換されます。ナビゲータでは、動的要素は紫色のアイコンで表示されます。
エンプティ状態
空の状態は、リストに表示する項目がない場合に、コレクションリストを置き換えます。デフォルトでは、背景がグレーで、テキストブロックが含まれています。スタイルを変更したり、要素を置き換えたり追加することで、独自の空の状態を作成することができます。
ページ処理
ページネーションコンポーネントには、「前のボタン」と「次のボタン」という2つのリンクブロックがあります。これらのそれぞれは、スタイルを変更したりカスタマイズしたりすることができますが、このラッパーに他の要素を追加することはできません。
コレクションリスト設定の構成
コレクションリストには、表示されるコンテンツを制御するための独自の設定があります。また、リストのレイアウトを様々な方法で変更することができます。コレクションリストラッパーまたはコレクションリスト要素を選択し、エンターキーを押すか、Dキーを押して要素設定パネルを開くことで設定にアクセスすることができます。
コレクション
ここでは、コレクションリストに接続するコレクションを選択することができます。コレクションリストに接続するコレクションを変更できるのは、リスト内のどの要素も現在接続されているコレクションのフィールドに接続されていない場合のみです。
UI状態
この設定により、ItemsビューとEmpty状態ビューを切り替えて、コレクションリストのその状態を編集することができます。
この設定は、ライブサイトでのコレクションリストの状態を設定するものではありません。コレクションリストの実際の状態は、そのアイテムによって決定されます。空の状態は、コレクションにアイテムがない場合、またはフィルタリングされている場合のみ表示されます。
レイアウト
リストを縦に積み重ねるか、columns要素と同様に列方向にレイアウトを変更することができます。
また、コレクションリストにグリッドを適用して、ダイナミックグリッドを作成することもできます。この場合、Collectionリストの設定でレイアウトを "list "に設定してください。
アドバイス ：
コレクションリストには、フレックスボックスを使用して、同じ高さのレイアウトを構築することをお勧めします。コレクション内のコンテンツはそれぞれ異なるため、フレックスボックスを使用しない列のレイアウトでは位置がずれる可能性があります。
フィルター
フィルタを追加すると、必要なCollectionアイテムのみを表示することができます。
ソート順
ソート順では、特定のフィールドに基づいてコレクションリストをソートすることができます。
アイテムのページ送り
コレクションリストをページ分割して、特定の数のアイテムを表示することができます。
項目を制限する
このオプションでは、コレクションリストに表示するアイテムの数と、どのアイテムからリストを開始するかを定義することができます。例えば、リストがアイテム5から始まり、3つのアイテムしか表示されないようにすることができます。この場合、アイテム5、6、7が表示されます。
注意点 ：
ページネーションが有効でない限り、コレクションリスト1つにつき100アイテム、1ページにつき20リストが最大限度です。ページ送りを使って、Collection リストに100以上のアイテムを表示する方法については、こちらをご覧ください。