• Discover the Interface X ecosystem and how Interface X works.
• Develop using Interface X inside your project.
• Integrate the Interface X Archetype in your store web application.
• Use and configure the Interface X Components in your project.

The Interface X ecosystem

The Interface X ecosystem consists of libraries of components for web. These independent building blocks, with their own unique view and behavior, allows you to progressively build your search and discovery experience. The more you add, the more functionality you get. There are numerous components to choose from, and the catalog evolves quickly with new experiences.

Check out the open source project in GitHub (opens new window).

Interested in learning more about how Interface X works? Discover more about its architecture.

Developing with Interface X

You can use the Interface X in a project in two ways:

• using the separate Interface X Archetype project, an out-of-the-box project with all you need to get up and running fast
• importing the individual Interface X Components library in your Vue project for a more custom approach.

note

You can use Empathy Search API, Elasticsearch, or Solr endpoints with both approaches.

Developing via Interface X Archetype

The Interface X Archetype (opens new window) project is the perfect combination of all the existing X Components. It allows you to ramp up quickly with an already working search and discovery experience, instead of starting from a completely blank canvas. This is the perfect solution for most cases as you can use it as a springboard to:

• Change the default styles for styles that match your application through design tokens or custom CSS.
• Change configuration parameters such as the number of suggestions, enable, or disable instant search.
• Change the layout, position, or the number of the components used.
• Use the individual X Component internationalization tool or use your own tool.
• Create new components or modify the existing ones.

To start developing the X Archetype project, see Develop using Interface X Archetype.

Developing via Interface X Components library

This is the more deep and flexible use of the Interface X Components library (opens new window), allowing you to import any components you desire into your Vue application. It lets you connect, customize, extend, style, or even create new components without any limitations. This is the way to go if you like to look under the hood.

• Mix and match with other Vue components.
• Implement in Vue or React projects.
• Extend component behavior with your own development.
• Determine styles using design tokens or custom CSS.

To get started with the X Components library, check out Develop using Interface X Components library.

Integrating Interface X Archetype

With the Interface X Archetype (opens new window) you have an isolated search layer up and running in your store web application in a matter of minutes.

To integrate the Interface X Archetype into your project, just load the generated JavaScript file into your website and initialize it.

Check out Integrate InterfaceX Archetype into an existing website, to integrate the X Archetype project.

Using and configuring the Interface X Components

To use the Interface X Components, just import and register the component, include it in your template, and you’re ready to go.

What’s more, each component offers multiple configuration parameters to play around with, giving you greater flexibility over the experience.

Unsure how to start? Check out How to use and configure Interface X Components in your project.