On our first blog post about building a Shopify clone with no-code provider Bubble, we talked about establishing your database, workflows, building a new store, and adding products to the store.
For this particular article, we’re completing the process by covering how to showcase dynamic content on a page, how to add an item to a cart, how to track an order through a dashboard, and how to update a purchase.
Let’s start!
How to preview content
When a store owner has successfully listed multiple products on their store, we should proceed to display these items on an interface the public can access—very much like Shopify stores.
When developing this, we’ll start by establishing the data type as “store.”
Then, begin by mapping out what you want to display on the store page.
On the actual store page itself, we’ll also have to display a catalog of items the store owner uploads. This can be done through the platform’s repeating group feature.
To make this possible in a repeating group, we’ll have to connect a data type to an element in your database. This streamlines what content to display.
Furthermore, this repeating group’s data type will have to be set as a “products” list.
For this element, we’ll then have to choose a data source so it knows which products to showcase. This data source then searches the entire database for products where the “current page store” equals the “original store.”
When you’ve configured the repeating group, the dynamic content can be added so you can successfully display it in every row.
Do this by arranging the first column with the content you want to showcase. Once done, this element automatically populates every other column based on the data you set.
To display a preview of all of your products on your repeating group, we’ll have to build a separate product page to display each of the details of a product when a user clicks on one item at a time.
To lead a user here, we’ll build a workflow that is triggered when a user clicks the “view product” button.
And similar to earlier steps, we’ll optimize a navigation event to lead a user to the page we deem fit. The only difference is, this time, the data we’ll be sending will be sourced from the current cells product.
How to add a product to a cart
What’s an e-commerce platform without the ability to add an item to a cart? Similar to earlier steps, we’ll begin by setting the page type. This time, it has to be configured as a “product.” Once this content is displayed on the page, we’ll proceed to build a new workflow that’s triggered when a user clicks the “add to cart” button.
Here, we’ll also make changes to a thing. What we’ll change here, of course, is the current user, and making sure the user’s “items in cart” list is added to the “current pages product.”
When a user is finished adding their products to a cart, we’ll work on another workflow that allows them to check out their items. As you can already guess, the next page should be the “checkout page.”
Tip: we’ll need to establish the checkout page as a store as we’re sending the data of a particular store.
When that’s done, you can proceed to supplement a repeating group that showcases the complete list of a user’s products on their cart.
Under this, you’ll want to show the sum of the items available in a user’s cart. Based on your existing data fields, Bubble can automatically calculate this and show you the total cost.
Processing payments
You can configure a payment form that allows a user to jot down their personal and payment details. With Bubble, this is made easier through the Stripe plugin.
You can read more about this here.
Building a control panel to track purchases
When a user places an order and successfully keys in their payment details, you’ll need to build a dashboard that lets store owners track the purchases of their store.
On the control panel page, begin by building a repeating group element. Configure as “orders” the element data type. Then, the data source will look for every order purchased that’s equivalent to the owned store of the current user.
Furthermore, there has to be an additional repeating group constraint that displays orders only where the label for “sent status” is “no.”
As a default, the new orders will keep this status until and unless they’re edited.
To view an order’s full details, we’ll have to build a workflow that is triggered when they click the “view order” button.
Updating a purchase
On the order page, we’ll have to establish as “order” the page type.
When done, include another repeating group that showcases each available in the current pages order.
Lastly, we’ll work on a workflow that store owners can trigger when they click the “mark as complete” button.
And just like that your e-commerce platform is complete!
Is this a web app you see yourself building?
If you have e-commerce efforts you’d like to pursue, give us a call and we’ll help you out!
(Source and screenshots from https://bubble.io/blog/build-imdb-no-code/)
