Weitere ähnliche Inhalte
Ähnlich wie Getting Started Algolia with InstantSearch.js (20)
Mehr von Eiji Shinohara (20)
Kürzlich hochgeladen (11)
Getting Started Algolia with InstantSearch.js
- 6. - ハンズオンの中でたまに Chrome の Developer Toolsを使い
ます
- (たぶん使わなくてもハンズオン自体は大丈夫です)
■ シンプルなInstantSearch.jsを使ったページ
- 9. - メインは hits: というところ(デフォルトは1ページ20件)
■ シンプルなInstantSearch.jsを使ったページ
- 25. $ npm install instantsearch.js
> preact@8.4.2 postinstall /xxxx/node_modules/preact
<<略>>
+ instantsearch.js@3.5.3
added 29 packages from 26 contributors and audited 59 packages in 2.63s
found 0 vulnerabilities
② InstantSearch.jsの設定
npm や yarn を使っても良いかもしれませんが、今回は一旦 CDN上にあるJavaScriptファイルをロードする形にした
いと思います。例えば npm を使う場合の設定は以下。
- 26. - Visual Studio Code: Terminal->New Terminal
② InstantSearch.jsの設定
もし、ターミナルでパッケージマネージャーを使う場合、 Visual Studio Codeがオススメ?
- 29. - Index.html に test-widget というdivタグを追加
- app.js に InstantSearchのmenuというwidgetを追加
- HTMLで定義した test-widget に type 属性を表示
- testWidgetを InstantSearch に addWidget で追加
③ InstantSearch.jsのWidgetを追加
index.html
app.js
- 32. 1. InstantSearch.jsをロードして
2. 諸々設定
3. インスタンスを生成
4. Widgetを追加
5. search.start(); で検索
■ いかがでしょうか?
ココまで出来たら、後はInstantSearch.jsの様々なウィジェットを
使って楽しむだけ感あるので、もし、今までのところで、よく分からな
い部分等あれば教えてください!
- 34. - app.js に searchBox widgetを追加
- Containerは #searchbox
- HTMLを表示すると検索バーが確認できます
④ 検索バーを設置し結果を表示
- 36. - app.js に hits widgetを追加
- containerで”#hits”を指定
- HTMLにヒットした結果が表示される
④ 検索バーを設置し結果を表示
- 48. - 恐らく日本語化されないと思うので慣れていただけるとmm
- デフォルトは sortBy: [“isRefined”, ”count:desc”, “name:asc”]
- 選択されているものが一番上
- 次に件数が多いものが上
- 最後に名前の昇順
⑦ ファセットを導入してフィルタリング
https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#widget-param-sortby
- 54. - 例えば Apple で絞り込んでいた場合のレンジ表示
- 何も数字を入力していない状態であれば、存在するデータに連
動します。この場合は9ドルから4000ドル。
⑨ 金額のレンジで絞り込み