Built on WIX Headless

ブログ / how-to

Wix Repeaterにカテゴリフィルタを追加する方法

· Wix Repeater カテゴリフィルタ

Wix Repeaterにカテゴリフィルタを追加する方法

カテゴリフィルタは、ページを離れずにカードグリッドを絞る方法です。「Marketingだけ」「Austinだけ」「ワークショップだけ」。Wixでは、CMSコレクションがRepeaterを支え、同じdataset/ウィジェットを絞るコントロールを足すことが多いです。

以下では具体例、Studioがネイティブでできること、Harmonyの違い、CMS for Harmony(Editor・Studio・Harmony対応)での設定を示します。そのアプリで「cards」はRepeaterレイアウトの意味で、別ウィジェットではありません。

詳細はWix CMSガイド。

作るもの

Name、Category、Summary、Imageを持つProgramsコレクション。Repeaterがカードを表示。訪問者がカテゴリを選ぶとグリッドが更新されます。

ネイティブ経路(Studio / Editor)

WixのCMSドキュメントは、ドロップダウン、ラジオ、selection tagsをdatasetに接続し、コードなしでリピーター/ギャラリー/テーブルをフィルタする方法を扱います。各入力がフィールドに接続され、値を選ぶと一致するアイテムだけが表示されます。リセットや「apply filter」ボタンも付けられます。

チームがすでにStudioでdatasetsを使っているなら、堅実なデフォルトです。

Harmony

ネイティブ接続Repeaterは、今日1リスト上に同じ訪問者向けカテゴリフィルタUIを出しません。カテゴリごとにRepeaterを分ける(エディター側フィルタ)か、アプリを使います。詳細:Harmony CMSの制限。

CMS for HarmonyのRepeater

  1. コレクションを作り、少なくとも2カテゴリにアイテムを入れる(空カテゴリはフィルタが壊れたように見える)。
  2. Repeaterを追加し、コレクションを接続、Name・Image・Summaryをマップ。
  3. Search & filtersを開きShow filtersをオン。
  4. Categoryにフィルタを追加:
    • マッチはequals(タグの持ち方によってはcontains)
    • 訪問者が値を選べるようShow filterを使う
  5. Filters displayをTop(グリッド上)またはSide(サイドバー。小画面では縦積み)に。
  6. 公開し、訪問者として各カテゴリをクリック。

任意:Choose valueモードは訪問者UIなしで固定ルールを適用(例:Publishedのみ)。

パネル参照:Search & filters。より広い手順:Search and filtersの概要。

簡易比較

Native HarmonyCMS for Harmony
1つのRepeater上の訪問者カテゴリ制御今日は限定的CategoryのShow filter
カテゴリごとの重複Repeaterを避ける難しいRepeater1つ+フィルタ
EditorsHarmonyEditor、Studio、Harmony

知っておきたいエッジケース

状況Tip
空カテゴリデモ前にサンプルアイテムを入れる
カテゴリが何十個もSideレイアウトを好み、検索も足す
カテゴリが関連コレクションにあるreference filtersとDisplay field—docs参照
色が「カテゴリ」Color swatches

次のステップ

関連

更新日:

Harmony で試してみますか? 無料のスターターサイトを作成 CMS for Harmony