Skip to content

Commit e3a2945

Browse files
tkruggtkrugg
authored
chore(InstantSearch V3): migrate javascript (#838)
* chore(InstantSearch V3): migrate javascript In a nutshell: - migrated every widget to its IS v3 equivalent. Some of notable changes are: * instantsearch: options have changed: - IS v2 accepts `appId` and `apiKey`, IS v3 accepts `searchClient` * searchBox template changed: - IS v2 accepts an input field, IS v3 does not: cf: https://github.com/algolia/instantsearch.js/blob/develop/src/widgets/search-box/search-box.js#L124 * stats: template options have changed: - IS v2 has the `templates.body`, IS v3 has `templates.text` - IS v2 has the `transformData`, IS v3 does not have it but found a workaround with function syntax * sortBy: options have changed: - IS v2 widget was called sortBySelector, IS v3 component is sortBy - in IS v2 accepts {name: string, label: string}, in IS v3 accepts {value: string, label: string} * currentRefinements: various things changed - in IS v2 it could "clear all", in IS v3 that's done by clearRefinements - `attributes` is now `includedAttributes` - header template has been removed, added a panel * clearRefinements: introduced * queryRuleCustomData: introduced for the banner - previously using `hits` widget * infiniteHits & hits: options have changed - transformData is now transformHits - __position computation was removed, as no longer needed since insights integration * pagination: options have changed - added options `showFirst showLast showNext showPrevious` to preserve current behaviour - `label.(previous|next)` is now `templates.(previous|next)` - removed `scrollTo: 'body'` as it's not the default behavour * hierarchicalMenu: options have changed - simplified item template - removed cssClasses as they are no longer necessary - header template has been removed, added a panel * refinementList(s) & RangeSlider: options have changed - header template has been removed, added a panel - update searchable* related options to preserve the current behaviour - removed unsused css classes Other changes to note: - reuse the hogan or html templates already being used. - updates docs links in comments, to point to instantsearch v3 docs For now, we're leaving the global function where they are. * chore(InstantSearch V3): migrate css - split algoliasearch.css into * grid.css * autocomplete.css * instantsearch.v3.css - introduced algolia reset theme: see https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js/#style-your-widgets - deleted algoliasearch.css as no longer needed * fix: remove Object.assign and destructuring syntax (...) * fix: various bug fixes * styling: fix space * various style fixes * more style fixes * fix: spacing * fix: load previous * fix: typo in facets * betty fixed it * fix: Add space on top of add to cart (10px) * fix: hide previous/next page when not clickable (disabled) * fix: Add brakets around counts for refinements lists (colors facets) * fix: add space on top of the refinement list search bar (4px) * fix: add pace around current refinement 10px top and bottom * fix: add space around filters (panels) 15px * fix: add space around categories (1.8em) * fix: nomber of results not displayed * fix: In the color filter box, the ais-SearchBox-input is sometimes disabled * fix: refine toggle button
1 parent 3b40edc commit e3a2945

File tree

13 files changed

+2064
-1025
lines changed

13 files changed

+2064
-1025
lines changed

‎view/frontend/layout/algolia_search_handle.xml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
<script src="Algolia_AlgoliaSearch::instantsearch.js"/>
77
<script src="Algolia_AlgoliaSearch::autocomplete.js"/>
88

9-
<css src="Algolia_AlgoliaSearch::internals/algoliasearch.css" />
9+
<css src="Algolia_AlgoliaSearch::internals/autocomplete.css" />
10+
<css src="Algolia_AlgoliaSearch::internals/grid.css" />
11+
<css src="Algolia_AlgoliaSearch::internals/algolia-reset.css" />
12+
<css src="Algolia_AlgoliaSearch::internals/instantsearch.v3.css" />
1013
</head>
1114
<body>
1215
<referenceBlock name="head.additional">
@@ -34,4 +37,4 @@
3437
<block class="Magento\Framework\View\Element\Template" name="algolia.instant.refinements" template="Algolia_AlgoliaSearch::instant/refinements.phtml"/>
3538
</referenceBlock>
3639
</body>
37-
</page>
40+
</page>

‎view/frontend/templates/instant/hit.phtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $tierFormatedVar = 'price' . $priceKey . '_tier_formated'
1212
<script type="text/template" id="instant-hit-template">
1313
<div class="col-md-4 col-sm-6">
1414
<div class="result-wrapper" itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
15-
<a itemprop="url" href="{{url}}" class="result" data-objectid="{{objectID}}" data-position="{{__position}}">
15+
<a itemprop="url" href="{{url}}" class="result" data-objectid="{{objectID}}" data-position="{{__position}}" data-queryid={{__queryid}}>
1616
<div class="result-content">
1717
<div class="result-thumbnail">
1818
{{#image_url}}<img itemprop="image" src="{{{image_url}}}" alt="{{{name}}}" />{{/image_url}}
@@ -78,4 +78,4 @@ $tierFormatedVar = 'price' . $priceKey . '_tier_formated'
7878
</a>
7979
</div>
8080
</div>
81-
</script>
81+
</script>

‎view/frontend/templates/instant/stats.phtml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
{{#hasManyResults}}
55
{{^hasNoResults}}{{first}}-{{last}} out of{{/hasNoResults}}
66
<strong>
7-
<span itemprop="numberOfItems">{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}}</span>
7+
<span itemprop="numberOfItems">{{nbHits}}</span>
88
<?php echo $block->escapeHtml(__('results found')); ?>
99
</strong>
1010
{{/hasManyResults}}
1111

12+
{{^hasNoResults}}
1213
<?php echo $block->escapeHtml(__('in')); ?> {{seconds}} <?php echo $block->escapeHtml(__('seconds')); ?>
13-
</script>
14+
{{/hasNoResults}}
15+
</script>

‎view/frontend/templates/instant/wrapper.phtml

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
+ <?php echo $block->escapeHtml(__('Refine')); ?>
1515
</div>
1616
<div class="hidden-xs hidden-sm" id="instant-search-facets-container">
17+
<div id="clear-refinements"></div>
1718
<div id="current-refinements"></div>
1819
</div>
1920
</div>
@@ -23,44 +24,26 @@
2324
<div class="col-md-12">
2425
<div>
2526
{{#second_bar}}
26-
<div id="instant-search-bar-container">
27-
<div id="instant-search-box">
28-
<div class="instant-search-bar-label">
29-
<span><?php echo $block->escapeHtml(__('Current search')); ?></span>
30-
</div>
31-
<div class="instant-search-bar-wrapper">
32-
<label for="instant-search-bar">
33-
<?php echo $block->escapeHtml(__('Search :')); ?>
34-
</label>
35-
36-
<input placeholder="<?php echo $block->escapeHtml(__('Search for products')) ?>"
37-
id="instant-search-bar"
38-
type="text"
39-
autocomplete="off"
40-
spellcheck="false"
41-
autocorrect="off"
42-
autocapitalize="off" />
43-
</div>
44-
</div>
45-
</div>
27+
<div id="instant-search-bar"></div>
4628
{{/second_bar}}
4729
</div>
4830
</div>
4931
</div>
5032
<div class="row">
51-
<div>
33+
<div class="col-md-12">
5234
<div itemscope itemtype="http://schema.org/ItemList" class="hits">
53-
<div class="infos">
35+
<div class="algolia-infos">
5436
<div class="pull-left" id="algolia-stats"></div>
5537
<div class="pull-right">
5638
<div class="sort-by-label pull-left">
57-
<?php echo $block->escapeHtml(__('SORT BY')); ?>
39+
<?php echo $block->escapeHtml(__('SORT BY')); ?> &nbsp;
5840
</div>
5941
<div class="pull-left" id="algolia-sorts"></div>
6042
</div>
6143
<div class="algolia-clearfix"></div>
6244
</div>
6345
<div id="algolia-banner"></div>
46+
<div id="instant-empty-results-container"></div>
6447
<div id="instant-search-results-container"></div>
6548
</div>
6649
</div>
@@ -73,4 +56,4 @@
7356
</div>
7457
</div>
7558
</div>
76-
</script>
59+
</script>

0 commit comments

Comments
 (0)