Nosto Search JS is an implementation of Nosto Search. In addition to the base search functionality, it also provides the following features:
- Currency formatting: Format prices based on Nosto settings.
- Product thumbnails: Thumbnail resizing.
- Retry logic: Retry failed search queries automatically.
- Preact components: Build modern search interfaces.
- Autocomplete: Fast and responsive autocomplete tools.
- Category search: Display and filter by categories.
- SERPs: Build search result pages with sorting and pagination.
- Utilities: Helpers for common tasks like array or object merging and equality checks.
- Infinite scroll: Loads more components upon scrolling to the end of results.
To install the package, use your preferred package manager:
yarn add @nosto/search-js
# or
npm install @nosto/search-js --saveRead Nosto Techdocs for more information on how to use the library.
Library TypeDoc page includes detailed library helpers documentation and examples.
The core package provides the foundational functionality for interacting with Nosto Search. It includes utilities for managing search queries, applying decorators, and handling search results.
The currencies package provides utilities for formatting monetary values and decorating search results with price information.
The preact/autocomplete package helps you add autocomplete functionality to your search interface.
The preact/category package provides tools to show and interact with category-based search results.
The preact/common package includes shared components that are used across other preact packages.
The preact/hooks package offers hooks to manage state and actions in your search app.
The preact/serp package provides tools to create Search Engine Results Pages (SERPs) with features like pagination, sorting, and displaying results.
The preact/legacy package is designed to provide backward compatibility for existing Search Template implementations.
The components included in this package are intended solely for compatibility purposes. They are not recommended for use in new development or as active components in modern applications.
The thumbnails package helps you resize thumbnails. It supports different formats, including Shopify and Nosto-specific ones.
The utils package includes handy tools for common tasks like array or object merging, checking equality, and generating unique values.
To set up the development environment:
# Install dependencies
npm ci
# Install dev app dependencies
cd dev/preact && npm ci && cd ../..# Build all packages
npm run buildThis compiles TypeScript, bundles with Vite, and generates documentation in the docs/ directory.
# Run all tests with coverage
npm test
# Run tests in watch mode
npm run test:watch# Check code style
npm run lint
# Auto-fix linting issues
npm run lint-fix# Start development environment (library watch + dev app)
npm run devThe development app runs at http://localhost:8000/ and provides a testing environment for the library components.