logo
This section states the purpose of each page.

Introduction

In this summary, we will describe each page and its content. The Page Element is the fundamental one that contains all the other elements.
πŸ’‘
Tip: See Bubble Reference for more information about Pages element https://bubble.io/reference#Elements.Page πŸ™‚

Pages

index

This is the main page typically encountered first on the web app that usually contains links to the other pages of the site. A homepage includes a variety of menus that make it easy for users to find the information they need.
Instamart comes with a landing-like page, where users can see platform benefits and reviews, as well as instantly type in their ZIP code and check the local stores:
Image without caption
When users click the Search πŸ” button to find local stores, it redirects to the stores page, also sending the zip parameter with the entered ZIP code:
Image without caption
Image without caption
πŸ’‘
Tip: Check stores page description to see how the zip parameter is processed.
The reviews section is pulling data from the Index_review option set:
Image without caption
Image without caption

cart

This page displays all the items that have been added to the πŸ›’ shopping cart, awaiting checkout. Users are able to change the quantity of the added products and write some additional πŸ’¬ comments for delivery, for example:
Image without caption
πŸ’‘
Tip: The Delivery fee (flat) can be changed on dashboard page.
The quantity change is functioning the following way: when clicking the Group "ItemMinus", it is subtracting -1, from the Cart Item's quantity field, and when clicking the Group "ItemPlus", it is adding +1 to the field:
Image without caption
Image without caption
It also updates the total price field afterwards:
Image without caption

checkout

This is the page where users complete their delivery address information, select a delivery time and payment method.
The available options for πŸ’³ payments are Stripe and PayPal.
Image without caption
πŸ’‘
Tip: The Delivery fee (flat) can be changed on dashboard page.
The delivery time dropdown πŸ•“ is pulling data from Timing option set:
Image without caption
Image without caption
For the payment itself, the button click may trigger 2 custom events, depending on the selected checkbox: Card (Stripe) or PayPal:
Image without caption
Image without caption
For example, when the Button "Payment" is clicked and no error occurred, the workflow triggers the stripe custom event:
Image without caption

dashboard

This page is designed to manage platform data, e.g. Users, Items, Payments… and others. Only users with admin rights are able to access this page (in read-only mode), and those users who have access rights can edit or delete anything here.
To access this page and use its features at fullest, it is required to have admin and writing rights.
⚠️
Admin: See the instructions on how to grant Admin Rights in your template.
Instamart dashboard comes with 4 tabs: Dashboard, Stores, Orders and Customers.

​πŸ–₯ Dashboard

Image without caption
πŸ’‘
Tip: The Delivery fee (flat) can be changed in the Dashboard tab here.
The Store departments list is pulled from the Department Types data type, here:
Image without caption
To locate this element within design elements, it is required to unhide it.
πŸ’‘
Tip: Initially, the design elements might be hidden in the editor.
Here is how to unhide πŸ‘€ them:
Image without caption

Stores

In this tab, admin users are able to manage the stores data. The list of all stores is displayed, where it is possible to click on any store to see the detailed information, like: logo, name, address, region, point on the map, available departments, as well as the list of available Store Items that are also manageable in this tab.
Image without caption
The departments tags are being pulled from the Department Type data type, in this multidropdown element:
Image without caption

Orders

Here, it is possible to see the order information and items included in that purchase. Admins can see the information like client's phone, order date, delivery address, order ID and status. The item information contains the product name, quantity, product price and the total price.
Image without caption
πŸ’‘
Tip: The order status can be New, Assembled, Picked up, Delivered or Canceled. From this tab, it is possible to change the order status.
Image without caption
Depending on the Order's status field, the status text for the button is changed in the Conditionals tab, here:
Image without caption
When the admin clicks on the status button, the Order's Status object is changed:\
Image without caption

Customers

The Customers tab lists all platform users with the following information: name, email, address, phone number and the last order date. It is also displaying the list of all orders. In case there are not orders yet, a simple text is displayed instead.
Image without caption

item

This page displays the product information. Users can add the product to their shopping cart and select the quantity. The order price in the cart will be updated.
Image without caption
The βž– and βž• buttons can be found here:
Image without caption

myaccount

This page is the user profile. Here, it is possible to edit the information like name, gender, address, and password. Also, users can see the list of their purchases in My Orders tab.
Image without caption
πŸ’‘
Tip: All purchases are saved in the **My Orders **tab, and users can repeat the order if needed
When clicking on the My Profile or My Orders tabs, different content is being displayed on the page. This happens due to different codes from the page URL.
πŸ’‘
Tip: To learn more about getting data from page URL, see Bubble Manual.
In case the q parameter's value from page URL is profile, the style is changed (meaning the button was clicked), as well as the icon and the text itself, for example:
Image without caption
Image without caption
Image without caption
Image without caption
The page content also depends on the q parameter from the page URL. When q value is profile, the profile group is visible:
Image without caption
When q value is orders, the orders group is visible:
Image without caption

store

This page is simply displaying the store products that can be purchased. These products are split into different Department Types, and it is possible to filter by them.
Image without caption
The left menu is a reusable element called department, which can be found in the element called Group Department, here:
Image without caption

stores

On this page, the list of all stores is displayed. It is also possible to filter the stores by Department Types their products are categorised by.
Image without caption
The "Clear all filters" button is simply clearing the departmentSelected state:
Image without caption
πŸ’‘
Tip: To learn more about custom states and how to use them, see Bubble Manual.

reset_pw

This page is used for resetting the password. It comes with a form to type in the new password and confirm it.
Image without caption

404

This is a custom-designed page for 404 redirect errors, informing a user that the requested web page cannot be found, or it doesn't exist.
Image without caption

Helpful?