Skip to content
This repository was archived by the owner on Dec 16, 2022. It is now read-only.

Commit 618d30a

Browse files
dhayabFabienMotte
dhayab
and
FabienMotte
authored
feat(templates): various improvements (#572)
Co-authored-by: Fabien Motte <[email protected]>
1 parent c17089f commit 618d30a

File tree

11 files changed

+111
-47
lines changed

11 files changed

+111
-47
lines changed

‎e2e/__snapshots__/templates.test.js.snap‎

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -319,10 +319,15 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.htm
319319
320320
<div class=\\"container\\">
321321
<ais-instantsearch [config]=\\"config\\">
322+
<ais-configure [searchParameters]=\\"{ hitsPerPage: 8 }\\"></ais-configure>
322323
<div class=\\"search-panel\\">
323324
<div class=\\"search-panel__filters\\">
324-
<ais-refinement-list attribute=\\"facet1\\"></ais-refinement-list>
325-
<ais-refinement-list attribute=\\"facet2\\"></ais-refinement-list>
325+
<ais-panel header=\\"facet1\\">
326+
<ais-refinement-list attribute=\\"facet1\\"></ais-refinement-list>
327+
</ais-panel>
328+
<ais-panel header=\\"facet2\\">
329+
<ais-refinement-list attribute=\\"facet2\\"></ais-refinement-list>
330+
</ais-panel>
326331
</div>
327332
328333
<div class=\\"search-panel__results\\">
@@ -3084,7 +3089,7 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
30843089
30853090
<link rel=\\"shortcut icon\\" href=\\"./favicon.png\\">
30863091
3087-
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
3092+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
30883093
<link rel=\\"stylesheet\\" href=\\"./src/index.css\\">
30893094
<link rel=\\"stylesheet\\" href=\\"./src/app.css\\">
30903095
@@ -3113,10 +3118,9 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
31133118
<div class=\\"search-panel__results\\">
31143119
<div id=\\"searchbox\\"></div>
31153120
<div id=\\"hits\\"></div>
3121+
<div id=\\"pagination\\"></div>
31163122
</div>
31173123
</div>
3118-
3119-
<div id=\\"pagination\\"></div>
31203124
</div>
31213125
31223126
<script src=\\"https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js\\"></script>
@@ -3234,25 +3238,30 @@ search.addWidgets([
32343238
},
32353239
}),
32363240
instantsearch.widgets.configure({
3237-
facets: ['*'],
3238-
maxValuesPerFacet: 20,
3241+
hitsPerPage: 8,
32393242
}),
32403243
instantsearch.widgets.dynamicWidgets({
32413244
container: '#dynamic-widgets',
32423245
fallbackWidget({ container, attribute }) {
3243-
return instantsearch.widgets.refinementList({
3246+
return instantsearch.widgets.panel({ templates: { header: attribute } })(
3247+
instantsearch.widgets.refinementList
3248+
)({
32443249
container,
32453250
attribute,
32463251
});
32473252
},
32483253
widgets: [
32493254
container =>
3250-
instantsearch.widgets.refinementList({
3255+
instantsearch.widgets.panel({
3256+
templates: { header: 'facet1' },
3257+
})(instantsearch.widgets.refinementList)({
32513258
container,
32523259
attribute: 'facet1',
32533260
}),
32543261
container =>
3255-
instantsearch.widgets.refinementList({
3262+
instantsearch.widgets.panel({
3263+
templates: { header: 'facet2' },
3264+
})(instantsearch.widgets.refinementList)({
32563265
container,
32573266
attribute: 'facet2',
32583267
}),
@@ -5611,7 +5620,7 @@ exports[`Templates React InstantSearch File content: public/index.html 1`] = `
56115620
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
56125621
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
56135622
-->
5614-
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
5623+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
56155624
56165625
<title>react-instantsearch-app</title>
56175626
</head>
@@ -5713,10 +5722,11 @@ exports[`Templates React InstantSearch File content: src/App.js 1`] = `
57135722
import algoliasearch from 'algoliasearch/lite';
57145723
import {
57155724
InstantSearch,
5725+
Configure,
57165726
Hits,
57175727
SearchBox,
5718-
Configure,
57195728
DynamicWidgets,
5729+
Panel,
57205730
RefinementList,
57215731
Pagination,
57225732
Highlight,
@@ -5743,12 +5753,16 @@ function App() {
57435753
57445754
<div className=\\"container\\">
57455755
<InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
5756+
<Configure hitsPerPage={8} />
57465757
<div className=\\"search-panel\\">
57475758
<div className=\\"search-panel__filters\\">
5748-
<Configure facets={['*']} maxValuesPerFacet={20} />
57495759
<DynamicWidgets fallbackWidget={RefinementList}>
5750-
<RefinementList attribute=\\"facet1\\" />
5751-
<RefinementList attribute=\\"facet2\\" />
5760+
<Panel header=\\"facet1\\">
5761+
<RefinementList attribute=\\"facet1\\" />
5762+
</Panel>
5763+
<Panel header=\\"facet2\\">
5764+
<RefinementList attribute=\\"facet2\\" />
5765+
</Panel>
57525766
</DynamicWidgets>
57535767
</div>
57545768
@@ -6025,6 +6039,7 @@ em {
60256039
exports[`Templates React InstantSearch Hooks File content: src/App.tsx 1`] = `
60266040
"import algoliasearch from 'algoliasearch/lite';
60276041
import {
6042+
Configure,
60286043
DynamicWidgets,
60296044
Highlight,
60306045
Hits,
@@ -6062,6 +6077,7 @@ export function App() {
60626077
60636078
<div className=\\"container\\">
60646079
<InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
6080+
<Configure hitsPerPage={8} />
60656081
<div className=\\"search-panel\\">
60666082
<div className=\\"search-panel__filters\\">
60676083
<DynamicWidgets fallback={RefinementList}>
@@ -8176,7 +8192,7 @@ exports[`Templates Vue InstantSearch File content: public/index.html 1`] = `
81768192
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
81778193
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
81788194
-->
8179-
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
8195+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
81808196
<title>vue-instantsearch-app</title>
81818197
</head>
81828198
<body>
@@ -8208,12 +8224,18 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
82088224
82098225
<div class=\\"container\\">
82108226
<ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
8227+
<ais-configure :hits-per-page.camel=\\"8\\" />
82118228
<div class=\\"search-panel\\">
82128229
<div class=\\"search-panel__filters\\">
8213-
<ais-configure :facets=\\"['*']\\" :max-values-per-facet.camel=\\"20\\" />
82148230
<ais-dynamic-widgets>
8215-
<ais-refinement-list attribute=\\"facet1\\" />
8216-
<ais-refinement-list attribute=\\"facet2\\" />
8231+
<ais-panel>
8232+
<template v-slot:header>facet1</template>
8233+
<ais-refinement-list attribute=\\"facet1\\" />
8234+
</ais-panel>
8235+
<ais-panel>
8236+
<template v-slot:header>facet2</template>
8237+
<ais-refinement-list attribute=\\"facet2\\" />
8238+
</ais-panel>
82178239
</ais-dynamic-widgets>
82188240
</div>
82198241
@@ -8443,7 +8465,7 @@ exports[`Templates Vue InstantSearch with Vue 3 File content: index.html 1`] = `
84438465
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
84448466
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
84458467
-->
8446-
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
8468+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
84478469
<title>vue-instantsearch-app</title>
84488470
</head>
84498471
<body>
@@ -8487,11 +8509,18 @@ exports[`Templates Vue InstantSearch with Vue 3 File content: src/App.vue 1`] =
84878509
84888510
<div class=\\"container\\">
84898511
<ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
8512+
<ais-configure :hits-per-page.camel=\\"8\\" />
84908513
<div class=\\"search-panel\\">
84918514
<div class=\\"search-panel__filters\\">
84928515
<ais-dynamic-widgets>
8493-
<ais-refinement-list attribute=\\"facet1\\" />
8494-
<ais-refinement-list attribute=\\"facet2\\" />
8516+
<ais-panel>
8517+
<template v-slot:header>facet1</template>
8518+
<ais-refinement-list attribute=\\"facet1\\" />
8519+
</ais-panel>
8520+
<ais-panel>
8521+
<template v-slot:header>facet2</template>
8522+
<ais-refinement-list attribute=\\"facet2\\" />
8523+
</ais-panel>
84958524
</ais-dynamic-widgets>
84968525
</div>
84978526

‎src/templates/Angular InstantSearch/src/app/app.component.html.hbs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,14 @@
1212

1313
<div class="container">
1414
<ais-instantsearch [config]="config">
15+
<ais-configure [searchParameters]="{ hitsPerPage: 8 }"></ais-configure>
1516
<div class="search-panel">
1617
{{#if attributesForFaceting}}
1718
<div class="search-panel__filters">
1819
{{#each attributesForFaceting}}
19-
<ais-refinement-list attribute="{{this}}"></ais-refinement-list>
20+
<ais-panel header="{{this}}">
21+
<ais-refinement-list attribute="{{this}}"></ais-refinement-list>
22+
</ais-panel>
2023
{{/each}}
2124
</div>
2225

‎src/templates/InstantSearch.js/index.html.hbs‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<link rel="shortcut icon" href="./favicon.png">
1010

11-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
1212
<link rel="stylesheet" href="./src/index.css">
1313
<link rel="stylesheet" href="./src/app.css">
1414

@@ -43,10 +43,9 @@
4343
<div class="search-panel__results">
4444
<div id="searchbox"></div>
4545
<div id="hits"></div>
46+
<div id="pagination"></div>
4647
</div>
4748
</div>
48-
49-
<div id="pagination"></div>
5049
</div>
5150

5251
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js"></script>

‎src/templates/InstantSearch.js/src/app.js.hbs‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,26 @@ search.addWidgets([
3131
},
3232
{{/if}}
3333
}),
34-
{{#if flags.dynamicWidgets}}
3534
instantsearch.widgets.configure({
36-
facets: ['*'],
37-
maxValuesPerFacet: 20,
35+
hitsPerPage: 8,
3836
}),
37+
{{#if flags.dynamicWidgets}}
3938
instantsearch.widgets.dynamicWidgets({
4039
container: '#dynamic-widgets',
4140
fallbackWidget({ container, attribute }) {
42-
return instantsearch.widgets.refinementList({
41+
return instantsearch.widgets.panel({ templates: { header: attribute } })(
42+
instantsearch.widgets.refinementList
43+
)({
4344
container,
4445
attribute,
4546
});
4647
},
4748
widgets: [
4849
{{#each attributesForFaceting}}
49-
container => instantsearch.widgets.refinementList({
50+
container =>
51+
instantsearch.widgets.panel({
52+
templates: { header: '{{this}}' },
53+
})(instantsearch.widgets.refinementList)({
5054
container,
5155
attribute: '{{this}}',
5256
}),
@@ -55,7 +59,9 @@ search.addWidgets([
5559
}),
5660
{{else}}
5761
{{#each attributesForFaceting}}
58-
instantsearch.widgets.refinementList({
62+
instantsearch.widgets.panel({
63+
templates: { header: '{{this}}' },
64+
})(instantsearch.widgets.refinementList)({
5965
container: '#{{this}}-list',
6066
attribute: '{{this}}',
6167
}),

‎src/templates/React InstantSearch Hooks/src/App.tsx.hbs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import algoliasearch from 'algoliasearch/lite';
22
import {
3+
Configure,
34
{{#if flags.dynamicWidgets}}
45
DynamicWidgets,
56
{{#unless attributesForFaceting}}
@@ -46,6 +47,7 @@ export function App() {
4647

4748
<div className="container">
4849
<InstantSearch searchClient={searchClient} indexName="{{indexName}}">
50+
<Configure hitsPerPage={8} />
4951
<div className="search-panel">
5052
<div className="search-panel__filters">
5153
{{#if flags.dynamicWidgets}}

‎src/templates/React InstantSearch/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
1414
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
1515
-->
16-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
16+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
1717

1818
<title>{{name}}</title>
1919
</head>

‎src/templates/React InstantSearch/src/App.js.hbs‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import React from 'react';
22
import algoliasearch from 'algoliasearch/lite';
33
import {
44
InstantSearch,
5+
Configure,
56
Hits,
67
SearchBox,
78
{{#if flags.dynamicWidgets}}
8-
Configure,
99
DynamicWidgets,
10+
Panel,
1011
RefinementList,
1112
{{else}}
1213
{{#if attributesForFaceting}}
14+
Panel,
1315
RefinementList,
1416
{{/if}}
1517
{{/if}}
@@ -40,18 +42,22 @@ function App() {
4042

4143
<div className="container">
4244
<InstantSearch searchClient={searchClient} indexName="{{indexName}}">
45+
<Configure hitsPerPage={8} />
4346
<div className="search-panel">
4447
<div className="search-panel__filters">
4548
{{#if flags.dynamicWidgets}}
46-
<Configure facets={['*']} maxValuesPerFacet={20} />
4749
<DynamicWidgets fallbackWidget={RefinementList}>
4850
{{#each attributesForFaceting}}
49-
<RefinementList attribute="{{this}}" />
51+
<Panel header="{{this}}">
52+
<RefinementList attribute="{{this}}" />
53+
</Panel>
5054
{{/each}}
5155
</DynamicWidgets>
5256
{{else}}
5357
{{#each attributesForFaceting}}
54-
<RefinementList attribute="{{this}}" />
58+
<Panel header="{{this}}">
59+
<RefinementList attribute="{{this}}" />
60+
</Panel>
5561
{{/each}}
5662
{{/if}}
5763
</div>

‎src/templates/Vue InstantSearch with Vue 3/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
1010
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
1111
-->
12-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
1313
<title>{{name}}</title>
1414
</head>
1515
<body>

‎src/templates/Vue InstantSearch with Vue 3/src/App.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,24 @@
1717
:search-client="searchClient"
1818
index-name="{{indexName}}"
1919
>
20+
<ais-configure :hits-per-page.camel="8" />
2021
<div class="search-panel">
2122
<div class="search-panel__filters">
2223
{{#if flags.dynamicWidgets}}
2324
<ais-dynamic-widgets>
2425
{{#each attributesForFaceting}}
25-
<ais-refinement-list attribute="{{this}}" />
26+
<ais-panel>
27+
<template v-slot:header>{{this}}</template>
28+
<ais-refinement-list attribute="{{this}}" />
29+
</ais-panel>
2630
{{/each}}
2731
</ais-dynamic-widgets>
2832
{{else}}
2933
{{#each attributesForFaceting}}
30-
<ais-refinement-list attribute="{{this}}" />
34+
<ais-panel>
35+
<template v-slot:header>{{this}}</template>
36+
<ais-refinement-list attribute="{{this}}" />
37+
</ais-panel>
3138
{{/each}}
3239
{{/if}}
3340
</div>

‎src/templates/Vue InstantSearch/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
1010
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
1111
-->
12-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
1313
<title>{{name}}</title>
1414
</head>
1515
<body>

0 commit comments

Comments
 (0)