From 78d90177a540df0461f39feb39c3ae4a3889dd6b Mon Sep 17 00:00:00 2001 From: iam4x Date: Fri, 31 Mar 2017 12:48:00 +0200 Subject: [PATCH] feat(getting-started): add result example of guide --- getting-started/example/app.js | 67 ++++++++++ getting-started/example/index.html | 47 +++++++ getting-started/example/main.css | 198 +++++++++++++++++++++++++++++ 3 files changed, 312 insertions(+) create mode 100644 getting-started/example/app.js create mode 100644 getting-started/example/index.html create mode 100644 getting-started/example/main.css diff --git a/getting-started/example/app.js b/getting-started/example/app.js new file mode 100644 index 0000000000..da8abee33f --- /dev/null +++ b/getting-started/example/app.js @@ -0,0 +1,67 @@ +const {instantsearch} = window; + +const search = instantsearch({ + appId: 'latency', + apiKey: '3d9875e51fbd20c7754e65422f7ce5e1', + indexName: 'bestbuy', + urlSync: true, +}); + +search.addWidget( + instantsearch.widgets.hits({ + container: '#hits', + templates: { + empty: 'No results', + item: '
' + + '
{{{_highlightResult.name.value}}}
' + + '
$ {{{salePrice}}}
', + }, + hitsPerPage: 8, + }) +); + +search.addWidget( + instantsearch.widgets.searchBox({ + container: '#search-box', + placeholder: 'Search for products', + }) +); + +search.addWidget( + instantsearch.widgets.refinementList({ + container: '#refinement-list', + attributeName: 'category', + templates: { + header: 'Refine by', + }, + autoHideContainer: false, + }) +); + +search.addWidget( + instantsearch.widgets.currentRefinedValues({ + container: '#current-refined-values', + // This widget can also contain a clear all link to remove all filters, + // we disable it in this example since we use `clearAll` widget on its own. + clearAll: false, + }) +); + +search.addWidget( + instantsearch.widgets.clearAll({ + container: '#clear-all', + templates: { + link: 'Clear all filters', + }, + }) +); + +search.addWidget( + instantsearch.widgets.pagination({ + container: '#pagination', + maxPages: 10, + scrollTo: true, + }) +); + +search.start(); diff --git a/getting-started/example/index.html b/getting-started/example/index.html new file mode 100644 index 0000000000..efba32dd6b --- /dev/null +++ b/getting-started/example/index.html @@ -0,0 +1,47 @@ + + + + + InstantSearch.js Getting started result example + + +
+ InstantSearch.js +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ + +
+ +
+ + +
+
+ + + + + + diff --git a/getting-started/example/main.css b/getting-started/example/main.css new file mode 100644 index 0000000000..9a8d875878 --- /dev/null +++ b/getting-started/example/main.css @@ -0,0 +1,198 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + font-family: system-ui, + -apple-system, BlinkMacSystemFont, + "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; +} + +.topbar { + background: #222F3F; + padding: 10px; + height: 60px; + width: 100%; +} + +.topbar .title { + margin-right: 16px; + font-size: 30px; + font-weight: bold; + color: #FFFFFF; +} + +.wrapper { + display: flex; + height: calc(100% - 60px); +} + +.left { + border-right: 1px solid #EEE; + padding: 20px; + min-width: 320px; +} + +.right { + flex-grow: 1; + padding: 20px; +} + +.ais-header { + color: #888; + font-size: 1.2em; + margin: 0 0 8px; +} + +.ais-clear-all--link { + display: block; + border-radius: 4px; + color: #000; + background-color: #fff; + border: 1px solid #ccc; + text-align: center; + padding: 6px 12px; + white-space: nowrap; + vertical-align: middle; + width: 80%; +} + +.ais-current-refined-values--link, +.ais-refinement-list--item { + font-size: .87em; +} + +.ais-refinement-list--count { + color: #888; +} + +.ais-refinement-list--count:before, +.ais-current-refined-values--count:before { + content: "("; +} + +.ais-refinement-list--count:after, +.ais-current-refined-values--count:after { + content: ")"; +} + +.ais-refinement-list--label:hover { + cursor: pointer; +} + +.left .ais-root { + margin-bottom: 20px; +} + +.ais-current-refined-values--link { + color: #CCC; + text-decoration: none; + font-size: .7em; +} + +.ais-current-refined-values--link:hover { + text-decoration: line-through; +} + +.ais-current-refined-values--link > div:before { + content: "x "; + color: rgb(180, 69, 69); + display: inline; +} + +.ais-search-box { + margin-bottom: 20px; + width: 100%; +} + +.ais-search-box--input { + border: 1px solid #ccc; + border-radius: 4px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; + width: 100%; +} + +.ais-hits { + display: flex; + flex-wrap: wrap; +} + +.ais-hits--item { + flex-grow: 1; + width: 24%; + padding: 10px 20px 20px; + margin-bottom: 10px; + margin-right: 10px; + border: solid 1px #EEE; + box-shadow: 0 0 3px #f6f6f6; +} + +.ais-hits--item em { + color: #000000; + font-style: normal; + background-color: #FFBE61; +} + +.product-picture { + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + height: 150px; +} + +.product-picture img { + -webkit-transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1); + transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1); + max-height: 150px; + width: auto; +} + +.ais-hits--item .desc { + font-size: .8em; + color: #333; + text-align: center; + margin-top: 10px; +} + +.ais-hits--item .sale-price { + margin-top: 10px; + text-align: center; +} + +.ais-pagination { + margin-top: 10px; + background-color: #EEE; + font-size: 1.2em; + line-height: 3em; + text-align: center; +} + +.ais-pagination a { + color: #0063C3; + text-decoration: none; +} + +.ais-pagination--item__active a { + color: #000000; + font-weight: bold; +}