In this article we will continue to describe you how to create small online marketplace without writing a code using Bubble.io. Our demo marketplace is intended for software publishers, who can promote and sell their software products. For this purpose we are using – Bubble This platform allows to build complex web applications without writing any line of code. Current article is third part of our full guide.
- You can read our first part where we explained how to setup different user roles of online marketplace.
- Also, you can read second part where we explained how to prepare database for our marketplace.
Our seller dashboard consists of 3 pages:
- main page – is personal entry point of each seller in our web marketplace. It will be opened automatically after seller logged in. It will contain menu for access to all seller’s features. We will describe how to add those features in next articles.
- product list page will contain list of all seller’s products. Also, on this page we will display such buttons:
- Create button for creating new products
- Edit button for editing already added products
- Delete button for delete products
- product edit page will be used for create new products as well for editing already added products.
Create seller main page
First, lets create seller main page. For this you need to select ‘Add new page..’ item from left-top menu of application. Lets name our page seller_dashboard. By now, we only add there only one button called ‘My products’, so that when seller clicks on it then our application opens product list page. In future we will put on it many functional elements. We configure click action later in this article.
Next, we need to restrict access to seller dashboard page for all visitors, who do not have Administrator or Seller roles. To make this working lets create two rules.
- If user is a Buyer then redirect him to home page.
- If user is not logged in then our marketplace needs to redirect him to home page.
For this we need:
Step 1.1. Select seller_dashboard page from pages list.
Step 1.2. Go to the Workflow tab.
Step 1.3. Add a new event by clicking on ‘Click here to add an event…’ . Then select the General sub-menu and then select the ‘User is logged in’ menu item.
Step 1.4. Select ‘Every time’ in Run this field. After trying to point out a rule: Current User->User’s Role is Buyer in ‘Only when’ field. So we create events.
Step 1.5. We need to create new actions. Click create new action link. In the list select the Navigation sub-menu and then select ‘Go to page…’ menu item.
Step 1.6. Inside the opened window select our home page (which is named index) within the Destination field.
Step 1.7. Now add a second rule for logged out users. Add a new Event by clicking the New event box. After selecting the General sub-menu and then ‘User is logged out..’ menu item.
Step 1.8. Create new Action. Click create new action link. In the list select the Navigation sub-menu and then select ‘Go to page…’ menu item.
Step 1.9. Inside the opened window select the index page within the Destination field.
At this point we allowed access to the seller dashboard page only for users with such roles: Administrator and Seller. Next, we need to set up the product type in our database.
Create products list page
In the previous article we have shown you how to create structured the database for our application. This was our Step 2. Now it’s time to build a seller’s product list page. Lets create a new page and give it a name: seller_product_list. When we create it we can select seller_dashboard in the ‘Clone from’ field. It allows us to copy the same access rules that allow us to restrict access to product list page for users without administrator and seller roles.
After we created the page, we needed to put a ‘Repeating group’ element on it. Repeating groups integrate with your database to display and update a list of dynamic content. When using a repeating group, you’ll need to link the element to a data type within your database. In this instance, you’ll classify the type as a Software product.
To configure ‘Repeating group’ element you need to perform next steps:
Step 3.1. Select ‘Software product’ in the ‘Type of content’ field.
Step 3.2. Select ‘Search for’ > ‘Software products’ within ‘Data source’ field.
Step 3.3. Select ‘Software Product’ in ‘Type’ field
Step 3.4. Click ‘Add new constraint’ and then select ‘Created By’ = ‘Current User’ in rule field
Next, we need to start structuring the dynamic content that will be displayed within this grid. Lets display the following information about each product in the list: title, description, price type, price, recurring payment period, Created Date. Also we add 2 buttons into each row: Edit and Delete. When user clicks on Edit then the program needs to open a page for editing the product. When a user clicks on the Delete button then the marketplace app needs to delete the product from the database. For this lets do following steps:
Step 4.1. Select Input element from element list on the left side and put it into ‘Repeating group’
Step 4.2. Enter ‘Title’ inside the Placeholder field of the editor window. Next, select Current cells > Software product > title within ‘Initial content’ field.
Step 4.3. Repeat steps 4.1 – 4.2 for description, Price type, Payment period, Date fields.
Step 4.4. Put two buttons into the ‘Repeating group’ and give them names: Edit and Delete. By now you need to have a view that is similar to the picture below.
We finished initial preparations of products list page. We return to this page after we finish to build ‘add/edit product’ page.
Link seller dashboard page with products list page
Earlier we created a seller dashboard page and put the ‘My products’ button on it. But we did not configure the click action so that our application needs to open the product list page after clicking on it. Let’s do this now.
First, open the ‘seller dashboard’ page. Next, double click on the ‘My products’ button.
After clicking ‘Start/Edit workflow..’ on the pop up window. It will get you to the Workflow tab. On this tab you need to click ‘Click here to add action..’. Then select Navigation > Go to page… menu item.
After, select seller_product_list in the Destination field.
Product edit page
Next we need to create a new page for add/edit products. Let’s name it edit_page1. Also, we need to put on this page such fields:
- title – input field
- description – multiple input field
- featured image – file uploader
- url of page – input field
- price type – drop-down with two possible values: one-off and recurring
- price – input field
- recurrent payment period – drop-down with values: monthly, quarterly, yearly
- free options – drop-down with values: Free version, Free trial period, Free online demo
- deployment – drop-down with values: SaaS, iPad, iPhone, Android, Windows, Mac, Linux
- Save – button
Do not forget to input appropriate values in the ‘Choices’ field for drop-down elements: price type, recurrent payment period, free options, deployment.
 |
 |
After, click on Save button and then click on ‘Start/Edit workflow’ inside the pop-up window.
It opens the Workflow tab where you can add the action ‘When Save button is clicked’. Then select the ‘Data (Things)’ sub-menu and then ‘Create new thing…’ menu item.
After, select ‘Software product’ in the ‘Type’ field.
Next, try to click ‘Set another field’ and try to link database fields of ‘Software product’ with appropriate Form’s fields so that you need to have following relations:
Next, click again on ‘Click here to add an action…’ at the Workflow tab and select ‘Navigation’>go to the page menu item. Then select seller_product_list . It will allow us to hide the edit form after we store new products into the database and return to the product list page.
We almost finished with the add/edit product part. Last thing we need to do is to link both ‘seller_product_list’ page with ‘ add/edit product’ page. You need to return back to Step 4.4. and click on the ‘Create’ button. In the pop-up window click ‘Start/Edit workflow’. You will be taken to the Workflow tab. Click on ‘Click here to add an action…’ and select Navigation > Go to page… menu item. Then select edit_page1 from list in Destination drop-down
We finished the main part of the configuration of ‘Seller dashboard’. Now we can test how it works. For this purpose, you can select the seller_product_list page and then click ‘Preview’. It should open the seller_product_list page. Click on the Create button and it opens the add/edit product page. Fill all fields and click the ‘Save’ button. After you do this then it will create a new product and will store it in our database and it will return to the product list page. On this page we will see a new product.
Configure edit and delete actions for products
By now we developed a feature that allows us to add products. But we also need to develop two other ones: edit product and delete product. Let’s start to build an edit function.
- Step 5.1. Open seller_product_list page
- Step 5.2. Double click Edit button on the right side of row in the product list
- Step 5.3. Click ‘Start/Edit workflow’
- Step 5.4. Add new action and select Navigation→Go to page.. menu item
- Step 5.5. In Navigation field select our edit_page1 and in ‘Data to send’ field select ‘Current cell’s’>Software product
- Step 5.6. At this point we told Bubble to go to edit_page1 when the user clicks edit button and also asked Bubble to send ‘Software Product’ data to edit_page1. But it is not enough. We also need to link Software product content type with edit_page1. For this we need to open edit_page1 for editing and select Design tab. After double clicking on edit_page1 we will see a pop up window. On this window we need to select ‘Software product’ inside ‘Type of content’ field
- Step 5.7. Next point is to link each field on form in edit_page1 page with Software product data type. For doing this we need to open edit_page1 for editing , click on each field and link form fields with appropriate database fields of Software product type. Lets click on the Title field in form. After opening pop up form we need to select ‘Current Page Software product’ > title in ‘Initial content’ field.
Now let’s link the description field. Click on it twice . In pop up window select ‘Insert dynamic data’ and after, select ‘Current Page Software product’ > description in ‘Initial content’ field
The same procedure we need to perform for other form fields. Please note that for dropdown form fields such as: price type, recurrent payment period ,free options, deployment we should point out links in the ‘Default value’ field of the pop up window. See picture below.
Testing, fixing issues and further improvements
Now, let’s test how it works. Switch to ‘Seller product list’, and click ‘Preview’ . After the product list page loaded you can see a similar view. You can click on ‘Create Button’ and the application opens the edit page. You can fill necessary fields and click the Save button. It should create a new product and display this product inside the list. Try to add a few other products.
After, try to test how the ‘edit’ button works. Click the ‘edit’ button near one of the products. It should open edit_page1 again with filled fields. Try to change some fields and click the ‘Save’ button again. But after edit_page1 page closed you can notice that our application instead of changing the product just has created a new one.
This has happened because the ‘Save’ button on edit_page1 page was configured to ‘Create new software..’ . There are some ways to fix this issue. Simplest is to have two separate Save buttons: one for create product and one for edit it. When edit_page1 is opened after we click the ‘Create’ button on seller_product_list page then our marketplace application should display only the ‘Save’ button that triggers ‘Create new software product’ action. But when we display the edit product page after the user clicks on the ‘edit’ button in the list of products then our application should display a second ‘Save’ button that is used for store modified products. Also we need to hide one Save button when we are trying to create a new product and display another. The same we need to do when we try to modify our product. We just need to display one and hide another Save button. Let’s describe all necessary steps:
- Step 6.1. Add a second Save button into edit_page1. This button will be used for store modified product.
- Step 6.2. Click on the Save button that is used for store created products. It is on the right in the picture above. We are going to hide it when the user is trying to modify a product.
- Step 6.3. In pop up window switch into Conditional tab and then click on ‘Define another condition’.
- Step 6.4. In the field ‘When’ select ‘Current page software product’>unique id>is not empty . Select ‘This element is visible’ in the field ‘Select a property to change when true’ and leave this field unchecked. Switch from OFF to ON above the ‘When’ field. We have created a new rule which says: ‘Hide Save button element when current page software product’s unique id is not empty’ . Apparently we need to hide a button intended to store newly created products when we modify them.
- Step 6.5. We need to create contrary rule for the Save button that is used for storing modified products: ‘Hide Save button element when current page software product’s unique id is empty’ . For this click on the Save button that is used to store modified products. It is on the left side in the picture above.
- Step 6.6. In the field ‘When’ select ‘Current page software product’>unique id>is empty . Select ‘This element is visible’ in the field ‘Select a property to change when true’ and leave this field unchecked. Switch from OFF to ON above the ‘When’ field.
By now we configured display or hide two different Save buttons in two different cases to create new products and modify existing products. We can try to test our configuration. We need to go to seller_product_list page and click Preview. When we click the Create button then we can see that the Save button is displayed. But when we try to click the ‘edit’ button in the products list then we will see only the ‘Save changes’ button.
As we created a ‘Save changes’ button then we need to set up workflow for it. Select this button in the edit page and click on it twice. After clicking ‘Start/Edit workflow’ . Then create a new Action and select Data (Things) > Make changes to thing… menu item. In the pop up window select ‘Current page software product’ in the ‘Thing to change’ field . After that you need to link all Software product’s database fields with appropriate Form’s fields as we did for the ‘Save’ button. You can see example demonstrated in screenshot below:
After doing the last steps, you can try to test how storing product modifications work again. Last two things we need to finish are: configure delete of existing products in product list and add Cancel button into edit_page1.
Configure delete product buttons
- Step 7.1. Go to seller_product_list page
- Step 7.2. Double click on ‘Delete’ button on the right side of first line
- Step 7.3. Click ‘Start/edit workflow’ in pop up window
- Step 7.4. Add a new action, selecting ‘Data (Things)’ > ‘Delete thing..’ menu item.
- Step 7.5. Select ‘Current cell’s software product’ in ‘To delete’ field of pop up window.
- Step 7.6. Test how deleting of products is working.
Create Cancel button on product edit page
- Step 8.1. Open edit_page1 for editing.
- Step 8.2. Click on Design tab.
- Step 8.3. Put new button element into page and name it Cancel.
- Step 8.4. Click twice the Cancel button. And then click on ‘Start/editworkflow’ in pop up window.
- Step 8.5. Create new Action selecting Navigation > Go to page…
- Step 8.6. In ‘Destination’ field of pop up window you need to select seller_product_list page.
When you try to test, then you can see that after clicking on the Cancel button it will redirect us to the product list page without storing modifications.
Conclusion
In this article we have learned how to create seller dashboard for our small online marketplace using Bubble platform. In particular you learned how to: add product list page where to display list of seller’s products. We restricted access to this page and allowed it to sellers and administrators. Besides, we added such features: create new products, edit products and delete products. When the seller clicks on the ‘Create’ button, it opens a new page, where the seller can fill all necessary fields and add this new product into our database. Also, when the seller clicks on the Edit button then our application opens a page for editing of products. We are going to continue our guide, where we show you how to build your own online marketplace using Bubble. 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
.