Whether you use Empathy Search API endpoints, Elasticsearch, Solr or other search APIs, bring your commerce search and discovery experience to life with Interface X, an irresistible, expressive, and joyful search UI. Interface X is used within some of the most beautiful commerce search experiences out there, e.g. Carrefour.es, Pull&Bear.com, and Kroger.com.
Interface X is a library of standalone, configurable building blocks (available as Vue.js based X Components) that allow you to quickly construct the search UI for your shop. You can create a smooth, personalized search and discovery experience, while significantly minimizing development time.
Each component represents a graphical part of the UI, with its own unique view and behavior. They’ve been smartly designed to work together yet independently, so a single component adds real value to your UI by itself. The more components you add and combine, the more functionality you get. You can craft your own UI bundle with the right components for your shop. There are numerous components to choose from, and the catalog evolves quickly with new experiences.
See an overview of the Empathy Platform features supported by Interface X.
- Easy-to-add interface layer. Installing and setting up the interface is simple: just add a few lines of code.
- Use it anywhere. A search interface layer that is easy to integrate into any website, with X Components ready to use in your Vue.js and React projects.
- Interoperable. Interface X can adapt and work independently with any search service endpoints!
- Fully personalizable experience. Choose the configuration components, layouts, styles, and behaviors to craft exclusive search and discovery experiences.
- Expressive design. Wrap the experience up in a neat, intuitive, and interactive UI design that fully matches your brand identity and your website’s look and feel.
- Scalable solution. Extend the experience whenever you want with additional features and components.
- Intuitive search. Interface X learns from shopper behavior and queries to understand shopper intent.
Interface X is formed by multiple packages. Watch this space as the project will be updated regularly.
While most of the packages are minor dependencies, there is a key package to bear in mind:
- @empathyco/x-components - This is the core package of the project. These standalone and configurable building blocks allow you to quickly build the search UI for your shop. Create a smooth, personalized search and discovery experience, while significantly minimizing development time.
Besides the packages of this monorepo, there is another project using all the X-Components to build a search experience:
- @empathyco/x-archetype - This project is Empathy’s vision of the ideal mix of X Components. A project showing the power of the X Components, ready to connect to any search API with customizable layout through design tokens. It is the perfect example to learn how to use the X Components to get you started. This package is now a project outside this monorepo.
Each component contains inline comments. Alternatively, you can read the product documentation on Empathy’s eDocs documentation portal.
We are working on many key features to consolidate Interface X, including these milestones:
- Publish extensive documentation covering functional and technical aspects.
- Support URL management to set X Components state based on URL parameters.
- Create a tagging system to track session interactions without storing PII.
- Discovery Wall: A set of results carousels to help the shopper to discover interesting products at the search home (pre query).
- Vertical Search: allows to select a given filter before performing a search.
- Module independence allowing to have different instances of the same component with different data/source of truth.
- Provide a No Network State for components depending on API requests.
- Evolution of the no code design system through a visual editor.
- Server Side Rendering.
- Incorporate search box power-ups such as animated suggestions or forbidden character set to prevent code injection.
- Create a project generator CLI.
This project is a monorepo that is handled by Lerna using npm.
To prepare your development environment, proceed as follows:
- Fork the X repository and then clone it to your local environment:
git clone https://github.com/empathyco/x.git. - Install the dependencies in the root folder:
npm install. This links all the projects. - Run a build so that the linked projects work:
npm run build.
Have a look to this article to see why we moved to a mono repo and how we did it.
Once you have installed the project, follow the step-by-step guide - How to build your search UI.
Watch Ivan Tajes’ explanation on how to build a search experience using the X Components.
We are building the Interface X ecosystem. If you are interested in helping us out and being part of the future of search experiences, please check our contributing guidelines.
Bugs are tracked as GitHub issues. Create an issue in the repo and provide the following information by filling in the bug template.
 Iván Tajes |
 Javier Iglesias |
 Jose Antonio Cabañeros |
 Luís Martínez |
 Beltrán García |
|---|---|---|---|---|
 Gerardo Vázquez |
 Guillermo Cacheda |
 Guillermo Iglesias |
 Mavi Fernández |
 Diego Pascual |