Horizonテーマの検索モーダルに「人気の検索ワード」チップボタンを表示する方法です。カスタムLiquidセクションにJavaScriptを貼り付けるだけで実装でき、テーマ本体のLiquidファイルは変更不要です。Dawn版の実装方法はこちら。
完成イメージ
検索モーダルを開いた際、入力フィールドの直下にキーワードチップが表示されます。チップをクリックすると入力欄にキーワードがセットされ、予測検索が自動で動作します。文字を入力するとチップは自動で非表示になり、削除すると再び表示されます。
設定手順
◆カスタムLiquidセクションを追加する
テーマエディタを開き、ヘッダーグループに「カスタムLiquid」セクションを追加します。サンプルコードをそのまま貼り付けるだけで動作します。
◆キーワードをカスタマイズする
コード冒頭の SUGGESTIONS オブジェクトを編集するだけでキーワードを変更できます。
JavaScriptはMutationObserverで検索ダイアログの open 属性を監視し、モーダルが開いた瞬間にチップを挿入します。入力フィールドに文字が入力されるとチップは自動的に非表示になります。
