Shopping Cart with Customizable Products

[anhthi]

Hello fellow Bubblers,

I am new to this and I have a problem with retrieving data from the user. In my app, the user goes through a three step process to personalize his/her product. In each step, the user can choose from different options and I want to have a “summary” page at the end so the user can see what he/she chose in each step.

Think of it this way (with an example of ordering a burrito=:

Step one: White or brown rice?
Step two: Chicken or beef?
Step three: Mild or hot Salsa?

In each step the user clicks to create a individualized product and I want to show at the end that the user has, for example, chosen white rice, beef, and mild Salsa.

I tried with “create new thing” with each click but had problems retrieving the data. Can someone please help me out with an explanation?

Thanks so much in advance!!!

[fayewatson]

Hi @anhthi There are a few ways to do this but if you just had three questions like that, you can store the three answers within the User Data Type. So, in the User Data Type, you could set up three fields: Step One Answer (Type: Text, List: No), Step Two Answer (Type: Text, List: No) and Step Three Answer (Type: Text, List: No). Then after a user has selected their choice in each step (perhaps using a dropdown for each?), you could have a ‘Submit’ button at the end. In the workflow of the submit button you would click Data --> Make Changes to a Thing --> “Thing to Change: Current User”, then you would change the three fields below (Step One Answer, Step Two Answer, Step Three Answer), and the values would correspond to what answers they chose. That could look something like:

Step One Answer = Dropdown 1’s value
Step Two Answer = Dropdown 2’s value
Step Three Answer = Dropdown 3’s value

If you wanted to show a summary after a User has submitted their answers, you could create a text element which uses dynamic data and displays: “Current User’s Step One Answer, Current User’s Step Two Answer, Current User’s Step Three Answer”.

You could also create a new Data Type called Questionnaire, instead, with the Three Answer fields within that data type. Then you would only create one new field within the User Data Type called User’s Questionnaire (Type: Questionnaire, List: No). The only difference would be in the Workflow, where after ‘Submit’ is clicked, you would select Data --> Create a New Thing --> “Type: Questionnaire”. Then another step right after that which would be Data --> Make Changes to a Thing --> Thing to Change: Current User, and the field to change would be User’s Questionnaire, add result of step 1 (create a new Questionnaire). A little more complicated, but it could provide you with more flexibility in the end when you are querying your data.

[anhthi]

Hi @fayewatson,

Thank you so much for your help, I just tried it and it worked perfectly!!

Have a wonderful week.

[fayewatson]

Awesome!! You too!

[anhthi]

Hi there again,

thanks for the advice, I tried it and it worked! But now I am faced with the next challenge that I cannot solve on my own. What I am basically trying to build is a shopping cart function for the website with the individualized products (chosen in three steps). Since Prices will vary, I tried changing the current Users Price in each step how you explained it to me in the previous reply and it worked out well!

I can also show a summary of the answers with your help, but in the next step, I want to add this product to a shopping cart (save it) and give the user the option to start the three-step process all over again without dismissing the the answers from before (which would ideally be in the shopping cart). Since it will be a personalized product with many combinations, I do not think that Shoprocket would be very efficient for me.

Can you please help me out again?

If I can make this problem clearer to you, please let me know.

Thanks in advance, you’re great!!

[fayewatson]

Hey @anhthi No problem at all! Can you share a link to the editor? Then everyone can take a look and offer some guidance on the best way to go about this. Also, Airdev has a shopping cart widget is super helpful as well when structuring something like this: https://widgets.airdev.co/widget/1467741628057x997611750428770300

[anhthi]

Bubble Editor - timeless-pens

I hope this link works. Many of the things are in German, please let me know if something is not clear. Also there are a lot of placeholders for pictures and text, so please don’t mind those these will be replaced later

Thanks

[fayewatson]

Those pens look really cool! I think it may be easiest to change the configuration setup a little bit. It may provide a better UX if every configuration step was on one page, with each step in its own ‘group’, shown and hidden using next and back buttons and custom states. I made a test setup on how I was thinking you can group everything (the title text within the same group as the images/text)

Bubble Editor - timeless-pens

That way, you could allow the user to easily go forward and backwards changing their pen style multiple times without having to wait for the page to load each time. It could also display the User’s current selected features and update price in real time. My suggestion would be to create those groups first and then don’t worry about the workflows yet.

In regards to the data structure, doing groups/using custom states will make life easier because Instead of storing the information about the pen within the Current User, custom states temporarily stores the features of a pen that the user would like depending upon what is selected, and then once the User is ready to add that pen to their cart, then we can store that information in the database as a product in their cart. I hope that wasn’t too confusing. In summary, if you can make those groups all on one page first (all set to not visible on page load, then I can help out with the custom states part, making the next and back buttons, and then the shopping cart functionality)

[anhthi]

Awesome! Thank you for your quick reply. So I put the Steps in groups and placed them all on the test page and unchecked the box for visible on page load.

What exactly are custom states and how do I use them correctly? Also, would I modify the workflow for the next and back buttons so the groups would be visible?

Thank you so much again, you are a great help!!!

[fayewatson]

Sounds great! Ok so I updated the data structure a little bit so that we can begin to use custom states. Before that, I just realized, go through each step group and instead of statically displaying the image, title, and description (text), it would be much easier to use repeating groups. That way if you ever have to remove or add something to any of those groups, you won’t need to continuously rearrange everything. It will update automatically.

So for Step 1 Group for example, you would create a repeating group with 1 row, 2 columns. That repeating group’s data type is going to be: Pen Type (since we only have Fountain or Ballpoint). The data source will be “Do A Search for Pen Types”. Then you’ll have an image element, and using dynamic data it will be “Current Cell’s Image”, beneath that in the cell will be a text element “Current Cell’s Type Title” and beneath that another text element “Current Cell’s Description”. You can upload the images and write the descriptions manually through the App Data section of your app by editing the entries I created.

One thing to keep in mind for the Step 3 groups (selecting the Pen Style), the data type would be: Pen Style for both repeating groups, but for the Step 3 Ballpoint Group Style you’d have a constraint in the search which would be “Pen Type = Kugelschreiber” and for Step 3 Fountain Group Style you’d have a constraint in the search which would be “Pen Type = Füller”. That way the available Pen Styles for those Pen Types are displayed only.

After setting this up, custom states will be super easy/useful. At the moment, you can keep everything stacked on top of each other since no groups will be shown at the same time.

[anhthi]

Thank you for the suggestion with the repeating groups!! This is very helpful and better for future use (don’t worry about fonts and alignment right now, I will do that later).

So how do we go about the custom states right now and what is it exactly? I’m still not sure how to set this up, but thank you so much for helping me and being very detailed!!!

[fayewatson]

Ok so I just set up five custom states and everything seems to be working. I would go through the app in preview mode (clicking on images to ‘select’ features of the pen) then come back to this.

Custom states are a little tricky to explain but the more you look at them in the workflow, the more they will make sense I didn’t understand them for the longest time. So, to make things simple, I assigned all of the custom states to the page “Which I just renamed: ‘customize_page’”. Every element can have an unlimited number of custom states, but you have to define which element, and the page is considered an element. So before doing anything, here is how you create a custom state. For example purposes let’s say nothing is visible on page load, but we want the Step 1 group to be visible when our custom state is “Step 1”. So in the workflow we’ll say "When page is loaded → Element Actions → Set State and be presented with this window:

Our element is the page itself (“customize_page”).
The custom state we’re creating is called “Current View” (Type: Text, List: No):

And then we manually enter the value (Step 1)

“Current View” is used to tell the page which ‘Step’ the user is on. Through the workflows, you will find a total of four values for that custom state “Step 1, Step 2, Step 3 (Ballpoint), and Step 3 (Fountain)”. So the state remains the same, but the values change depending upon what is clicked and what is currently shown on the page:

But custom states don’t do anything until there is conditional formatting set up on those groups themselves. This is where we connect custom states to the groups on the page. So now you would navigate back to the UI editor, and in the conditional formatting of each group you would tell Bubble:

And that’s how the ‘Current View’ works. Please let me know if any of that sounded confusing. Aside from Current View, the other Custom States created are:
Pen Style
Pen Type
Pen Wood
Total Price

These are different from Current View because they are not ‘texts’; their data types are custom. Meaning Pen Type’s Data Type is Pen Type (same as the Step 1 Repeating Group Data Type), Pen Wood’s Data Type is Pen Wood (same as the Step 2 Repeating Group Data Type) Pen Style’s Data Type is Pen Style (same as the Data Type for both Step 3 Groups). So for example, in Step 1 when the User clicks the image of the Ballpoint Pen, that sets the state of customize_page’s Pen Type to equal the selection the User just clicked on (Ballpoint pen). This process repeats for the Pen Wood and Pen Style.

We also calculate cost as we go here, so customize_page’s Total Price is equal to the sum of the cost of each selection the User has made thus far:

It begins at 0 (when nothing is selected)

and updates every time anything is clicked:

I know all of this can be pretty confusing at first glance, but if you go slowly through each workflow they really will start to make sense. It seems like a lot of workflows but that’s just because we have to be specific in telling Bubble exactly what to do when there are variations. Please let me know if any of this sounded confusing.

*I also just added another part to the workflows which occur when the ‘back button’ is clicked. If a User originally had a ballpoint pen and selected a Ballpoint Style, then they go back to change their minds to a fountain pen, then once back is clicked on 'Step 2 or ‘Step 3’ then it will clear the Pen Style originally selected on the first run through. So, a Ballpoint style isn’t kept when the User changes to a Fountain pen, or vice versa.

[anhthi]

WOW! Thank you so much, that was very helpful and I understood the concept of the custom states after examining the workflows for a while (I hope at least ) That is amazing how you did that, now I just have to add some nice pictures and it will be good .

How would I advance in the next step (adding it to the cart)? Would I create a new thing when clicking the add to cart button and having this thing return the value of the total costs? And how would I let the user start the choosing process from the beginning?

Thank you so much Faye

[fayewatson]

My pleasure! I set up a new popup called ‘Popup 2’ which displays the User’s Cart (List of Products), and offers the option to Create A New Pen or Checkout. I wasn’t sure if you wanted to display that in the popup, so I didn’t want to change the popup you already had. In Popup 2, when ‘Create A New Pen’ is clicked, all that happens is the page is refreshed. This starts everything from the beginning again since we used custom states

So next you’ll want to create a new page for checkout, that will have all of the inputs a User needs to complete in order to create a new thing: an ‘Order’. I started the set up of the Data Type ‘Order’, which will store the User who created the order (Field: User), all of the Products the User created (Field: Cart), and the Date the order was placed (Field: Data Placed). For your ‘Place Order’ button, you would go to Data --> Create A New Thing --> Order, and the fields will look something like this:

Cart = Current User’s Cart
User = Current User
Data Placed = Current Data and Time
Status = Not Shipped (for example, if you wanted to have something like this to keep track of everything)

You’ll have to integrate Stripe or Braintree to get this to work of course but I’m not entirely familiar with using those yet. However there are a lot of topics within the forum about how to set that up and videos created by Bubble at vimeo.com/bubblegroup

[anhthi]

Thank you so much for all of your help Most of it is working so far and if you don’t mind, I would consult you again if I run into problems or need a little help

That being said, you’re a great person for helping others here and taking the time to explaing everything!

[fayewatson]

My pleasure @anhthi!! Thank you for letting me work on this with you; it helps me learn too! And yes, feel free to ask! If you have specific questions about things not working as expected, it’s best to start new topics so that it’s easier for others to search in the forum who may run into similar situations (questions regarding payment, or responsiveness for example, since there are so many different ‘categories’ within getting an app to fully function) but absolutely! Setting up new questions also is great so that other people have the opportunity to answer and perhaps provide an alternative, or more efficient solutions

[juan.roberto.garzon]

Hi guys!

Is awesome to see you collaborate about an important feature for bubble, as this is. Its surprises me there are any more participants.

Anyway… As @anhthi, I am also working on a shopping cart system that offers several variable options for each products. Its for a pizza place, so I need to allow users to choose the size of the pizza, and then to add many additional ingredients if they want. These changes would affect the price of the product of course.The app is in spanish so please let me know if you need clearer information.

So I already created the basic shoping cart following the Airdev widget that @fayewatson suggested. Now I’m having problems adding the additional info and adjusting the price, I just not sure how to set up the data bases, and workflows to come up with the information and the price of each product. The variables (options) I need to add to each pizza are:

• Size (Tamaño)
• Aditional Ingredients (Adicionales)
• Pick up or Delivery (Llevar/ Domicilios)

This conversation had gave me a north on how to do it, so thanks a lot guys! ANd I am already follo ing your instruction @fayewatson However I’m still having some issues, so if you guys could take a look at my app and give me some feedback on how it can work better and what’s need to be done, I would appreciate it sooo much.

Bubble Editor - pizzandlove

I made the app open, and editable if you see any change needed, I trust you guys, just let me know through the conversation. I am gonna keep working in the meantime on the app my self to understand better the concepts related in here, all of this information is gold!! THANK YOU VERY MUCH!!

Oh, and Merry Xmass by the way!! Have a wonderful day, and night!

[fayewatson]

Hi @juan.roberto.garzon! Merry Xmas to you too! I think Gaby’s posts here describe the best way to approach it:

How to add numbers in Repeating Group?

Hi @riccardo.baravelli, Honestly, I think the best way to do this is by saving these values in the database. I like to create two data types for this: Shopping Cart and Line Item. Shopping Cart List of Line Items (Line Item, list) Customer Name (text) Customer Email (text) etc… Line Item Coupon (Coupon) Quantity (number) Total (number) When a quantity is selected from the dropdown, create or update the line item for this coupon for this customer’s shopping cart: Total = Current Cell’s Co…

Creating Purchase Order

Hey @jason1, Try this: Create a data type called “Line Item” with the following fields: Catalog Item (type Catalog Item) Quantity (type number) Then your Purchase Order type will have a field for “Line Items” that is a list of the above Line Item type. So, to create a Purchase Order with multiple Line Items of various Catalog Items with different quantities, you could have your repeating group of Catalog Items with an input field and an “add” button in the cell. Type in a number for qty fo…

For example, you could have three ‘Types’: Pizza, Topping and Cart.

Pizza
Toppings (type: Toppings, list: yes)
Size: (Small, Medium for example) (type: text, list: no)
Total (type: number, list: no)

Topping
Name (type: text, list: no)
Price (for that topping) (type: number, list: no)

Cart
List of Pizzas (type: Pizza, list: yes)
Total Price (type: number, list: yes)

Each ‘Pizza’ can have its own list of Toppings. The User’s cart can contain a list of Pizzas (since a User can order multiple Pizzas). As Toppings are added or removed from their parent Pizza, their parent Pizza’s ‘Total’ field should update to reflect what the total price for that Pizza is.

The Cart’s Total for all Pizzas in its Pizza field be “This Cart’s Pizza’s Total: sum”. That expression would give you the :sum of all Pizzas’ Total fields, within the User’s Cart.

I think that would be one way to do it

[juan.roberto.garzon]

HI @fayewatson Thank you for your quick response!

Well, I tried to organize the databases as you suggested. But ?im still having trouble trying to derermine the Price for the pizza, like you said:

“Each ‘Pizza’ can have its own list of Toppings. The User’s cart can contain a list of Pizzas (since a User can order multiple Pizzas). As Toppings are added or removed from their parent Pizza, their parent Pizza’s ‘Total’ field should update to reflect what the total price for that Pizza is.”

Sorry, but I don’t know how to do it. I just can’t find a way to add the total price of the toppings, to the price of the pizza, depending on the pizza size. To then send this Total price of the product, to the Order, and add it up to the Order Total Price.

Here is where I’m stucked!

[fayewatson]

No worries! Here is a demo of one way to set up the data structure and update the pricing:

Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - faye-demo-app

The data structure is mostly the same, but I added one type called “Pizza Item” as well.

Pizza (A data type to store the types of pizza available. In this example, there are 2 in the database. “The Medium Pizza” and “The Large Pizza”.)

Topping (A data type to store the available Toppings. In this example, there are 6 in the database, each priced at 50 cents, though the app data view shows 1).

Pizza Item (A data type to store each Pizza that the User has added to their cart. The Pizza Item keeps track of the type of Pizza a User wants: The Medium Pizza or the Large Pizza, the Toppings, and Quantity. Total Price for the Pizza Item is equal to the Price of the Pizza + The Price of the Toppings combined * the Quantity need by the User.

For example, if a User is ordering a Medium Pizza with three Toppings, their ‘Pizza Item’, in preview mode would look like this:

And in App Data, it looks like this (storing the value of the entire Pizza + Toppings for $11.50):

Order (This data type stores all of the Pizza Items that a User has for their Order)

For example, if a User is ordering two Pizzas (one Medium and one Large), preview mode would look like this:

And app data for that Order would display the list of Pizza Items ordered, and the Total Price, which is updated each time any change is made to the Order: