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/05/25 11:56] rihad |
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> | ||
| - | <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 93: | Line 82: | ||
| This method receives item data and must return a jQuery-wrapped DOM fragment that is used as suggestion list item. There are two ways to implement a custom suggestion visualization. The examples for the different approaches produce equivalent output. | This method receives item data and must return a jQuery-wrapped DOM fragment that is used as suggestion list item. There are two ways to implement a custom suggestion visualization. The examples for the different approaches produce equivalent output. | ||
| + | \\ | ||
| **Building item markup manually** | **Building item markup manually** | ||
| Building elements safely using jQuery: | Building elements safely using jQuery: | ||
| - | <code> | + | <code javascript> |
| e.detail.flAutocompleteUiWidget.renderResultItem = function (item) { | e.detail.flAutocompleteUiWidget.renderResultItem = function (item) { | ||
| // The basic structure should always be an <a> element wrapped in a <li> | // The basic structure should always be an <a> element wrapped in a <li> | ||
| Line 110: | Line 100: | ||
| // 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 120: | Line 110: | ||
| Simpler approach using concatenation and one-time parsing: | Simpler approach using concatenation and one-time parsing: | ||
| - | <code> | + | <code javascript> |
| e.detail.flAutocompleteUiWidget.renderResultItem = function (item) { | e.detail.flAutocompleteUiWidget.renderResultItem = function (item) { | ||
| // The basic structure should always be an <a> element wrapped in a <li> | // The basic structure should always be an <a> element wrapped in a <li> | ||
| Line 128: | 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 141: | Line 131: | ||
| };</code> | };</code> | ||
| + | \\ | ||
| **Using Handlebars.js** | **Using Handlebars.js** | ||
| Line 147: | Line 138: | ||
| The page needs to contain a script tag containing the template, like this: | The page needs to contain a script tag containing the template, like this: | ||
| - | <code> | + | <code html> |
| <script id="TEMPLATE_ID" type="text/x-handlebars-template"> | <script id="TEMPLATE_ID" type="text/x-handlebars-template"> | ||
| <li class="fl-item-{{ item.block }}"> | <li class="fl-item-{{ item.block }}"> | ||
| Line 160: | Line 151: | ||
| The rendering method should now look like this: | The rendering method should now look like this: | ||
| - | <code> | + | <code javascript> |
| e.detail.flAutocompleteUiWidget.renderResultItem = function (item) { | e.detail.flAutocompleteUiWidget.renderResultItem = function (item) { | ||
| // Build the context object that is used by Handlebars.js for rendering. The | // Build the context object that is used by Handlebars.js for rendering. The | ||
| Line 167: | 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 186: | Line 178: | ||
| Example: | Example: | ||
| - | <code> | + | <code javascript> |
| e.detail.flAutocomplete.afterRendering = function () { | e.detail.flAutocomplete.afterRendering = function () { | ||
| e.detail.autocompleteUlElement.css({ | e.detail.autocompleteUlElement.css({ | ||
| Line 195: | Line 187: | ||
| };</code> | };</code> | ||
| - | === 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 201: | Line 194: | ||
| Note that overriding this method replaces everything that happens by default when clicking a suggestion, including sending a search, and tracking the request with Google Analytics (if available). Either make sure all of this happens manually, or call the original method after your custom logic as illustrated below: | Note that overriding this method replaces everything that happens by default when clicking a suggestion, including sending a search, and tracking the request with Google Analytics (if available). Either make sure all of this happens manually, or call the original method after your custom logic as illustrated below: | ||
| - | <code> | + | <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 214: | 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 222: | 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 237: | Line 230: | ||
| Using empty square brackets and indexes interchangeably does not affect the response either. | Using empty square brackets and indexes interchangeably does not affect the response either. | ||
| + | \\ | ||
| ==== Type ==== | ==== Type ==== | ||
| ----- | ----- | ||
| Line 242: | 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#", | ||
| Line 343: | Line 337: | ||
| }</code> | }</code> | ||
| + | \\ | ||
| ==== /autocomplete.php ==== | ==== /autocomplete.php ==== | ||
| Line 364: | Line 359: | ||
| * If the maximum value is exceeded, the value provided the request is overridden silently. | * If the maximum value is exceeded, the value provided the request is overridden silently. | ||
| - | **autocompleteblocks[]** //one of (suggest, landingpage, cat, vendor, product, promotion) string// | + | **autocompleteblocks[]** //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// |
| * Allows overriding the blocks that are configured to be displayed in the customer account. | * Allows overriding the blocks that are configured to be displayed in the customer account. | ||
| * See Query parameter multivalue syntax above for examples on how this parameter can receive multiple values. | * See Query parameter multivalue syntax above for examples on how this parameter can receive multiple values. | ||
| + | * Note that ''ordernumber'' is a virtual block to enable ordernumber-based product suggestions. | ||
| + | |||
| + | autocompleteblocks[1] //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// | ||
| + | |||
| + | autocompleteblocks[2] //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// | ||
| - | autocompleteblocks[1] //one of (suggest, landingpage, cat, vendor, product, promotion) string// | + | autocompleteblocks[3] //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// |
| - | autocompleteblocks[2] //one of (suggest, landingpage, cat, vendor, product, promotion) string// | + | autocompleteblocks[4] //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// |
| - | autocompleteblocks[3] //one of (suggest, landingpage, cat, vendor, product, promotion) string// | + | autocompleteblocks[5] //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// |
| - | autocompleteblocks[4] //one of (suggest, landingpage, cat, vendor, product, promotion) string// | + | autocompleteblocks[6] //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// |
| - | autocompleteblocks[5] //one of (suggest, landingpage, cat, vendor, product, promotion) string// | + | autocompleteblocks[7] //one of (suggest, landingpage, cat, vendor, ordernumber, product, promotion) string// |
| **group[]** //string// | **group[]** //string// | ||