Search as main navigation

Daniel Lienert• Scrum Master / Software Architect

@ punkt.de / Karlsruhe

• Neos Core Team Member

• @dlienert

http://punkt.de

Sebastian Helzle• Product Owner

@ punkt.de / Karlsruhe

• Neos Core Team Member

• @sebobo

http://punkt.de

Overview• Motivation to integrate a great search

• The basics

• Indexing

• Search

• Result rendering

• Live search

• Outlook

Motivation

„Increase user interaction“

„Optimize real users workflows“

„Different users different goals“

„Choose the right tools“

„Don’t build or sell Google 2.0“

„Have an ongoing feedback loop“

„Think about searchin the design process“

Glossary

Glossary

• Terms & Phrases

Glossary

• „Did you mean“

Glossary

• Completions & Suggestions

Glossary

• Aggregations & Facets

Glossary

• Boosting & Weights

Building Blocks

ElasticsearchElasticsearch 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.

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





Flowpack.ElasticSearch‣ Indexing of nodes to ES documents ‣ Compiles Eel statements into ES queries ‣ ES driver for versions 1.x and 2.x






‣ Provides the indexing EelHelper ‣ Provides an abstract search helper interface.






‣ Provides an API for using ES with Flow ‣ Low Level Interface to ES

Start the Engine

Preparation - InstallationStep 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

Preparation - InstallationStep 2: Configure Elasticsearch

•script.inline: true

config/elasticsearch.yml:

Indexing

Basic Index Configuration• Configuration provider

• Neos CR Search package

• Elasticsearch CR Adaptor

• Flowpack Searchplugin

• Many use cases don’t need extra configuration

Node Types• Package stack already provides many defaults

• Custom configurations can be added or extended

• Best practice

• Use mixins for common configurations

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 …

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)}

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

Asset indexing configurationNeos: ContentRepository: Search: defaultConfigurationPerType: 'Neos\Media\Domain\Model\Asset': elasticSearchMapping: type: attachment include_in_all: true indexing: ${Indexing.indexAsset(value)}

'array<Neos\Media\Domain\Model\Asset>': elasticSearchMapping: type: attachment include_in_all: true indexing: ${Indexing.indexAsset(value)}

Searching

Search

Basic Search

Basic Search

baseQuery = ${Search.query(site).fulltext(this.searchTerm)}

•C

ase

Stu

dies

•

Blo

g Art

icle

s

Node Type Based Rendering•

Page

s

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 }

Facets #1

aggregateQuery = ${this.baseQuery .fieldBasedAggregation('types','_type')

.execute().getAggregations().types.buckets}

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>

Facets #3

baseQuery.@process { facets = ${value.queryFilter("term", {"_type": request.arguments.type})} }

Highlighting

searchQuery.@process { highlight = ${value.highlight(300, 1)} }

Did You Mean

didYouMean = ${SearchResult.didYouMean(this.searchQuery)}

Live search

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

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

The Future

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

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)

Questions?

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

https://github.com/neos/typo3cr-search

https://github.com/Flowpack/Flowpack.ElasticSearch.ContentRepositoryAdaptor

https://github.com/Flowpack/Flowpack.ElasticSearch.ContentRepositoryAdaptor

https://github.com/Flowpack/Flowpack.SearchPlugin

https://github.com/Flowpack/Flowpack.ElasticSearch

Search as main navigation

Internet

Transcript of Search as main navigation