Using Search Templates

Why use Search Templates?

Search Templates allow you to add a search function to your website quickly and easily without the need to use an API. You can customize the design of your search pages and autocomplete boxes to match your brand's look and feel. This saves you a lot of time compared to implementing search functionality through an API.

Get Started

To get started with Search Templates on your website, navigate to the Search tab under 'On-site' within the Nosto UI. This is where everything for Search can be configured and controlled, including designing the templates for search pages and autocomplete dropdowns, as well as search analytics, merchandising rules and other settings. Synonyms for search queries can also be configured here.

If you prefer to develop the template in your local IDE of choice, we recommend you also take a look at Nosto-CLI. The CLI tool set allows you to develop the template on your machine with your own tools, and upload the build artifacts directly to Nosto.

To begin implementing Search, navigate to the Templates tab under Search, and Click on “Open Code Editor”.

Nosto Admin UI > Search

You will then be redirected to the Code Editor window, where you can see and edit all project files.

Code Editor

Search Templates ship with a library called @nosto/preact that contains functionality to interact with the Nosto Search product. API documentation for the library is available here

Project structure

Project structure has the following requirements:

• index.js - this is application entry point that is used when building project. When building project it will recursively scan this file for imports.

• build/ - this directory stores build output that will be used when deploying project.

Saving, testing & deploying

After saving changes (CTRL + S) build should be triggered and bundled code should be uploaded to CDN. You can preview final result on your website and deploy it when ready.

https://github.com/Nosto/wiki-docs/blob/Techdocs/implementing-nosto/implement-search/implement-search-using-code-editor/broken-reference/README.md