コレクションフィルター

基礎知識

コレクションリスト のあるページでは、 URLフィルター を使用してコレクションリストに表示される画像をフィルタリングできます。例えば、ボタンをクリックするだけで、特定のカテゴリのすべてのアイテムを表示できます。また、並び順を調整することもできます。これにより、ウェブサイト訪問者は特に興味のあるアイテムだけを表示できるようになります。

URLフィルター を使用するには、 「コレクションリストでURLフィルターを考慮する」 チェックボックスをオンにして有効にする必要があります。

コレクション_URL_フィルター_チェックボックス

リンク先のアイテムがコレクションリスト内にある場合、ウェブサイトビルダーはこのURLフィルターを自動的に設定することもできます。「リンク」 タブに切り替え、リンクタイプとして 「コレクションフィルター」 を選択してください。

コレクション自動フィルター

この記事では、手動で作成したURLフィルターの使用について説明します。その仕組みは以下のとおりです。

フィールドでフィルタリング

一般的に、データフィールドの種類 （選択肢、チェックボックス、日付、テキストフィールド） でフィルタリングできます。1つ（または複数）のフィールドでフィルタリングするには、必ず次のURL構造が必要です。

*COLLECTION-LISTING-PAGE*#!filter[columns.*FIELD*]=*OPERATOR*:*VALUE*

*COLLECTION-LISTING-PAGE*,*FIELD*,*OPERATOR*and*VALUE* を次のように置き換えてください。

*COLLECTION-LISTING-PAGE*: コレクションリストが掲載されたページの URL です。
- コレクションリストが同じページにある場合は、この部分は省略できます。
- たとえば、コレクションコンテナが「ブログ」ページにあり、ブログページの「スラッグ」が「/blog」である場合は、COLLECTION-LISTING-PAGEを「/blog」に置き換えるだけです。
*FIELD*: フィールドキーは通常、コレクション内のフィールド名に対応しています。スペースと特殊文字はすべて「_」に置き換える必要があることに注意してください。フィールドキーを確認するには、 「その他」>「コレクションマネージャ」 を開きます。そこで、確認したいコレクションの 歯車アイコン (1.)をクリックし、キーを確認したいフィールド(2.)をクリックします。ラベルの下にキーが表示されます(3.)。

コレクションフィールドキー

*OPERATOR*: フィールドの値が値と完全に一致しない場合は、次のオプションを比較演算子として使用できます。
- lt: より低い
- lte: より小さい / 等しい
- gt: より大きい
- gte: より大きい / 等しい
- notEqual: 等しくない
*VALUE*: データフィールドの種類に応じて、フィルターする値を特定の形式で指定する必要があります。
- 選択肢: 値は、大文字と小文字を含む URL コード化されている必要があります。つまり、文字 (スペース文字など) は、特定の文字列 “%20” に置き換えられる必要があります。
- チェックボックス: 値は次のいずれかです *「選択済み」の場合は「1」、
  - 「0」（選択されていない）（引用符なし）
- 日付: 日付は「YYYY-MM-DD」（引用符なし）の形式で入力する必要があります。「YYYY」は年、「MM」は月、「DD」は日（10未満の場合は先頭に「0」が付きます）です。正確な日付に加えて、「now」も使用できます。比較演算子「lte」と組み合わせることで、今日または過去の日付を持つすべての項目をフィルタリングできます。
- テキストフィールド: テキストの場合、正確なテキストのみをフィルタリングできます。

例：この例では、次のシナリオを想像してください。

「公開日」という名前の日付フィールドがあり、日付が2023年3月23日以降のアイテムのみが表示されます。
コレクションリストは、スラッグが「/blog」のページにあります。
ボタンをクリックするとアイテムが表示される

/blog#!filter[columns.published_at]=gt:2023-03-23

複数のフィルターは「&」記号を使って連結されます。例えば、著者によるフィルタリングを追加で適用する場合、フィルターのURLは次のようになります。

/blog#!filter[columns.published_at]=gt:2023-03-23&filter[columns.author]=John%20Doe

注文を調整する

コレクションアイテムの表示順序も調整可能です。その場合、URLにパラメータを追加します。順序変更の一般的な形式は以下のとおりです。

order=columns.*FIELD*_*DIRECTION*

FIELD と DIRECTION を次のように置き換えてください。

*FIELD*: 「フィールドによるフィルタリング」セクションで既に述べたように、それぞれのフィールドはフィールドキーによって一意に識別されます。
*DIRECTION*: ここでは、「フィールドキー」で指定されたフィールドに従ってコレクションエントリを並べ替える順序を指定します。
- ASC:昇順 (AZ)
- DESC:降順 (ZA)

上記のブログのすべての項目を公開日の降順で並べ替える場合、順序に対応する URL 部分は次のようになります。

/blog#!order=columns.published_at_DESC

「フィールドでフィルター」セクションのフィルターとこのセクションの順序の両方を組み合わせたい場合、URLは次のようになります。

/blog#!filter[columns.published_at]=gt:2023-03-23&filter[columns.author]=John%20Doe&order=columns.published_at_DESC

結果を制限する

フィルタリングと並べ替えに加えて、表示するアイテムの数を制限することもできます。これはキーワード「limit」で行います。例えば、3つのアイテムだけを表示したい場合、URLは次のようになります。

/blog#!limit=3

最初の項目ではなく、特定の位置にある項目を表示させることもできます。これにはキーワード「Offset」を使用します。「Offset」は、表示する項目の選択範囲を移動させます。例えば、4番目、5番目、6番目の項目を表示したい場合は、次のURLを使用します。

/blog#!limit=3&offset=3