Skip to content

Commit 72c2758

Browse files
cammonrocammonro
committed
MAGE-899 Refactor source to options conversion
1 parent f23fe15 commit 72c2758

File tree

1 file changed

+113
-102
lines changed

1 file changed

+113
-102
lines changed

‎view/frontend/web/js/autocomplete.js

Lines changed: 113 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -51,30 +51,90 @@ define([
5151
this.buildAutocomplete($);
5252
},
5353

54-
buildAutocomplete($) {
55-
/** We have nothing to do here if autocomplete is disabled **/
56-
if (
57-
typeof algoliaConfig === 'undefined' ||
58-
!algoliaConfig.autocomplete.enabled
59-
) {
60-
return;
61-
}
6254

55+
/**
56+
* Setup the autocomplete search input
57+
* For autocomplete feature is used Algolia's autocomplete.js library
58+
* Docs: https://github.com/algolia/autocomplete.js
59+
**/
60+
buildAutocomplete() {
61+
/** We have nothing to do here if autocomplete is disabled **/
62+
if (typeof algoliaConfig === 'undefined' || !algoliaConfig.autocomplete.enabled) return;
63+
6364
const searchClient = this.getSearchClient();
6465

6566
const sources = this.buildAutocompleteSources(searchClient);
6667

6768
const plugins = this.buildAutocompletePlugins(searchClient);
68-
69+
70+
if (algoliaConfig.removeBranding === false) {
71+
//TODO: relies on global - needs refactor
72+
algoliaFooter = `<div id="algoliaFooter" class="footer_algolia"><span class="algolia-search-by-label">${algoliaConfig.translations.searchBy}</span><a href="https://www.algolia.com/?utm_source=magento&utm_medium=link&utm_campaign=magento_autocompletion_menu" title="${algoliaConfig.translations.searchBy} Algolia" target="_blank"><img src="${algoliaConfig.urls.logo}" alt="${algoliaConfig.translations.searchBy} Algolia" /></a></div>`;
73+
}
74+
75+
let options = this.buildAutocompleteOptions(searchClient, sources, plugins);
76+
77+
this.startAutocomplete(options);
78+
79+
//Autocomplete insight click conversion
80+
// TODO: Switch to insights plugin
81+
if (algoliaConfig.ccAnalytics.enabled) {
82+
$(document).on('click', '.algoliasearch-autocomplete-hit', function () {
83+
const $this = $(this);
84+
if ($this.data('clicked')) return;
85+
86+
const objectId = $this.attr('data-objectId');
87+
const indexName = $this.attr('data-index');
88+
const queryId = $this.attr('data-queryId');
89+
const position = $this.attr('data-position');
90+
91+
let useCookie = algoliaConfig.cookieConfiguration
92+
.cookieRestrictionModeEnabled
93+
? !!algoliaCommon.getCookie(algoliaConfig.cookieConfiguration.consentCookieName)
94+
: true;
95+
if (useCookie !== false) {
96+
algoliaInsights.initializeAnalytics();
97+
const eventData = algoliaInsights.buildEventData(
98+
'Clicked',
99+
objectId,
100+
indexName,
101+
position,
102+
queryId
103+
);
104+
algoliaInsights.trackClick(eventData);
105+
$this.attr('data-clicked', true);
106+
}
107+
});
108+
}
109+
110+
if (algoliaConfig.autocomplete.isNavigatorEnabled) {
111+
$('body').append(
112+
'<style>.aa-Item[aria-selected="true"]{background-color: #f2f2f2;}</style>'
113+
);
114+
}
115+
},
116+
117+
getSearchClient() {
69118
/**
70-
* Setup the autocomplete search input
71-
* For autocomplete feature is used Algolia's autocomplete.js library
72-
* Docs: https://github.com/algolia/autocomplete.js
73-
**/
74-
const debounced = this.debounce(items => Promise.resolve(items), DEBOUNCE_MS);
75-
76-
let autocompleteConfig = [];
77-
let options = algoliaCommon.triggerHooks('beforeAutocompleteOptions', {}); //DEPRECATED
119+
* Initialise Algolia client
120+
* Docs: https://www.algolia.com/doc/api-client/getting-started/instantiate-client-index/
121+
**/
122+
const searchClient = algoliasearch(
123+
algoliaConfig.applicationId,
124+
algoliaConfig.apiKey
125+
);
126+
searchClient.addAlgoliaAgent(
127+
'Magento2 integration (' + algoliaConfig.extensionVersion + ')'
128+
);
129+
return searchClient;
130+
},
131+
132+
buildAutocompleteOptions(searchClient, sources, plugins) {
133+
const debounced = this.debounce(items => Promise.resolve(items), DEBOUNCE_MS);
134+
135+
const autocompleteConfig = [];
136+
137+
let options = algoliaCommon.triggerHooks('beforeAutocompleteOptions', {});
78138

79139
options = {
80140
...options,
@@ -106,29 +166,6 @@ define([
106166
options.debug = true;
107167
}
108168

109-
if (algoliaConfig.removeBranding === false) {
110-
//TODO: relies on global - needs refactor
111-
algoliaFooter = `<div id="algoliaFooter" class="footer_algolia"><span class="algolia-search-by-label">${algoliaConfig.translations.searchBy}</span><a href="https://www.algolia.com/?utm_source=magento&utm_medium=link&utm_campaign=magento_autocompletion_menu" title="${algoliaConfig.translations.searchBy} Algolia" target="_blank"><img src="${algoliaConfig.urls.logo}" alt="${algoliaConfig.translations.searchBy} Algolia" /></a></div>`;
112-
}
113-
114-
// DEPRECATED Do not use - Retained for backward compatibility but `algoliaHookBeforeAutocompleteStart` will be removed in a future version
115-
if (typeof algoliaHookBeforeAutocompleteStart === 'function') {
116-
console.warn(
117-
"Deprecated! You are using an old API for Algolia's front end hooks. " +
118-
'Please, replace your hook method with new hook API. ' +
119-
'More information you can find on https://www.algolia.com/doc/integration/magento-2/customize/custom-front-end-events/'
120-
);
121-
122-
const hookResult = algoliaHookBeforeAutocompleteStart(
123-
sources,
124-
options,
125-
searchClient
126-
);
127-
128-
sources = hookResult.shift();
129-
options = hookResult.shift();
130-
}
131-
132169
sources.forEach((data) => {
133170
if (!data.sourceId) {
134171
console.error(
@@ -170,68 +207,12 @@ define([
170207
...(data.getItemUrl && {getItemUrl: data.getItemUrl}),
171208
});
172209
});
210+
173211
options.plugins = plugins;
174212

175213
options = algoliaCommon.triggerHooks('afterAutocompleteOptions', options);
176-
177-
/** Bind autocomplete feature to the input */
178-
let algoliaAutocompleteInstance = autocomplete.autocomplete(options);
179-
algoliaCommon.triggerHooks(
180-
'afterAutocompleteStart',
181-
algoliaAutocompleteInstance
182-
);
183-
184-
//Autocomplete insight click conversion
185-
// TODO: Switch to insights plugin
186-
if (algoliaConfig.ccAnalytics.enabled) {
187-
$(document).on('click', '.algoliasearch-autocomplete-hit', function () {
188-
const $this = $(this);
189-
if ($this.data('clicked')) return;
190-
191-
const objectId = $this.attr('data-objectId');
192-
const indexName = $this.attr('data-index');
193-
const queryId = $this.attr('data-queryId');
194-
const position = $this.attr('data-position');
195-
196-
let useCookie = algoliaConfig.cookieConfiguration
197-
.cookieRestrictionModeEnabled
198-
? !!algoliaCommon.getCookie(algoliaConfig.cookieConfiguration.consentCookieName)
199-
: true;
200-
if (useCookie !== false) {
201-
algoliaInsights.initializeAnalytics();
202-
const eventData = algoliaInsights.buildEventData(
203-
'Clicked',
204-
objectId,
205-
indexName,
206-
position,
207-
queryId
208-
);
209-
algoliaInsights.trackClick(eventData);
210-
$this.attr('data-clicked', true);
211-
}
212-
});
213-
}
214-
215-
if (algoliaConfig.autocomplete.isNavigatorEnabled) {
216-
$('body').append(
217-
'<style>.aa-Item[aria-selected="true"]{background-color: #f2f2f2;}</style>'
218-
);
219-
}
220-
},
221-
222-
getSearchClient() {
223-
/**
224-
* Initialise Algolia client
225-
* Docs: https://www.algolia.com/doc/api-client/getting-started/instantiate-client-index/
226-
**/
227-
const searchClient = algoliasearch(
228-
algoliaConfig.applicationId,
229-
algoliaConfig.apiKey
230-
);
231-
searchClient.addAlgoliaAgent(
232-
'Magento2 integration (' + algoliaConfig.extensionVersion + ')'
233-
);
234-
return searchClient;
214+
215+
return options;
235216
},
236217

237218
/**
@@ -265,7 +246,7 @@ define([
265246
this.buildAutocompleteSource(section, searchClient)
266247
);
267248

268-
// DEPRECATED - retaining for backward compatibility but `beforeAutcompleteSources` will likely be removed in a future version
249+
// DEPRECATED location - retaining for backward compatibility but `beforeAutcompleteSources` behavior belongs earlier in the process and will be relocated in a future version
269250
sources = algoliaCommon.triggerHooks(
270251
'beforeAutocompleteSources',
271252
sources,
@@ -278,8 +259,6 @@ define([
278259
searchClient
279260
);
280261

281-
282-
283262
return sources;
284263
},
285264

@@ -560,6 +539,38 @@ define([
560539
);
561540
},
562541

542+
/**
543+
*
544+
* @param options
545+
* @returns the Algolia Autocomplete instance
546+
*/
547+
startAutocomplete(searchClient, sources, options) {
548+
// DEPRECATED Do not use - Retained for backward compatibility but `algoliaHookBeforeAutocompleteStart` will be removed in a future version
549+
if (typeof algoliaHookBeforeAutocompleteStart === 'function') {
550+
console.warn(
551+
"Deprecated! You are using an old API for Algolia's front end hooks. " +
552+
'Please, replace your hook method with new hook API. ' +
553+
'More information you can find on https://www.algolia.com/doc/integration/magento-2/customize/custom-front-end-events/'
554+
);
555+
556+
const hookResult = algoliaHookBeforeAutocompleteStart(
557+
sources,
558+
options,
559+
searchClient
560+
);
561+
562+
sources = hookResult.shift();
563+
options = hookResult.shift();
564+
}
565+
566+
/** Bind autocomplete feature to the input */
567+
let algoliaAutocompleteInstance = autocomplete.autocomplete(options);
568+
return algoliaCommon.triggerHooks(
569+
'afterAutocompleteStart',
570+
algoliaAutocompleteInstance
571+
);
572+
},
573+
563574
transformAutocompleteHit(hit, price_key, helper) {
564575
if (Array.isArray(hit.categories))
565576
hit.categories = hit.categories.join(', ');

0 commit comments

Comments
 (0)