Home
This project aims to be used by any e-commerce website to bootstrap a search experience powered by Algolia the fastest way possible.
While you would still have to push your data to Algolia, the goal of Unified InstantSearch E-Commerce is to remove the need to implement front-end logic and be able to start using Algolia as quickly as possible.
As you customize Unified InstantSearch E-Commerce for your application, you will need to navigate the project. Here's a tour to understand what goes where, what to edit, and how.
Unified InstantSearch E-Commerce is a full JavaScript project, developed in Preact (a lightweight React alternative). The components are, therefore, written in React, and use JSX and React Hooks.
For search, Unified InstantSearch E-Commerce uses React InstantSearch.
Regarding styles, Unified InstantSearch E-Commerce uses Sass, a CSS superset, and pre-processor.
You don't need to include Preact or React in your website. Unified InstantSearch E-Commerce is self-contained, and the generated files that you import in your website contain everything you need. It works everywhere, even if your website uses another UI library such as Vue or Angular, or no UI library at all.
While the project contains many files, the only place you need to be concerned about is the src/ directory. This is where the sources of the project live, including components, styles, and global configuration. In most cases, you won't need to touch anything else.
You can configure the project in the src/config/ directory. Unless you need to tweak the components and styles, this is the only place where you'll need to make edits.
The src/config/settings.js file lets you tailor the project to your needs. To learn more about how to configure it, head over to the configuration options.
Read more on configuration options
The entry point of the project is src/settings.js, which sets up the routing and renders the application that lives in src/App.js.
All React components live under src/components/. Each custom component comes with its own, colocated Sass stylesheet. It makes it easier to find and edit styles for a given component, or remove associated styles when deleting a custom component.
Read more on customizing the search UI
The styles are organized in several layers:
-
Styling resets, scoped to the
.uni-Containerselector. - Application-level styles, typically for Unified InstantSearch E-Commerce elements.
- A theme for React InstantSearch widgets.
- Component-specific styles.
JavaScript files import stylesheets as dependencies. Since custom components import their associated stylesheets, you won't import unused CSS when you don't use a custom component.
Read more on adjusting styles