Getting started with the Ecommerce UI template
On this page
The Flutter Helpers are available as alpha software. They depend on the Algolia Dart API client, which is developed by the community. Note that the Algolia SLA don’t apply to community projects. To share feedback or report a bug, open an issue.
You can run the Ecommerce UI template 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 send your data to your Algolia index.
Running the Ecommerce UI template
- Install Flutter
- Fork the Flutter Ecom UI Template repository
- Clone the forked repository to your local machine
- Install the dependencies:
flutter pub get
- Configure the environment variables
- Start the application:
flutter run
Connecting your Algolia app to the UI
Change the values of the Algolia credentials in the lib/credentials.dart
file.
To use the sample data from Algolia’s Ecommerce UI demo, leave the values as they are.
The following variables are used:
Name | Value |
---|---|
applicationID | Your Algolia Application ID |
searchOnlyKey | Your Algolia Search API Key |
hitsIndex | Your Algolia index name |
suggestionsIndex | Your Algolia Query Suggestions index name |
API client
To use the Algolia API from your Dart application, you have these options:
- Use the community API client (used in this guide)
- Call the REST API methods directly using the http package.
Structure
If you want to experiment with customization, the Ecommerce UI template is structured as follows:
lib/data
: services and data providerslib/model
: model objects for products data representationlib/ui/screens
: applications screens and their componentslib/ui/widgets
: standalone UI widgets used on multiple screens
Using your own data and configurations
The demo application data and configurations can be found in the dataset
folder as JSON files that you can upload to Algolia:
- products_configuration.json
- products_dataset.json
- products_query_suggestions_configuration.json
- products_query_suggestions_dataset.json
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
}
}