Getting Started with the Ecommerce UI Template
You can run the Ecommerce UI template locally in one of two ways:
- Using Algolia’s
latency
application. If you use thelatency
application, you can’t customize records or index configurations (such as settings, Rules, or synonyms). - Using your own application. To do this, you must import the demo site’s dataset into your Algolia application with the template’s CLI tool.
Running the Ecommerce UI template
- Fork the PWA Ecom UI Template repository
- Clone the forked repository to your local machine
- Install the dependencies:
npm install
oryarn install
- If you want to use the default
latency
application, continue with the next step. If you want to use your own application, run the CLI tool - Configure the environment variables
- Start the development server:
npm run dev
oryarn dev
- Open the project in your browser
Running the CLI tool
Use this tool to import the demo site’s data into your Algolia application.
- Run the CLI:
npm run cli
- Follow the CLI steps using the
Import
action. This will import four new indices into your Algolia application - Configure the
CLI_APP_ID
andCLI_ADMIN_API_KEY
environment variables
Connecting your Algolia app to the UI
Rename the .env.sample
file to .env.local
and change the values. To use the sample data from Algolia’s Ecommerce UI demo site, leave the values as they are.
The following environment variables are used:
Name | Value |
---|---|
NEXT_PUBLIC_INSTANTSEARCH_APP_ID | Your Algolia Application ID |
NEXT_PUBLIC_INSTANTSEARCH_SEARCH_API_KEY | Your Algolia Search API Key |
NEXT_PUBLIC_INSTANTSEARCH_INDEX_NAME | Your Algolia index name |
NEXT_PUBLIC_INSTANTSEARCH_QUERY_SUGGESTIONS_INDEX_NAME | Your Algolia Query Suggestions index name |
CLI_APP_ID 1 | Your Algolia Application ID (used by the CLI to import and delete datasets and configurations) |
CLI_ADMIN_API_KEY 1 | Your Algolia Admin API key (used by the CLI to import and delete datasets and configurations) |
1 Fill in the CLI_APP_ID
and CLI_ADMIN_API_KEY
environment variables in the .env.local
file so that the CLI tool uses these values by default when requested.
Structure
If you want to experiment with customization, the Ecommerce UI template is structured as follows:
/components
: UI components (Autocomplete and InstantSearch widgets)/config
: configuration files (for example, you can configure displayed refinements or search parameters)/hooks
: custom React hooks/layouts
: application and page layouts/lib
: library-related code/pages
: pages (home, product listing/, and product detail pages)/public
: static assets/styles
: themes (the default theme uses Tailwind CSS)/cli
: command line interface tool settings to import and delete data and configurations to your Algolia application/typings
: TypeScript types/utils
: various utility functions.
Using your own data and configurations
The demo site’s data and configurations can be found in the cli/data
folder as JSON files:
- products_configuration.json
- products_dataset.json
- products_query_suggestions_configuration.json
- products_query_suggestions_dataset.json
Replace these files with your own and use the CLI tool to import this data instead of the demo site data.
Example product record
The following is an example of a typical product record:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
"objectID": "A0E200000002GZB",
"name": "Michael Kors – shopper “Jet Set Travel”",
"description": "The sleek leather shopper from Michael Kors is the perfect every day bag, which offers enough space for the most important essentials in the office while traveling or shopping. The longer handles allow you to carry the bag comfortably on the shoulder, while the black leather and silver tag provides subtle elegance. A real investment piece that will accompany you from season to season.",
"brand": "Michael Kors",
"gender": "women",
"hierarchical_categories": {
"lvl0": "Women",
"lvl1": "Women > Bags",
"lvl2": "Women > Bags > Shopper"
},
"image_urls": [
"https://res.cloudinary.com/hilnmyskv/image/upload/v1638375538/flagship_sunrise/A0E200000002GZB_0.jpg"
],
"reviews": {
"rating": 4,
"count": 42,
"bayesian_avg": 3.906976744186046
},
"color": {
"filter_group": "black;#333",
"original_name": "black"
},
"available_sizes": [
"one size"
],
"price": {
"currency": "EUR",
"value": 343.75,
"discounted_value": 0,
"discount_level": -100,
"on_sales": false
}
}