Built on WIX Headless

ブログ / how-to

Wix CMSコンテンツに検索バーを追加する方法

· Wix CMS 検索バー

Wix CMSコンテンツに検索バーを追加する方法

CMS検索バーは、数文字打つとリストが縮む体験です。スタッフディレクトリで「Maria」、リスティングで「Austin」、リソースライブラリで「brochure」を見つける。サイト全体のページを探すsite searchとは別物です。

このガイドはネイティブ経路(主にStudio / Editor)と、CMS for Harmonyのノーコードウィジェット経路を扱います。後者はEditor・Studio・Harmonyで動きます。

あわせてWix CMSガイド。

Site searchCMS search
対象ページとサイトコンテンツコレクション表示内のアイテム
典型UIサイト全体の検索ボックスRepeater / Table / gallery上の検索欄
使うとき訪問者がページを探すディレクトリやカタログ内を探す

「80人のチームを探しやすくする」ならCMS searchです。

ネイティブ(StudioとEditor)

Studio(および多くのEditor CMS)では、Repeaterをdatasetに接続し、入力要素を付けて訪問者がフィルタできるようにします。カテゴリ風フィールド向けのドロップダウンなどは、Wix CMSヘルプでよく説明されているノーコード経路です。

ライブのキーワード検索ボックス—打ちながら絞り込む—は、プレーンテキストに対するcontainsなどでdatasetをフィルタする程度のVeloが必要なことが多いです。リッチテキストはその種の検索には向きません。

コードを維持したくなければ、検索バー付きアプリウィジェットのほうが速いことが多いです。

Harmony

Harmonyの組み込みCMSは接続リストを見せられますが、Studio制作者が期待するような1リスト上の訪問者検索UIはありません。よくある回避策:カテゴリごとに別リスト、またはCMS for Harmonyを入れてShow search barをオン。Harmony CMSの制限。

CMS for Harmony(3エディター)

  1. CMS for Harmonyをインストール。
  2. Table、Repeater、Calendar、Media Gallery、Slideshowのいずれかを追加し、コレクションを接続。
  3. Search & filtersを開きShow search barを有効化。
  4. 公開し、存在する名前や語で訪問者として試す。

検索は、そのウィジェット向けにマップされたテキスト系フィールドを見ます(例:CalendarはTitleとDetails)。詳細はSearch & filters docs。

比較

Native HarmonyCMS for Harmony
1リスト上の訪問者キーワード検索今日は同じようには使えないShow search barトグル
EditorsHarmonyEditor、Studio、Harmony
バインディングネイティブRepeaterフィールドアプリウィジェットのみ

シンプルな例

Collection: Directory(Name、Role、City、Bio)
Display: Repeaterカード
Goal: 「Austin」や人名を打つとカードが絞り込まれる

検索をオン。RoleやCityのボタンが必要ならカテゴリフィルタを追加。

次のステップ

関連

更新日:

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