PAGES YOU NEED TO BUILD FIRST:

1. Create Profile

2. Profile Home
3. Menu Page – Gridview (Backend query)

4. Product Details
 5. Checkout page

SETTING UP COLLECTIONS (FIREBASE IN FLUTTERFLOW)

1. Create Users collection, allow auto populate.

 a. Add Fields
i. Field name: “dailycoffees” Data Type: Integer
ii. Field name: “averageRating” Data Type: Integer
2. Create MenuItems collection-choose Template collection “Products”
a. Add Fields
i. Field name: “productPhoto” Data Type: ImagePath
ii. Field name: “modifiers” Data Type: List <String>
iii. Field name: “modifiers_2” Data Type: List <String>
3. Create Cart collection-choose Start from scratch
a. Add Fields
i. Field name: “userRef” Data Type: Doc Reference (Users)
ii. Field name: “itemCount” Data Type: Integer
iii. Field name: “cartActive” Data Type: Boolean
iv. Field name: “subtotal” Data Type: Double
v. Field name: “cartItems” Data Type: List<Doc Reference (itemDetail)>
4. Create itemDetail collection- choose Template collection “Products”
a. Remove Fields:
i. Created_at
ii. Modified_at
iii. On_sale
iv. Sale_price
b. Add Fields
i. Field name: “cartRef” Data Type: Doc Reference (Carts)
ii. Field name: “menuitemRef” Data Type: Doc Reference (MenuItems)
iii. Field name: “modifiers” Data Type: List<string>
iv. Field name: “modifiers_1” Data Type: List<string>
v. Field name: “menuitemPhoto” Data Type: Image Path

ADDING DOCUMENTS TO YOUR COLLECTION

1. Click
2. Select MenuItems collection
3. Click Add Document button
4. Type in:
a. Name: Espresso
b. Description: a Colombian blend with hints of chocolate
c. Price: 250
d. productPhoto: add a URL for a photo, choose most appropriate one
e. Leave the rest blank – then click Add Document

f. Name: Tea
g. Description: calming green tea and honey
 h. Price: 150
i. productPhoto: add a URL for a photo, choose most appropriate one
j. Leave the rest blank – then click Add Document

CONNECTING DATABASE TO UI

- CRETEA PROFILE PAGE

1. Select Create Profile Page – add action to “Save Changes” button
2. Use authentication to create an account
3. Add field to set the Display Name field
4. Add photo_url field; Type: Image Path; Value Source: From Variable – uploaded File URL
5. Add dailycoffees field; Value Source: Specific Value – 3
6. Add averageRating field; calue Source: Specific Value – 4.8
7. Add ACTION to this chain to connect user to its cart
8. Define Action properties:
a. Search create
b. Select Create Document under Database>Backend/Database
c. Collection: Carts
d. Add all the fields to set it properly
i. userRef: Authenticated User – User Record Reference
ii. itemCount: Specific value - 0
iii. cartActive: Specific value - false
iv. subtotal: Specific value - 0.00
9. add another ACTION to this chain to navigate the user to the Profile Home page.
- SET UP PROFILE HOME
1. Set your Display name to authenticated user from your database
2. Set up your Daily Coffees and Avg. Rating to be connected also from your database
3. You can change Text properties for display value of Daily Coffees and Avg. Rating for more
readable display text.
- SET UP MENU PAGE
1. Select Container from your product display (the one that has the active picture)
2. Add action – Navigate To – ProductDetails
3. Add Parameter – Click + Define button
4. Click Add Parameter
5. Product name: productSelection
6. Type: Document
7. Collection Type: MenuItems
8. Click Confirm button and then click on Pass button as well
9. Click on productSelection, then click UNSET
10. Select on MenuItems Document – Select Document (MenuItems)
11. Change Category Name to set from variable to display menu item name from database, also
change the price as the sub-text
- SET UP PRODUCT DETAILS PAGE
1. Select ProductDetails page (phone icon)
2. Create backend query, choose Querry Collection
3. Choose Carts collection
4. Click Filter – under Collection Field Name select userRef
5. Relation: Equal To; Value Source: From Variable – User Record Reference (Authentication)

(Step 5 is to make sure that the item from this cart will be attributed to the user who logged in)

6. Set all the necessary display to describe this item to be connected to the database
(productSelection parameter).
7. ADD ACTION
8. Select Add To Cart button, open the action editor.
9. First action: Backend Call – Create Document; Collection: itemDetail
10. Set fields:
a. name: From Variable – productSelection; Document Properties: name
b. description: From Variable – productSelection; Document Properties: description
c. price: From Variable – productSelection; Document Properties: price
d. quantity: From Variable – Widget State-#CountController
e. cartRef: UNSET-Carts Document – Reference (Carts ref)
f. menuitemRef: UNSET-productSelection; Document Properties: Reference
g. modifiers: List Update Type: Set Value
i. UNSET: Widget state – modifiers
ii. CONFIRM
h. modifiers_1: List Update Type: Set Value
i. UNSET: Widget state – modifiers_2
ii. CONFIRMS
i. menuitemPhot: Type Image Path – Field: menuitemPhoto
i. From Variable:
ii. UNSET: - productSelection
iii. Document Properties: productPhoto
11. ADD ACTION
12. Backend Call – Update Document
13. UNSET: Carts Document – Reference (Carts ref)
14. Click add fields to populate necessary fields to be updated
a. itemCount:
i. Value Source: Update (Increment, Delete, etc)
ii. Firestore Field Value: Increment
iii. Increment Value-Value Source: From Variable
iv. UNSET: widget state - #CountController
b. cartActive:
i. Value Source: Specific Value
ii. Value: True
c. subtotal: (will be changed later)
i. Value Source: Update (Increment, Delete, etc)
ii. Firestore Field Value: Increment
iii. Value Source: From Variable
 iv. UNSET: productSelection
v. Document Properties: price
vi. CONFIRM
d. Go back to your first action “Action 1 – Backend Call – Create Document”
i. Action Output Variable Name: type iteminCart
e. Go to your second action “ Action 2 – Backend Call – Update Document”
f. cartItems:
i. List Update Type: Add to Set
ii. Click UNSET
iii. Action Outputs: iteminCart
iv. Chose: Reference
15. ADD ACTION
16. Navigate to: Check out page
17. Set up your back icon/button – to navigate back

CHECK OUT PAGE

1. Click on CheckoutPage page (phone icon)

2. Add Backend Query
3. Query Type: Query Collection
4. Collection: Carts
5. Query Type: Single Document
6. Filters:
a. Collection Field Name: userRef
b. Relation: Equal To
c. Value Source: From Variable
d. UNSET: Authenticated User-User Reference
e. CONFIRM
7. Edit ListView (before editing ListView, make sure your widget tree looks like the image below)

8. Click Add Backend Query

a. Query Type: Querry Collection
b. Collection: itemDetail
i. Query Type: List of Documents
c. Click Filter button:
i. Filter 1
ii. Collection Field Name: cartRef
iii. Relation: Equal To
iv. Value Source: From Variable
v. UNSET: Carts Document – Refence
vi. Click Confirm and Yes/CONFIRM
d. Set your labels
i. Product Name (text): Set from variable
ii. itemDetail Document: name
iii. Quantity (text): Set from variable
iv. itemDetail Document: quantity
v. CONFIRM
vi. Price (text): Set from variable
vii. itemDetail Document: price
viii. CONFIRM
ix. Subtotal (text): Set from variable
 x. Carts Document: subtotal
xi. CONFIRM
xii. Product image (image): Find Image Type on Property panel
1. Image Type: Network
2. Path-itemDetail Document: menuItemPhoto
e. Go back to Product Details page
f. Select Add to Cart button
g. Open action editor
h. Change subtotal script:
i. Click on price

ii.
iii. Change Variable from “Parameter: productSelection” to Custom Function
1. Click Create New Function
2.

3. Function Name: subtotal

4. Data Type: Double
5. Click twice
6. Argument 1 Name: quantity | Data Type: Integer | Nullable: False
7. Argument 2 Name: price | Data Type: Double | Nullable: False
8. Click Code tab

9. Erase the comment “// Add your function code here!

10. Type
a. return quantity * price;
11. If you want to test it, click on Test Tab

12. Input value to quantity and price then click Run button to test if your
function is working properly.
13. If YES, click SAVE button
14. You have to change this

15. Click price, then quantity

16. Change Value Source from Specific Value to From Variable
17. UNSET: widget state-#CountController
18. Click price
a. Value Source: From Variable
 b. UNSET: productSelection
c. Document Properties: price
d. CONFIRM
19. Change Tax to 1.8%, and Shipping to 4.99 (manually)

a. Click on Order Total

b. Then click Set from variable Icon
c. Click Custom Functions
d. Create New Function
e. Function Name: totalPrice
f. Data Type: Double
g. Click Add Argument thrice to add three arguments
h. Then edit the following fields and its values based on the image
below:

i. Click on Code tab to write your custome function

j. And type this code: return subtotal + (subtotal * (tax/100)) +
shipping

k.
l. Click Save
 m.
n. Set subtotal
i. Value Source: From Variable
ii. UNSET: Carts Document – subtotal
o. Set tax
i. Value Source: Specific Value
ii. Value: 1.8
p. Set shipping
i. Value Source: Specific Value
ii. Value: 4.99
iii. CONFIRM
9. You can now try and test your app.