Skip to content

Commit 019e4ae

Browse files
tkruggdamcou
tkrugg
authored and
damcou
committed
chore(InstantSearch): migrate to ISv4 (#912)
1 parent adebed9 commit 019e4ae

File tree

5 files changed

+78
-129
lines changed

5 files changed

+78
-129
lines changed

‎view/frontend/web/click_conversion_analytics.js

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,6 @@ requirejs(['algoliaBundle', 'algoliaAnalytics'], function (algoliaBundle, algoli
3636
var queryID = $(this).data('queryid') || getQueryParamFromCurrentUrl('queryID');
3737
var indexName = $(this).data('queryid') || getQueryParamFromCurrentUrl('indexName');
3838

39-
// FIXME: what is this code for? removing it for now
40-
// if (!objectId) {
41-
// var postData = $(this).data('post');
42-
// if (!postData || !postData.data.product) {
43-
// return;
44-
// }
45-
//
46-
// objectId = postData.data.product;
47-
// }
48-
4939
trackConversion(objectId, queryID, indexName);
5040
});
5141
}
@@ -64,10 +54,10 @@ requirejs(['algoliaBundle', 'algoliaAnalytics'], function (algoliaBundle, algoli
6454

6555
});
6656

67-
algolia.registerHook('beforeInstantsearchInit', function (instantsearchOptions) {
68-
instantsearchOptions.searchParameters['clickAnalytics'] = true;
69-
70-
return instantsearchOptions;
57+
algolia.registerHook('beforeWidgetInitialization', function (allWidgetConfiguration){
58+
allWidgetConfiguration.configure = allWidgetConfiguration.configure || {};
59+
allWidgetConfiguration.configure.clickAnalytics = true;
60+
return allWidgetConfiguration;
7161
});
7262

7363
function trackClick(objectID, position, queryID, indexName) {

‎view/frontend/web/instantsearch.js

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ requirejs(['algoliaBundle', 'Magento_Catalog/js/price-utils'], function (algolia
7979
}
8080

8181
var searchClient = algoliaBundle.algoliasearch(algoliaConfig.applicationId, algoliaConfig.apiKey);
82+
var searchParameters = {
83+
hitsPerPage: algoliaConfig.hitsPerPage,
84+
ruleContexts: ruleContexts
85+
};
8286
var instantsearchOptions = {
8387
searchClient: searchClient,
8488
indexName: algoliaConfig.indexName + '_products',
85-
searchParameters: {
86-
hitsPerPage: algoliaConfig.hitsPerPage,
87-
ruleContexts: ruleContexts
88-
},
8989
searchFunction: function (helper) {
9090
if (helper.state.query === '' && !algoliaConfig.isSearchPage) {
9191
$('.algolia-instant-replaced-content').show();
@@ -101,10 +101,10 @@ requirejs(['algoliaBundle', 'Magento_Catalog/js/price-utils'], function (algolia
101101

102102
if (algoliaConfig.request.path.length > 0 && window.location.hash.indexOf('categories.level0') === -1) {
103103
if (algoliaConfig.areCategoriesInFacets === false) {
104-
instantsearchOptions.searchParameters['facetsRefinements'] = {};
105-
instantsearchOptions.searchParameters['facetsRefinements']['categories.level' + algoliaConfig.request.level] = [algoliaConfig.request.path];
104+
searchParameters['facetsRefinements'] = {};
105+
searchParameters['facetsRefinements']['categories.level' + algoliaConfig.request.level] = [algoliaConfig.request.path];
106106
} else {
107-
instantsearchOptions.searchParameters['hierarchicalFacetsRefinements'] = {
107+
searchParameters['hierarchicalFacetsRefinements'] = {
108108
'categories.level0': [algoliaConfig.request.path]
109109
}
110110
}
@@ -144,17 +144,18 @@ requirejs(['algoliaBundle', 'Magento_Catalog/js/price-utils'], function (algolia
144144
var allWidgetConfiguration = {
145145
infiniteHits: {},
146146
hits: {},
147+
configure: searchParameters,
147148
custom: [
148149
/**
149150
* Custom widget - this widget is used to refine results for search page or catalog page
150151
* Docs: https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/js/
151152
**/
152153
{
153-
getConfiguration: function () {
154+
getWidgetSearchParameters: function(searchParameters) {
154155
if (algoliaConfig.request.query.length > 0 && location.hash.length < 1) {
155-
return {query: algoliaConfig.request.query}
156+
return searchParameters.setQuery(algoliaConfig.request.query)
156157
}
157-
return {};
158+
return searchParameters;
158159
},
159160
init: function (data) {
160161
var page = data.helper.state.page;
@@ -626,16 +627,16 @@ requirejs(['algoliaBundle', 'Magento_Catalog/js/price-utils'], function (algolia
626627

627628
function addWidget(search, type, config) {
628629
if (type === 'custom') {
629-
search.addWidget(config);
630+
search.addWidgets([config]);
630631
return;
631632
}
632633
var widget = algoliaBundle.instantsearch.widgets[type];
633634
if (config.panelOptions) {
634635
widget = algoliaBundle.instantsearch.widgets.panel(config.panelOptions)(widget);
636+
delete config.panelOptions;
635637
}
636-
delete config.panelOptions;
637638

638-
search.addWidget(widget(config));
639+
search.addWidgets([widget(config)]);
639640
}
640641

641642
function addSearchForFacetValues(facet, options) {

‎view/frontend/web/internals/algoliaBundle.min.js

Lines changed: 17 additions & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎view/frontend/web/internals/algoliaBundle.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎view/frontend/web/internals/common.js

Lines changed: 42 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -501,51 +501,6 @@ requirejs(['algoliaBundle'], function(algoliaBundle) {
501501
$(this).html('+ ' + algoliaConfig.translations.refine);
502502
});
503503

504-
// Handle backward compatibility with old routing
505-
function routingBc(routeState) {
506-
// Handle legacy facets
507-
// https://github.com/algolia/algoliasearch-helper-js/blob/39bec1caf24a60acd042eb7bb5d7d7c719fde58b/src/SearchParameters/shortener.js#L6
508-
var legacyFacets = ["dFR", "hFR", "fR"];
509-
for (i = 0; i < legacyFacets.length; i++) {
510-
if (routeState[legacyFacets[i]]) {
511-
for (var key in routeState[legacyFacets[i]]) {
512-
if (routeState[legacyFacets[i]].hasOwnProperty(key)) {
513-
key == "categories.level0" ?
514-
routeState["categories"] = routeState[legacyFacets[i]][key][0].split(' /// ').join('~') :
515-
routeState[key] = routeState[legacyFacets[i]][key].join('~');
516-
}
517-
}
518-
}
519-
}
520-
521-
// Handle legacy numeric refinements
522-
if (routeState.nR) {
523-
for (var key in routeState.nR) {
524-
if (routeState.nR.hasOwnProperty(key)) {
525-
var lt = '', gt = '', eq = '';
526-
if (routeState.nR[key]['=']) {
527-
eq = routeState.nR[key]['='];
528-
}
529-
if (routeState.nR[key]['<=']) {
530-
lt = routeState.nR[key]['<='];
531-
}
532-
if (routeState.nR[key]['>=']) {
533-
gt = routeState.nR[key]['>='];
534-
}
535-
536-
if (eq != '') {
537-
routeState[key] = eq;
538-
}
539-
if (lt != '' || gt != '') {
540-
routeState[key] = gt + ':' + lt;
541-
}
542-
}
543-
}
544-
}
545-
546-
return routeState;
547-
}
548-
549504
// The url is now rendered as follows : http://website.com?q=searchquery&facet1=value&facet2=value1~value2
550505
// "?" and "&" are used to be fetched easily inside Magento for the backend rendering
551506
// Multivalued facets use "~" as separator
@@ -579,80 +534,83 @@ requirejs(['algoliaBundle'], function(algoliaBundle) {
579534
}),
580535
stateMapping: {
581536
stateToRoute: function (uiState) {
582-
var map = {};
537+
var productIndexName = algoliaConfig.indexName + '_products';
538+
var uiStateProductIndex = uiState[productIndexName] || {};
539+
var routeParameters = {};
583540
if (algoliaConfig.isCategoryPage) {
584-
map['q'] = uiState.query;
541+
routeParameters['q'] = uiState[productIndexName].query;
585542
} else {
586-
map['q'] = uiState.query || '__empty__';
543+
routeParameters['q'] = uiState[productIndexName].query || '__empty__';
587544
}
588545
if (algoliaConfig.facets) {
589546
for(var i=0; i<algoliaConfig.facets.length; i++) {
590547
var currentFacet = algoliaConfig.facets[i];
591548
// Handle refinement facets
592549
if (currentFacet.attribute != 'categories' && (currentFacet.type == 'conjunctive' || currentFacet.type == 'disjunctive')) {
593-
map[currentFacet.attribute] = (uiState.refinementList &&
594-
uiState.refinementList[currentFacet.attribute] &&
595-
uiState.refinementList[currentFacet.attribute].join('~'));
550+
routeParameters[currentFacet.attribute] = (uiStateProductIndex.refinementList &&
551+
uiStateProductIndex.refinementList[currentFacet.attribute] &&
552+
uiStateProductIndex.refinementList[currentFacet.attribute].join('~'));
596553
}
597554
// Handle categories
598555
if (currentFacet.attribute == 'categories' && !algoliaConfig.isCategoryPage) {
599-
map[currentFacet.attribute] = (uiState.hierarchicalMenu &&
600-
uiState.hierarchicalMenu[currentFacet.attribute+ '.level0'] &&
601-
uiState.hierarchicalMenu[currentFacet.attribute+ '.level0'].join('~'));
556+
routeParameters[currentFacet.attribute] = (uiStateProductIndex.hierarchicalMenu &&
557+
uiStateProductIndex.hierarchicalMenu[currentFacet.attribute+ '.level0'] &&
558+
uiStateProductIndex.hierarchicalMenu[currentFacet.attribute+ '.level0'].join('~'));
602559
}
603560
// Handle sliders
604561
if (currentFacet.type == 'slider') {
605-
map[currentFacet.attribute] = (uiState.range &&
606-
uiState.range[currentFacet.attribute] &&
607-
uiState.range[currentFacet.attribute]);
562+
routeParameters[currentFacet.attribute] = (uiStateProductIndex.range &&
563+
uiStateProductIndex.range[currentFacet.attribute] &&
564+
uiStateProductIndex.range[currentFacet.attribute]);
608565
}
609566
};
610567
}
611-
map['sortBy'] = uiState.sortBy;
612-
map['page'] = uiState.page;
613-
return map;
568+
routeParameters['sortBy'] = uiStateProductIndex.sortBy;
569+
routeParameters['page'] = uiStateProductIndex.page;
570+
return routeParameters;
614571
},
615-
routeToState: function (routeState) {
616-
var map = {};
617-
routeState = routingBc(routeState);
618-
map['query'] = routeState.q == '__empty__' ? '' : routeState.q;
619-
if (algoliaConfig.isLandingPage && typeof map['query'] === 'undefined' && algoliaConfig.landingPage.query != '') {
620-
map['query'] = algoliaConfig.landingPage.query;
572+
routeToState: function (routeParameters) {
573+
var productIndexName = algoliaConfig.indexName + '_products';
574+
var uiStateProductIndex = {}
575+
576+
uiStateProductIndex['query'] = routeParameters.q == '__empty__' ? '' : routeParameters.q;
577+
if (algoliaConfig.isLandingPage && typeof uiStateProductIndex['query'] === 'undefined' && algoliaConfig.landingPage.query != '') {
578+
uiStateProductIndex['query'] = algoliaConfig.landingPage.query;
621579
}
622580

623581
var landingPageConfig = algoliaConfig.isLandingPage && algoliaConfig.landingPage.configuration ?
624582
JSON.parse(algoliaConfig.landingPage.configuration) :
625583
{};
626584

627-
map['refinementList'] = {};
628-
map['hierarchicalMenu'] = {};
629-
map['range'] = {};
585+
uiStateProductIndex['refinementList'] = {};
586+
uiStateProductIndex['hierarchicalMenu'] = {};
587+
uiStateProductIndex['range'] = {};
630588
if (algoliaConfig.facets) {
631589
for(var i=0; i<algoliaConfig.facets.length; i++) {
632590
var currentFacet = algoliaConfig.facets[i];
633591
// Handle refinement facets
634592
if (currentFacet.attribute != 'categories' && (currentFacet.type == 'conjunctive' || currentFacet.type == 'disjunctive')) {
635-
map['refinementList'][currentFacet.attribute] = routeState[currentFacet.attribute] && routeState[currentFacet.attribute].split('~');
593+
uiStateProductIndex['refinementList'][currentFacet.attribute] = routeParameters[currentFacet.attribute] && routeParameters[currentFacet.attribute].split('~');
636594
if (algoliaConfig.isLandingPage &&
637-
typeof map['refinementList'][currentFacet.attribute] === 'undefined' &&
595+
typeof uiStateProductIndex['refinementList'][currentFacet.attribute] === 'undefined' &&
638596
currentFacet.attribute in landingPageConfig) {
639-
map['refinementList'][currentFacet.attribute] = landingPageConfig[currentFacet.attribute].split('~');
597+
uiStateProductIndex['refinementList'][currentFacet.attribute] = landingPageConfig[currentFacet.attribute].split('~');
640598
}
641599
}
642600
// Handle categories facet
643601
if (currentFacet.attribute == 'categories' && !algoliaConfig.isCategoryPage) {
644-
map['hierarchicalMenu']['categories.level0'] = routeState['categories'] && routeState['categories'].split('~');
602+
uiStateProductIndex['hierarchicalMenu']['categories.level0'] = routeParameters['categories'] && routeParameters['categories'].split('~');
645603
if (algoliaConfig.isLandingPage &&
646-
typeof map['hierarchicalMenu']['categories.level0'] === 'undefined' &&
604+
typeof uiStateProductIndex['hierarchicalMenu']['categories.level0'] === 'undefined' &&
647605
'categories.level0' in landingPageConfig) {
648-
map['hierarchicalMenu']['categories.level0'] = landingPageConfig['categories.level0'].split(' /// ');
606+
uiStateProductIndex['hierarchicalMenu']['categories.level0'] = landingPageConfig['categories.level0'].split(' /// ');
649607
}
650608
}
651609
// Handle sliders
652610
if (currentFacet.type == 'slider') {
653-
map['range'][currentFacet.attribute] = routeState[currentFacet.attribute] && routeState[currentFacet.attribute];
611+
uiStateProductIndex['range'][currentFacet.attribute] = routeParameters[currentFacet.attribute] && routeParameters[currentFacet.attribute];
654612
if (algoliaConfig.isLandingPage &&
655-
typeof map['range'][currentFacet.attribute] === 'undefined' &&
613+
typeof uiStateProductIndex['range'][currentFacet.attribute] === 'undefined' &&
656614
currentFacet.attribute in landingPageConfig) {
657615

658616
var facetValue = '';
@@ -663,14 +621,17 @@ requirejs(['algoliaBundle'], function(algoliaBundle) {
663621
if (typeof landingPageConfig[currentFacet.attribute]['<='] !== "undefined") {
664622
facetValue += landingPageConfig[currentFacet.attribute]['<='][0];
665623
}
666-
map['range'][currentFacet.attribute] = facetValue;
624+
uiStateProductIndex['range'][currentFacet.attribute] = facetValue;
667625
}
668626
}
669627
};
670628
}
671-
map['sortBy'] = routeState.sortBy;
672-
map['page'] = routeState.page;
673-
return map;
629+
uiStateProductIndex['sortBy'] = routeParameters.sortBy;
630+
uiStateProductIndex['page'] = routeParameters.page;
631+
632+
var uiState = {};
633+
uiState[productIndexName] = uiStateProductIndex;
634+
return uiState;
674635
}
675636
}
676637
};

0 commit comments

Comments
 (0)