Implement Cart in multi-vendor store using Bubble.io

In this article we show you how to add cart functionality to multi-vendor marketplace using Bubble.io. In previous stories we started a tutorial which describes how to create a small demo multi-vendor marketplace where vendors can sell their software products. You can read our previous articles where we have described about:

• how to create user roles for marketplace: administrator, seller and buyer
• how to create seller dashboard
• how to create product catalog with filters and search box

Now, we are going to continue our tutorial and describe in detail how to build cart functionality along with order functionality. Before we start, let’s describe how a cart should work on the client’s side. We divide order procedure into steps:

1. Potential buyers try to search products using filters and search box.
2. When they have found a product, they enter how many items (licenses) they want to buy and click the ‘Add to cart’ button. Product goes to cart.
3. Customers can repeat steps 1-2 as many times as they want.
4. Buyers are able to remove previously added products from cart.
5. At the end, buyers click the ‘Order Now’ button. At this point our application generates new orders and clears the cart.

Definitions: Cart, Order Item and Order

Cart is a place, where clients put products which they want to purchase. Doing this, buyers need to select how many items they want to buy. So, information about product, product’s price and count of product items make up the row. We call this row an Order Item. Order Item contains such information: title of product , count of product items and total cost. Total cost is calculated as [total cost] = [product price] * [count of items]. As we are building an online marketplace, then it is possible that clients can put many products from different sellers into the same cart. It means that each Order Item should also include information about the seller of the product. In our case, we need to create a ‘seller’ attribute of Order Item. ‘Seller’ attribute is User data type. User Type is one of the standard Bubble.io data types. Additionally, we need to create a status attribute of Order Item. Status attribute should display what is happening with the purchased product at any time. We use such values of status attribute:

• pending – is initial status and is assigned automatically to the order item when product is ordered by client
• accepted by seller – means that seller has accepted order
• canceled by seller – when seller wants to signal that purchase is impossible for some reason
• canceled by customer – this status is caused when buyer decided to cancel buying, after order was created
• received by client – when client downloaded software
• refund request – client wants to return order and get money back
• finished – order successfully finished

Each Order Item within the same order will have its own status, because each row can be processed separately by different sellers. For example, buyers can put into one Cart two different products from two different sellers. Each seller can process ordered products differently. Apparently, different products from the same Cart can have different statuses at the same time.

After the client finishes putting products into the cart and selects how many items are wanted to buy then the buyer can click ‘Order Now’. At this point our application needs to generate an Order. Then it puts all Order Items into Order, assigns a unique number to it and clears the Cart. That means Order contains the same information that was in the Cart plus unique number. At the end of the purchase procedure the Order contains the same Order Items which were created after the client has put products into Cart.

Notes about cart features described in this article

For simplicity, we omitted payment stage with payment processors like PayPal or credit card in our application. Also temporary, we do not implement procedures that represent downloading of digital products (files and licenses) . This will be covered in our next articles. Also please note, that we are creating a marketplace of digital products. That means we do not need to implement warehouse functionality.

Prepare Database

As we mentioned above, when clients add a new product into cart they need to point out how many items they want to purchase. So, our application should create a new row in the cart which contains: product title, price, quantity and total sum which is calculated by the formula product price * quantity. We call this row an Order Item and lets create appropriate Data Type. Go to the Data tab and add a new Order Item type.

Ok, we described what happens when a client selects some product and clicks the Add to Cart button. But do not forget that the client might want to add many products to the cart. So our cart should contain many rows of type ‘Order Item’. Please also note that the shopping cart is a temporary item that will be cleared once our application creates an Order immediately after customers confirm their choice by clicking on the “Order Now” button. This means that we need to create two additional things: the Cart and the Order. We already know that a cart is actually just a list of rows with products, their prices, quantities and other attributes. We also need to store these lists somewhere. Best way is to store those lines into some field that belongs to the customer. Lets add this new field into the User data type. Go to the Data tab, click on User data type, and then click ‘Create New Field’. Afterwards, let’s give ‘Cart’ the name of the new field. Next, select type ‘Order Item’ from list and then select ‘This field is a list (multiple entries)’ checkbox.

As a result, we will get similar view of User fields lists:

Now we also need to create an Order data type with these fields:

At this point, we have prepared our part of the Database, which is necessary for the cart function.

Prepare Design

Open product catalog page that was created in previous article. Click on RepeatingGroup with name ‘Software product’ and add there two elements: input and button. The first element, which we call “quantity”, is where the customer enters the quantity of items purchased. The second item is called “Add to Cart”.

Add a second repeating group to the catalog page. This will show that our shopping cart has been added to it. Open its element inspector and select “Order element” in the “Content Type” fields. After that, select “Current User’s Cart” as the data source in the “Data Source” field.

After that, add three inputs (1) and one button (2) into a new repeating group. Label the button ‘Remove’. Next, add one text element (3) and one input element (4) under our Cart repeating group. Then add a new button (5) called ‘Order Now’. Give the label ‘Total’ to the text element (4). Click the first input element (marked 1.1) in the picture above. Select ‘Current cell’s → Order Item’s → Product title’ in its Placeholder field. This means that the field will display the title of the product that is added to the cart.

Click the second input element (marked 1.2) . Select ‘Current cell’s → Order Item’s → count’ in its Placeholder field. This means that the field will display the count of product items added to cart.

Click the third input element (marked 1.3). Select ‘Current cell’s → Order Item’s → final cost’ in its Placeholder field. This means that the field will display the count of product items added to cart.

Click the third input element (marked 4). Select ‘Current User’s → Cart → :each item’s → final cost → :sum’ in its Placeholder field. It means that filed will display total sum of all order rows, e.g. [product 1 price] * [count of items of product 1] + [product 2 price] * [count of items of product 2] + [product 3 price] * [count of items of product 3] + ….

Configure Workflow

Double-click on the ‘Add to Cart’ button and then click on ‘Start/Edit workflow’. Select ‘Click here to add new Action’ then ‘Data (Things)’, then ‘Create New Thing’

In the pop up window select ‘Order Item’., and then click on ‘Set another field’ for 5 times. This will add 5 configuration fields for each Order item attribute.

After, you should configure each field according to each attribute of Order Item. In the first field you need to select product attribute on the left side and select ‘Current Cell’s’ → ‘Software product’ on the right side. In the second field select count attribute on the left and select ‘Input quantity’s’ → ‘value’ on the right side. In the third field select ‘final cost’ on the left and then select ‘Input quantity’s’ → ‘value’ → ‘*’ → ‘Current cell’s’ → ‘Software product’s’ → ‘price’ on the right. Third field means that we want to multiply the product’s price and quantity from the input field that is entered by the client. We want to store the result of this multiplication into the ‘final cost’ attribute of Order Item. Select ‘product title’ attribute on the left side in the fourth field and ‘Current cell’s’ → ‘Software product’s → title on the right. Fourth attribute is redundant because we already created product attribute. But it is more convenient to see the title of the product later in the reports. In the fifth field you need to select the ‘seller’ attribute of Order Item on the left side and ‘Current Cell’s’ → ‘Software product’ → Creator on the right. The fifth field means that we want to see who is the seller of the purchased product.

Now, close the pop up window and select the ‘Click here to add an Action..’ button. Then select ‘Account’ and then ‘Make changes to the current user’. We need to add the next action which adds the result of the previous step into Current User’s Cart. Let’s remember that we created the Cart attribute of User in the ‘Prepare Database’ chapter.

In the pop up window click on the ‘Change another field’ button. It will create a new configuration field.

Select ‘Cart’ → ‘add’, and ‘Result of step 1 (Create a new Order Item)’ on the left side. This configuration tells Bubble to get the result of the previous step and to add it to the current User’s Cart. As we mentioned early the result of previous step was ‘Order Item’ line.

Generate Order

Next, return to the Design tab and double click on the ‘Order Now’ button, then click ‘Start/Edit workflow’, then click on ‘Start/Edit workflow’. Select ‘Click here to add new Action’ then ‘Data (Things)’, then ‘Create New Thing’. After that, click on ‘Set another Field’ for 4 times. It will add 4 config fields. In the first configuration field select ‘order item’ → ‘set list’ on the left side and select ‘Current User’s’ → Cart on the right side. That means we add user’s cart as a list to the ‘Order Item’ attribute of the newly created Order. In the second field select ‘order number’ on the left side and ‘Do Search for’ → Order’s → last item → order number → + → 1 on the right. Last expression means that we want Bubble to look the last Order , then take its order number and then add 1. For example if we have 4 orders in our database , then Bubble gets the order number of the last order (#4) and after adds 1 to its number. As a result Bubble assigns 5 to the ‘order number’ attribute of the new Order.

In the third field select ‘total order sum’ on the left side and ‘Current User’s’ → Cart → each item → final cost → sum on the right. Pay attention how we tell Bubble to sum the results of each Order Item. User has a Cart. Cart contains a list of Order Items. Each Order Item has its own final cost attribute. We ask Bubble to calculate their sum. In the forth field select client title on the left side and select Current User → email on the right side. Obviously, after our app creates a new order, we need to empty our cart since it is still stored in the User’s Cart variable. For this purpose close pop up window, then select ‘Click Here to add new action’. In the new pop up window, first click ‘Change another field’. After that, in the created field, you need to select the following: Cart → clear → list.

Removing Order Item from the Cart

Okay, we’ve set up order creation. The last step we need to take is to implement a reaction when the customer clicks ‘Remove’ Order Item from Cart. To do this, go back to the Design tab and double-click on the ‘Remove’ button. Then click on ‘Start/Edit workflow’. On the ‘Workflow’ tab, click ‘Click here to add a new action..’ button.

In the ‘To delete’ field of the pop up window select ‘Data (Things)’ -> ‘Current cell’s Cart’.

Select ‘Click here to add a new action..’ button again and select ‘Account’ -> ‘Make changes to current User’.

Click the ‘Change another field’ button. In the new field select Cart → remove → Current cell’s Order item. We finished building the Cart feature of a multi-vendor store. Now let’s test.

Testing

Since we are building a marketplace, it makes sense to check how the cart works for different customers. The best way to run our “product catalog page” as different users is to follow these steps:

1. Open ‘product catalog page’ in Design tab
2. Go to the Data tab and then select the ‘App data’ sub tab.
3. Select ‘All users’ or ‘All users modified’. You need to see list of all users added to our application
4. Click on ‘Run as→’ button of arbitrary user

After clicking “Run as →” we should see the catalog page with products. Enter the quantity and click the “Add to Cart” button several times. You should see new lines added to the cart. After that, you can delete some rows from the trash. Please check the general value of the field. If you did everything, then it should be calculated correctly. After clicking on the “Order Now” button. He must empty the cart and create a new order.

To check this order please go to ‘Data’ tab (1), then select ‘App data’ (3) and then ‘All Orders’ . You should see a list of created Orders.

Each order must contain the order number, list of order item IDs, total amount, Created by. The “Created” field is the customer who ordered products, the “Total amount” field must equal the amount calculated in the cart, the order item IDs is a list of the IDs of each order item. To view detailed information about each order item and which products and quantities were ordered, you need to select “All Order Items” on the same page.

Conclusion

In this article we learned how to implement cart features in multi-vendor stores. As you already know, the entire implementation consists of 3 stages: prepare database, prepare design and configure workflow. There are few important techniques we used:

1. If you want to describe some entity from the real world using Bubble and to store it into a database then you need to use the Thing type. In our application we used the Thing type for creating Order Item and Order. Each entity has attributes and properties. Similarly each object of the Thing type in Bubble has its own fields. For example Order Items have product title, count, price , final cost etc.
2. We can use custom fields to store temporary data. In our application, we used the “Cart” field, which contains a list of order items that the user added to the cart. Later, we can delete temporary information when we need it. For example, we cleared the “User Cart” field after the customer completed the order, and we moved the ordered items to the “Order”.
3. If you need to calculate some aggregate value, you can use two tools: each element and :sum . We used this technique to calculate the total amount in the cart. For example, “Current user → Cart → :each item → final cost → :amount”.
4. You can notice that we used ‘Result of step ..…’ in workflow configuration, when you want to pass some data between workflow steps.

If you have an interest in this you can subscribe to our blog updates. Also if you have some questions regarding the subject of this article then you can ask us using our consultation page