品揃えカタログ

アソートメント カタログは、CMS コレクションまたは e コマース コレクションから動的コンテンツを組み込んでスタイルを設定する 2 つの方法のうちの 1 つです (もう 1 つの方法は、コレクション ページを使用することです)。アソートメント カタログは、サイトの任意のページに追加できます。

アソートメント カタログについて詳しく調べる前に、他のチュートリアルで CMS と CMS コレクションについて詳しく学んでください。

• Webflow CMS の紹介
• 動的コンテンツの概要
• 選択

このチュートリアルでは、次のことを学びます。

1. 品揃えカタログを追加する方法
2. 品揃えカタログをコレクションにリンクする方法
3. 品揃えカタログのスタイル設定方法
4. 品揃えカタログの構造
5. 品揃えカタログ設定を構成する方法
6. 品揃えカタログのコンポーネントについて

品揃えカタログを組み込む方法

アソートメント商品を含むコレクションを 1 つ以上保有している場合は、サイト上の任意の永続ページまたはコレクション ページにアソートメント カタログを組み込むことができます。アソートメント カタログを組み込むには、次の手順を実行します。

1. 開始する 挿入パネル
2. タップして描く 品揃えカタログ あなたのサイトのページに

高速検索を使用して、品揃えカタログを含めることもできます。 指示 + え (Macの場合) または コントロール + え (Windows の場合)。

品揃えカタログをコレクションにリンクする方法

アソートメント カタログは、コレクションに関連付けられるまでは無効です。アソートメント カタログをコレクションにリンクするには、次の手順を実行します。

1. ダブルタップして 品揃えカタログ 品揃えカタログ設定を展開する
2. お好みのコレクションを選択してください ソース (例: 著者、ブログ投稿、クライアントなど)

述べる： アソートメント カタログをコレクションに接続すると、コレクションを CMS パネルで以前に公開していない限り、コレクション カタログのアイテム タグにコレクション アイテム名が表示されません。この問題に対処するには、アソートメント カタログをコレクションにリンクする前に、CMS パネルでコレクションを公開します。

品揃えカタログのスタイル設定方法

コレクションをアソートメント カタログに接続すると、アソートメント カタログにはそのコレクション内のすべてのアイテムが空のブロックとして表示されます。アソートメント カタログに要素を追加し、それらの要素をコレクション フィールドにリンクすることができます。その後、それらの要素はコレクションのデータで自動的に入力されます。

固定コンポーネントと動的コンポーネントを組み込む

空になった Assortment カタログ ブロックの 1 つに要素を追加すると、その要素は各 Assortment カタログ ブロックに複製されます。これは、「固定」コンテンツ、つまりコレクションから生成されないコンテンツとして認識されます。

要素をコレクション フィールドに接続すると、要素のデフォルトのコンテンツ (見出し要素の「見出し」という単語など) が各コレクション項目のコンテンツに自動的に置き換えられます。コンテンツは CMS コレクションから取得されるため、「動的」コンテンツになります。

静止した要素はキャンバス上で青いアウトラインで表示されますが、動的な要素 (CMS からのデータを持つ要素) は紫色のアウトラインで表示されます。 

コレクションフィールドに要素をリンクする

固定要素をコレクション フィールドにリンクして、その要素のコンテンツを動的に修正することができます。要素をコレクション フィールドにリンクするには、次の手順を実行します。

1. に移動 挿入パネル
2. 追加 要素 （例：見出し、段落など）をアソートメントカタログに追加します
3. 品揃えカタログから要素を選択してください
4. 案内する 要素設定
5. 「受信」というラベルの付いたボックスを確認してください 文章 から ブログ投稿（フィールドタイプとコレクション名は、選択した要素とコレクションによって異なる場合があります）
6. 発見する フィールドを選択 落ちる
7. を選択 収集分野 コンテンツを受け取りたい

各コレクション フィールド タイプを関連する要素にリンクする方法について詳しく説明します。

コレクションフィールドから要素を分離する

コレクション フィールドから要素を切り離すオプションもあります。

1. 品揃えカタログから要素を選択してください
2. 案内する 要素設定‍
3. 「受信」のチェックボックスをオフにします 文章 から ブログ投稿（フィールドタイプとコレクション名は、選択した要素とコレクションによって異なる場合があります）
   • 選択した内容

   動的な側面を実装する

   コレクション リスト内の任意の要素 (静的または動的) にスタイルを導入すると、そのスタイルはそのコレクション リスト内のすべての項目に反映されます。たとえば、見出しをコレクション フィールドにリンクし、緑のフォント色でスタイルを設定すると、そのコレクション リスト内のすべての見出しは同じ緑のフォント色を継承します。

   雇用することもできます インタラクティブスタイルの構成 コレクション アイテム内の色と画像フィールドから色と背景画像を抽出して、コレクション リストを作成します。

   

   コレクションリストの構造構成

   

   コレクションリストの囲みラッパー

   デフォルトでは、コレクションリストラッパーには コレクションリスト そしてその 無効ステータスページネーションが有効になっている場合は、 ページネーション コンテナー。ラッパーを複製することで、追加のページ区切りコンテナーを挿入することもできます。

   コレクションの一覧

   の コレクションリストラッパー コレクション リスト内のコレクション項目を囲みます。このラッパーに他の要素を追加することはできません。

   コレクション内の要素

   の コレクションアイテム コレクション リストに統合する特定のコンテンツが格納されます。ここに追加された要素は、リストのすべての項目に配布されます。これらの要素は、コレクション フィールドにリンクされるか、条件付き表示特性が有効になるまで静的のままです。これらの修正により、動的要素に変換されます。動的要素は、ナビゲーターで紫色のアイコンでマークされます。

   

   無効ステータス

   の 空の リストに表示するアイテムがない場合、コレクション リストの代わりにステータスが表示されます。デフォルトでは、灰色の背景と「アイテムが見つかりません」というテキスト ブロックが表示されます。スタイルを変更し、要素を追加または置き換えて、パーソナライズされた無効ステータスを作成できます。

   ページネーション

   ページネーションは2つのリンクブロックで構成されています。 前 ボタンと その後 ボタン。これらはそれぞれカスタマイズしてスタイルを設定できます。コレクション リストのページ付けに関する洞察を得られます。

   コレクションリストパラメータの設定

   コレクション リストの設定で、コレクション リストに表示されるコンテンツとレイアウトを調整できます。コレクション リストの設定にアクセスするには:

   1. 選ぶ コレクションリストラッパー または コレクションリスト ワークスペース内
   2. に移動 要素設定パネル

   

   コレクション

   ここで、コレクション リストとペアにするコレクションを指定できます。コレクション リストにリンクする別のコレクションを選択する前に、コレクション リスト内のどの要素も現在コレクションにリンクされていないことを確認してください。

   ユーザーインターフェースの状態

   この機能を使用すると、 アイテム 状態と 空所 コレクション リストの両方の状態を編集する条件。

   この機能を調整しても 確立する ライブサイト上のコレクションリストの状態。コレクションリストの実際の状態は、そのアイテムによって決まります。 空所 ステータスは、コレクション内にアイテムがない場合、またはアイテムがフィルター処理されている場合にのみ表示されます。コレクション リストのフィルター処理の詳細については、こちらをご覧ください。

   デザイン

   コレクションリストを垂直に積み重ねたり、レイアウトを列に変更したりすることができます。または、コレクションリストにグリッドデザインを実装して動的なグリッドを形成することもできます。このシナリオでは、コレクションリストが デザイン 設定はそのまま 全幅.

   インサイダーヒント: コレクション リストの均一な高さ構造を構築するには、フレックスボックスを使用することをお勧めします。各コレクション項目のコンテンツは異なる場合があり、フレックスボックスに基づかない列レイアウトでは位置がずれることがあります。

   フィルター

   フィルターを組み込むと、1 つ以上のフィルター条件を満たす目的のコレクション アイテムのみを表示できます。コレクション リストのフィルター処理に関する詳細情報を入手してください。

   配列順

   配置順序により、特定のフィールドに従ってコレクション リストを整理できるようになります。コレクション リストの配置の詳細については、こちらをご覧ください。

   アイテムのページネーション

   コレクション リストをページ区切りにして、ページごとに設定された数のアイテムを表示できます。コレクション リストのページ区切りの詳細を詳しく見てみましょう。

   表示アイテムの上限

   この機能を使用すると、コレクション リストに表示されるアイテムの数と、コレクション リストを開始するアイテムを指定できます。たとえば、リストをアイテム 5 から開始し、3 つのアイテムのみを表示できます。その結果、リストにはアイテム 5、6、7 が表示されます。コレクション アイテムの制限の詳細については、こちらをご覧ください。

   追加情報： ページ区切りが有効になっていない限り、コレクション リストあたり最大 100 項目、ページあたり 20 コレクション リストという上限が適用されます。ページ区切りを使用してコレクション リストに 100 を超える項目を表示する方法について理解します。

   コレクションリスト内のコンポーネント

   コレクション リスト項目内にコンポーネントを挿入または生成するオプションがあります。その後、コレクション フィールドをコンポーネント属性にリンクし、コンポーネントで動的なデータを使用できます。コレクション リストでのコンポーネントの利用についてさらに詳しく調べてください。