smart_suggest_new
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
smart_suggest_new [2018/08/03 14:12] rihad [Extending via hookpoints] |
smart_suggest_new [2021/02/25 14:49] florian removed |
||
|---|---|---|---|
| Line 16: | Line 16: | ||
| Groups are a feature for services using a CSV export that allows limiting the visibility of certain products to specific groups of people. The IDs of such groups must be part of the export. To distinguish between groups in Smart Suggest and search results, make sure an element as such is present in thesearch form: | Groups are a feature for services using a CSV export that allows limiting the visibility of certain products to specific groups of people. The IDs of such groups must be part of the export. To distinguish between groups in Smart Suggest and search results, make sure an element as such is present in thesearch form: | ||
| - | <code><input type="hidden" name="group[]" value="GROUP_ID"></code> | + | <code html><input type="hidden" name="group[]" value="GROUP_ID"></code> |
| Usergroups are a feature for services using an XML export that allows not only limiting visibility, but also displaying different information to different people on the same product. Use a different input tag from above (not necessary for Direct Integration): | Usergroups are a feature for services using an XML export that allows not only limiting visibility, but also displaying different information to different people on the same product. Use a different input tag from above (not necessary for Direct Integration): | ||
| - | <code><input type="hidden" name="usergroup" value="USERGROUP"></code> | + | <code html><input type="hidden" name="usergroup" value="USERGROUP"></code> |
| It's also necessary to add the usergroup to the FINDOLOGIC JS snippet as such: | It's also necessary to add the usergroup to the FINDOLOGIC JS snippet as such: | ||
| - | <code> | + | <code javascript> |
| // ... | // ... | ||
| var mainUrl = "https://cdn.findologic.com/static/MD5_HASH_OF_SHOPKEY/main.js?usergrouphash=USERGROUP"; | var mainUrl = "https://cdn.findologic.com/static/MD5_HASH_OF_SHOPKEY/main.js?usergrouphash=USERGROUP"; | ||
| Line 59: | Line 59: | ||
| ==== Extending via hookpoints ==== | ==== Extending via hookpoints ==== | ||
| ----- | ----- | ||
| - | === Basic === | ||
| <note important>When extending the Smart Suggest via hookpoints, FINDOLOGIC cannot ensure the quality of the product anymore. Therefore, our technical support will not provide service for issues which are caused by adaptions of the Smart Suggest.</note> | <note important>When extending the Smart Suggest via hookpoints, FINDOLOGIC cannot ensure the quality of the product anymore. Therefore, our technical support will not provide service for issues which are caused by adaptions of the Smart Suggest.</note> | ||
| - | |||
| - | Once Smart Suggest initialization is complete, the event ''flAutocompleteReady'' is dispatched on ''document''. The event object passed to its listeners allows for various customizations. | ||
| - | |||
| - | To ensure that the even listener is always called, make sure to place a script tag as such before the FINDOLOGIC JS snippet: | ||
| - | <code html> | ||
| - | <script> | ||
| - | document.addEventListener('flAutocompleteReady', function (e) { | ||
| - | // ... | ||
| - | }, false); | ||
| - | </script></code> | ||
| <note> The examples in the sections below assume the context of the listener function!</note> | <note> The examples in the sections below assume the context of the listener function!</note> | ||
| Line 129: | Line 118: | ||
| }); | }); | ||
| - | var highlightedLabel = this.buildLabel(item)); | + | var highlightedLabel = this.buildLabel(item); |
| - | container.html('<a>' + highlightedLabel + '</a>') | + | container.html('<a>' + highlightedLabel + '</a>'); |
| // For selection to work, a data attribute must be set in all cases: | // For selection to work, a data attribute must be set in all cases: | ||
| - | itemFragment.data('ui-autocomplete-item', { | + | container.data('ui-autocomplete-item', { |
| item: item, | item: item, | ||
| config: this.options.shopConfig | config: this.options.shopConfig | ||
| Line 169: | Line 158: | ||
| item: item, | item: item, | ||
| labelHighlighted: this.buildLabel(item), | labelHighlighted: this.buildLabel(item), | ||
| - | data.config: this.options.shopConfig | + | config: this.options.shopConfig |
| }; | }; | ||
| // Render the template specified by TEMPLATE_ID - this returns a | // Render the template specified by TEMPLATE_ID - this returns a | ||
| // jQuery-wrapped DOM fragment. | // jQuery-wrapped DOM fragment. | ||
| - | var itemFragment = this._renderItem.call(this, data, 'TEMPLATE_ID'); | + | var container = this._renderItem.call(this, context, 'TEMPLATE_ID'); |
| // For selection to work, a data attribute must be set in all cases: | // For selection to work, a data attribute must be set in all cases: | ||
| - | itemFragment.data('ui-autocomplete-item', item); | + | container.data('ui-autocomplete-item', item); |
| - | return itemFragment; | + | return container; |
| };</code> | };</code> | ||
| \\ | \\ | ||
| - | === e.detail.flAutocompleteObject.afterRendering() === | + | === e.detail.flAutocomplete.afterRendering() === |
| This method is useful for modifying Smart Suggest output once its layout is complete, e.g. for repositioning the container (''e.detail.autocompleteUlElement''). | This method is useful for modifying Smart Suggest output once its layout is complete, e.g. for repositioning the container (''e.detail.autocompleteUlElement''). | ||
| Line 199: | Line 188: | ||
| \\ | \\ | ||
| - | === e.flAutocompleteObject.selectItem(event, ui) === | + | === e.flAutocomplete.selectItem(event, ui) === |
| This method allows custom behavior when a suggestion is clicked. | This method allows custom behavior when a suggestion is clicked. | ||
| Line 206: | Line 195: | ||
| <code javascript> | <code javascript> | ||
| - | var originalSelectItem = e.detail.flAutocompleteObject.selectItem; | + | var originalSelectItem = e.detail.flAutocomplete.selectItem; |
| - | e.detail.flAutocompleteObject.selectItem = function (event, ui) { | + | e.detail.flAutocomplete.selectItem = function (event, ui) { |
| // The current query in the search field: | // The current query in the search field: | ||
| var searchTerm = event.target.value; | var searchTerm = event.target.value; | ||
| Line 218: | Line 207: | ||
| // The search form Smart Suggest acts on: | // The search form Smart Suggest acts on: | ||
| - | var searchForm = e.detail.flAutocompleteObject.getFormByEventTarget(event); | + | var searchForm = e.detail.flAutocomplete.getFormByEventTarget(event); |
| // The text of the selected item: | // The text of the selected item: | ||
| Line 226: | Line 215: | ||
| // Finally, make sure that the default selection logic is executed. | // Finally, make sure that the default selection logic is executed. | ||
| - | originalSelectItem.call(e.detail.flAutocompleteObject, event, ui); | + | originalSelectItem.call(e.detail.flAutocomplete, event, ui); |
| };</code> | };</code> | ||
| Line 247: | Line 236: | ||
| A list of suggestions, which is the response to a successful Smart Suggest request. Can be an emtpy array in case the query does not yield any useful suggestions. | A list of suggestions, which is the response to a successful Smart Suggest request. Can be an emtpy array in case the query does not yield any useful suggestions. | ||
| - | <code> | + | <code json> |
| { | { | ||
| "$schema": "http://json-schema.org/draft-04/schema#", | "$schema": "http://json-schema.org/draft-04/schema#", | ||