Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Search as main navigation

1.146 Aufrufe

Veröffentlicht am

Your searchbox doesn’t need to be hidden in a corner. Put it in focus and allow people to quickly go where they can find the information they need. In this talk you learn how Neos allows you to offer autocompletion, suggestions and direct navigation to results while entering a searchterm.
This talk shows you all the building blocks to integrate a powerful search with Neos.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Search as main navigation

  1. 1. Search as main navigation
  2. 2. Daniel Lienert • Scrum Master / Software Architect
 @ punkt.de / Karlsruhe • Neos Core Team Member • @dlienert
  3. 3. Sebastian Helzle • Product Owner 
 @ punkt.de / Karlsruhe • Neos Core Team Member • @sebobo
  4. 4. Overview • Motivation to integrate a great search • The basics • Indexing • Search • Result rendering • Live search • Outlook
  5. 5. Motivation
  6. 6. „Increase user interaction“
  7. 7. „Optimize real users workflows“
  8. 8. „Different users different goals“
  9. 9. „Choose the right tools“
  10. 10. „Don’t build or sell Google 2.0“
  11. 11. „Have an ongoing feedback loop“
  12. 12. „Think about search
 in the design process“
  13. 13. Glossary
  14. 14. Glossary • Terms & Phrases
  15. 15. Glossary • „Did you mean“
  16. 16. Glossary • Completions & Suggestions
  17. 17. Glossary • Aggregations & Facets
  18. 18. Glossary • Boosting & Weights
  19. 19. Building Blocks
  20. 20. Elasticsearch Elasticsearch is an open source, distributed, scalable, document-oriented, RESTful, full text search engine with real-time search an analytics capabilities. Based on Apache Lucene. Combines search and powerful analytics. Provides a HTTP REST and a Java interface.
  21. 21. Neos Content Repository Flowpack.SearchPlugin Neos.ContentRepository. Search Flowpack.ElasticSearch.ContentRepositoryAdaptor Flowpack.ElasticSearch
  22. 22. Neos Content Repository Flowpack.SearchPlugin Neos.ContentRepository. Search Flowpack.ElasticSearch.ContentRepositoryAdaptor Flowpack.ElasticSearch ‣ The frontend plugin ‣ Search input and result rendering ‣ Soon: Controller for real-time autocompletion and suggestions
  23. 23. Neos Content Repository Flowpack.SearchPlugin Neos.ContentRepository. Search Flowpack.ElasticSearch.ContentRepositoryAdaptor Flowpack.ElasticSearch‣ Indexing of nodes to ES documents ‣ Compiles Eel statements into ES queries ‣ ES driver for versions 1.x and 2.x
  24. 24. Flowpack.SearchPlugin Neos Content Repository Neos.ContentRepository. Search Flowpack.ElasticSearch.ContentRepositoryAdaptor Flowpack.ElasticSearch ‣ Provides the indexing EelHelper ‣ Provides an abstract search helper interface.
  25. 25. Flowpack.SearchPlugin Neos Content Repository Neos.ContentRepository. Search Flowpack.ElasticSearch.ContentRepositoryAdaptor Flowpack.ElasticSearch ‣ Provides an API for using ES with Flow ‣ Low Level Interface to ES
  26. 26. Start the Engine
  27. 27. Preparation - Installation Step 1: Install Elasticsearch • wget https://download.elastic.co/.../elasticsearch-2.4.0.zip unzip elasticsearch-2.4.0.zip elasticsearch-2.4.0/bin/elasticsearch
  28. 28. Preparation - Installation Step 2: Configure Elasticsearch • script.inline: true config/elasticsearch.yml:
  29. 29. Indexing
  30. 30. Basic Index Configuration • Configuration provider • Neos CR Search package • Elasticsearch CR Adaptor • Flowpack Searchplugin • Many use cases don’t need extra configuration
  31. 31. Node Types • Package stack already provides many defaults • Custom configurations can be added or extended • Best practice • Use mixins for common configurations
  32. 32. Node Type indexing example 'PunktDe.Website:EmployeeElement': search: fulltext: isRoot: true label: '${String.cropAtWord(q(node).property(''name'') || … }’ superTypes: 'Neos.Neos:Content': true 'Flowpack.SearchPlugin:SuggestableMixin': true 'Flowpack.SearchPlugin:AutocompletableMixin': true …
  33. 33. Node Type indexing example 'PunktDe.Website:EmployeeElement': search: fulltext: isRoot: true label: '${String.cropAtWord(q(node).property(''name'') || … }’ superTypes: 'Neos.Neos:Content': true 'Flowpack.SearchPlugin:SuggestableMixin': true 'Flowpack.SearchPlugin:AutocompletableMixin': true …
  34. 34. Node Type indexing example 'PunktDe.Website:EmployeeElement': … properties: '__suggestions': search: indexing: "${Flowpack.SearchPlugin.Suggestion.build(q(node).property('name') 
 + …, node.identifier, FusionRendering.render(node, 'suggestion'), 100)}" '__completion': search: indexing: "${q(node).property('name')}" name: type: string search: fulltextExtractor: ${Indexing.extractInto('h1', value)}
  35. 35. Node Type indexing example 'PunktDe.Website:EmployeeElement': … properties: '__suggestions': search: indexing: "${Flowpack.SearchPlugin.Suggestion.build(q(node).property('name') 
 + …, node.identifier, FusionRendering.render(node, 'suggestion'), 100)}" '__completion': search: indexing: "${q(node).property('name')}" name: type: string search: fulltextExtractor: ${Indexing.extractInto('h1', value)}
  36. 36. Node Type indexing example 'PunktDe.Website:EmployeeElement': … properties: '__suggestions': search: indexing: "${Flowpack.SearchPlugin.Suggestion.build(q(node).property('name') 
 + …, node.identifier, FusionRendering.render(node, 'suggestion'), 100)}" '__completion': search: indexing: "${q(node).property('name')}" name: type: string search: fulltextExtractor: ${Indexing.extractInto('h1', value)}
  37. 37. Indexing Assets bin/plugin install elasticsearch/elasticsearch-mapper-attachments/2.1.7 • Requires the attachment type for Elasticsearch • Included for Elasticsearch > 2.1 • For 1.7 you need to install the plugin separately
  38. 38. Asset indexing configuration Neos: ContentRepository: Search: defaultConfigurationPerType: 'NeosMediaDomainModelAsset': elasticSearchMapping: type: attachment include_in_all: true indexing: ${Indexing.indexAsset(value)} 'array<NeosMediaDomainModelAsset>': elasticSearchMapping: type: attachment include_in_all: true indexing: ${Indexing.indexAsset(value)}
  39. 39. Searching Search
  40. 40. Basic Search
  41. 41. Basic Search baseQuery = ${Search.query(site).fulltext(this.searchTerm)}
  42. 42. •CaseStudies•BlogArticles Node Type Based Rendering •Pages
  43. 43. Node Type Based Rendering prototype(Neos.Neos:DocumentSearchResult) { } prototype(Vendor.Site:CaseStudySearchResult) < prototype(Neos.Neos:DocumentSearchResult) { templatePath = resource://Vendor.Site/.../CaseStudySearchResult.html } prototype(Vendor.Site:BlogPostSearchResult) < prototype(Neos.Neos:DocumentSearchResult) { templatePath = resource://Vendor.Site/.../BlogPostSearchResult.html }
  44. 44. Facets #1 aggregateQuery = ${this.baseQuery .fieldBasedAggregation('types','_type') .execute().getAggregations().types.buckets}
  45. 45. Facets #2 <f:for each="{types}" as="type"> <li> <neos:link.node node="{searchPage}" arguments="{'search' : ‚{searchTerm}‘, 'type': '{type.key}'}"> {type.key} ({type.doc_count}) </neos:link.node> </li> </f:for>
  46. 46. Facets #3 baseQuery.@process { facets = ${value.queryFilter("term", {"_type": request.arguments.type})} }
  47. 47. Highlighting searchQuery.@process { highlight = ${value.highlight(300, 1)} }
  48. 48. Did You Mean didYouMean = ${SearchResult.didYouMean(this.searchQuery)}
  49. 49. Live search
  50. 50. Autocompletion • Offers possible word & phrase completions (like google) • Helps when you’re unsure about spelling • Very fast • No correction • Currently missing • Doesn’t respect context (e.g. dimensions) • No weighting
  51. 51. Suggestions • Fuzzy search • Respects search context (dimensions, workspaces, starting point) • Slower if context is not cached (Solved in Searchplugin) • Weighting • Show alternative results • Customizable payload during index time • Type based suggestions • Pre rendered output • Direct linking
  52. 52. The Future
  53. 53. The future • Elasticsearch 5.x driver • Support multiple indices (e.g. multi-site installations) • Better support for language specialities • Indexqueue • Improved documentation and example library
  54. 54. I also want to have a cool search • Checkout the Flowpack/Searchplugin package • Post feedback & ideas • on Github • the guild-search Slack channel • Use the SEO package and index metadata • Treat internal search like external search (index property)
  55. 55. Questions?
  56. 56. Links • https://github.com/neos/typo3cr-search • https://github.com/Flowpack/ Flowpack.ElasticSearch.ContentRepositoryAdaptor • https://github.com/Flowpack/Flowpack.SearchPlugin • https://github.com/Flowpack/Flowpack.ElasticSearch

×