Autocomplete (JS) Extended - boxalino/rtux-integration-magento2 GitHub Wiki
This Autocomplete integration will offer:
- a conditional layout to the user (on 1st interaction without a search term enquiry, on further interactions - once searching for something)
- return of property matches (ex: brands, categories, etc)
Code
- Update the API request in the rtuxAutocompleteMixin.js to include the property requests. This step is only required if there is a requirement to show input recommendations for certain properties (ex: categories, blog articles, etc).
Review the render flow all-together
Prepare the autocomplete JS template. This step is required when new Layout Blocks, with different template-ids have been included in your narrative layout.
The API response bx-attributes must be included in the HTML tags.
Widgets*
The integration will make an API request without any query in order to display: trending terms, personalized search terms & recommended products.
- Create a new widget - autocomplete_rec. Context: search.
- Add required returnFields use-case
- We strongly suggest to make use of the selected fields in your integration
Template Resources (for conditional layout)
[{"id":557,"uniqueKey":"query-is-not-empty","status":"active","accessor":"search-query-","parameterValue":{"value":"query","operator":"=","condtionalValue":"","parameters":null},"conditional":null,"simple":null,"ifResources":[],"elseResources":[],"afterResources":[],"elseText":null,"parameterValues":[],"parameters":[],"route":"template-resources","reqParams":null,"$fromServer":true,"parentResource":null,"restangularCollection":false,"isSelected":true}]
Narrative Layout (conditional)
[{"id":4350,"status":null,"uniqueKey":"autocomplete-js-queries","aliases":null,"widgets":["autocomplete"],"allWidgets":null,"parametersJsonScheme":null,"seoContent":{"title":[{"language":"de","value":""}],"metaTags":[],"h1":[{"language":"de","value":""}],"others":[{"name":"breadcrumbs","value":[{"language":"de","value":""}]}]},"contexts":[],"layoutModels":null,"acts":[{"parameters":[null],"chapter":{"format":"CPOActBranching","contexts":[{"choiceIds":[],"journeySteps":[],"variantIds":[],"excludedUseCaseIds":[],"languages":[],"queryTexts":[],"emptyQuery":null,"fromIndex":null,"toIndex":null,"contextItems":[],"contextParameters":[],"orContextParameters":null,"checkOtherContextParametersNotSetExclusive":null,"checkOtherContextParametersNotSetList":[],"filters":[],"orFilters":null,"checkOtherFiltersNotSetExclusive":null,"checkOtherFiltersNotSetList":[],"segmentationUniqueKeys":[],"scriptConditions":[{"expression":"{{template-query-is-not-empty}}","operator":"","values":[],"orCondition":false}],"orScriptConditions":false}],"subActs":[{"parameters":[null],"act":{"format":"CPOActChapter","contexts":[],"subActs":[],"journeyStepUniqueKeys":null,"callToActions":null,"renderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion_list","label":"Trendy terms","parameters":[{"name":"accessor","values":["$.responses[0].SEARCH_TERM_TRENDS[hitCount=4]^"]},{"name":"title","values":["{\"de\":\"Oft Gesucht\",\"fr\":\"Recherche fréquente\",\"it\":\"Ricerche Frequenti\",\"en\":\"Frequent searches\"}"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion","label":null,"parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]},{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion_list","label":"Personalized terms","parameters":[{"name":"accessor","values":["$.responses[0].PERSONALIZED_SEARCH_SUGGESTIONS[hitCount=4]^"]},{"name":"title","values":["{\"de\":\"Suchvorschläge\",\"fr\":\"Recherche recommandée\",\"it\":\"Consigli di ricerca\",\"en\":\"Search recommendations\"}"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"autocomplete_suggestion","label":null,"parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]},{"visualElementModelUniqueKey":"rtux_autocomplete_hit_list","label":"Recommended products","parameters":[{"name":"title","values":["{\"de\":\"Empfohlen für dich\",\"fr\":\"Recommandé pour toi\",\"it\":\"Raccomandato per te\",\"en\":\"Recommended for you\"}"]},{"name":"content","values":["product"]},{"name":"template","values":["#rtux-product-template"]},{"name":"accessor","values":["autocomplete_rec[hitCount=3]"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_hit","label":null,"parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]}],"parameters":null}}],"parameters":null}},{"parameters":null,"act":{"format":"CPOActChapter","contexts":[],"subActs":[],"journeyStepUniqueKeys":null,"callToActions":null,"renderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion_list","label":"Textual suggestions","parameters":[{"name":"accessor","values":[""]},{"name":"title","values":["{\"de\":\"\",\"fr\":\"\",\"it\":\"\",\"en\":\"\"}"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion","label":null,"parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]},{"visualElementModelUniqueKey":"rtux_autocomplete_hit_list","label":"Product matches","parameters":[{"name":"title","values":["{\"de\":\"Produkte\",\"fr\":\"Produits\",\"it\":\"Prodotti\",\"en\":\"Products\"}"]},{"name":"content","values":["product"]},{"name":"template","values":["#rtux-product-template"]},{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_hit","label":null,"parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]},{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion_list","label":"Property matches (ex: brands)","parameters":[{"name":"accessor","values":["$.responses[0].propertyResults['brand']^"]},{"name":"title","values":["{\"de\":\"Marken\",\"fr\":\"Marques\",\"it\":\"Marche\",\"en\":\"Brands\"}"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion","label":null,"parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]}],"parameters":null}}],"parameters":null}}],"indexesTrue":[1],"indexesFalse":[0]}}],"parameters":[],"route":"narratives","reqParams":null,"$fromServer":true,"parentResource":null,"restangularCollection":false,"requests":[""],"sessions":[""],"clicks":[""],"flatContexts":"","isSelected":true}]
Narrative Layout (simple)
[{"id":4352,"status":null,"uniqueKey":"autocomplete_js_queries","aliases":null,"widgets":["autocomplete"],"allWidgets":null,"parametersJsonScheme":null,"seoContent":{"title":[{"language":"de","value":""}],"metaTags":[],"h1":[{"language":"de","value":""}],"others":[{"name":"breadcrumbs","value":[{"language":"de","value":""}]}]},"contexts":[],"layoutModels":null,"acts":[{"parameters":[null],"chapter":{"format":"CPOActChapter","contexts":[],"subActs":[],"journeyStepUniqueKeys":null,"callToActions":null,"renderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion_list","label":"Suggestion list","parameters":[{"name":"accessor","values":[""]},{"name":"title","values":["{\"de\":\"\",\"fr\":\"\",\"it\":\"\",\"en\":\"\"}"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion","label":"Suggestion","parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]},{"visualElementModelUniqueKey":"rtux_autocomplete_hit_list","label":"Product list","parameters":[{"name":"title","values":["{\"de\":\"Produkte\",\"fr\":\"\",\"it\":\"\",\"en\":\"Products\"}"]},{"name":"content","values":["product"]},{"name":"accessor","values":[""]},{"name":"template","values":["#rtux-product-template"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_hit","label":"Dynamic Product","parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]},{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion_list","label":"Property matches (brands)","parameters":[{"name":"title","values":["{\"de\":\"Marken\",\"fr\":\"Marques\",\"it\":\"Marche\",\"en\":\"Brands\"}"]},{"name":"accessor","values":["$.responses[0].propertyResults['brand']^"]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[{"visualElementModelUniqueKey":"rtux_autocomplete_suggestion","label":null,"parameters":[{"name":"accessor","values":[""]}],"visualElement":null,"subRenderings":[{"parameters":[null],"rendering":{"contexts":[],"layoutModels":[],"visualElements":[],"parameters":null}}]}],"parameters":null}}]}],"parameters":null}}],"parameters":null}}],"parameters":[],"route":"narratives","reqParams":null,"$fromServer":true,"parentResource":null,"restangularCollection":false,"requests":[""],"sessions":[""],"clicks":[""],"flatContexts":"","isSelected":true}]