How can I Set a workflow of Quantity Arrow?

Hi, Bubbler!
I’m building a movie order website.
As you see the image below. There is a pop up page of a selected movie.
Then I hope an user can change the quantity of the order in the pop up page.


I placed an input(its initial value is 1 because quantity should be starting from 1.)
Then I hope the upside arrow can change the value inside the input.
Then I tried to find the quantity input on workflow. I cannot find like below.

What should I do to change the value inside the input?
Aslo, the cart is on the right side of the main page.
I hope the quantity in cart is coupled(or interacted) with the quantity in pop up page.
So users change the quantity in cart then the quantity in pop up page also changes.
In order to do so, I was thinking that when an user click the movie name button in the repeating group before pop up appears, by setting the workflow, it creates a line item then since line item is created line item’s quantity can appears on pop up page. Then user adjust the quantity and quantity can be shown both on cart and popup page interactively. What you guys think?
Thank you for reading.

Hey @universe1

1. Popup Add to Cart
You should have a field Quantity (of type Number) in your Movie data type.
In Data > Data Types > All Movies, set the Quantity to 1 by default.

In your input Quantity, instead of selecting 1 as Initial Content, set it to Parent group’s Movie’s Quantity.
In your workflow, when icon-up is clicked, Make changes to Parent group’s Movie → Quantity = Parent group’s Quantity + 1
In the same way, when icon-down is clicked, Make changes to Parent group’s Movie → Quantity = Parent group’s Quantity - 1

As the input field is dynamic, the value will change automatically.
I would also advise to set a condition on the icon-down element, so that when Parent group’s Movie’s Quantity=1 → this element is not clickable (User should not be able to pick 0)

2. Cart Group

I hope the quantity in cart is coupled(or interacted) with the quantity in pop up page.

It will be if it’s dynamic. If the screenshot from your previous post is still up to date, then I understand it’s a Repeating Group showing the cart’s items, which are a list of Movies.

You should:

  • have a Cart data type, with one field being Movies (which is a list of Movies)
  • make sure User has a Cart field (of type Cart)

When User clicks ‘Add to Cart’ on your Add to Cart Popup, run a workflow ‘Make changes to Current User’s Cart’ → Movies add Parent group’s Movie

In your Cart group, make sure the Quantity dropdown is dynamic and set to Current cell’s Movie’s Quantity

That should do it

2 Likes

Ambroisedlg, Thank you for your article.
I have successfully done with the ‘1. Popup Add to Cart’.
But ‘2. Cart Group’ is confusing a lot.

I have been trying to figure out hours and hours.
Before I had 3 Data Types: Movie, Line Item, and Total Basket.
I added ‘Movie Quantity’ and ‘Movie Title’ with you advice.
They seem like below.




As I mentioned, up to 1. Popup Add to Cart’ was successful.
After that, I have questions.

Ambroisedlg: It will be if it’s dynamic. If the screenshot from your previous post is still up to date, then I understand it’s a Repeating Group showing the cart’s items, which are a list of Movies.

You should:

  • have a Cart data type, with one field being Movies (which is a list of Movies)
  • make sure User has a Cart field (of type Cart)

Your mention about Data: Cart was confusing me. You wanted me to add a Data ‘Cart’? or you were referring ‘Data Total Basket’ as a Cart? Did you want me to add another data called Cart even though I already had Data: Total Basket? Did you want me to also add Cart as a new field inside Data: User?

My existing repeating groups is connected with Data: Line Item. Because Data in PopUp was stored in Line item. That’s why you wanted me to create new field ‘Movie Title’ in Line Item.

Repeating group as a cart setting was like below.


and Movie Title setting inside the cart and Quantity setting like below.
I see RED error for the cart. What should I do to fix it?

Workflow images are below.








How can I set the workflow?
Instead of using dropdown in the cart, Can I use input as I used in pop up page but still dynamically quantity value is coupled with the quantity in popup page? Even though I’m using dropdown in the cart. Can an user adjust the quantity in dropdown by clicking arrow buttons?

I hope users (especially elders ) can adjust quantity in pop up page to adjust quantity in cart, too. Even though there are arrow buttons inside the cart page.
Thank you for reading.

Hey @universe1

My mistake, I told you the dropdown should be dynamic, but that would only have been possible if Quantity was a list. That’s why you have the red error showing up.

As Quantity is a single number, you have two choices to display Quantity in the Basket RG:

  • put an input with default value=Current cell’s Quantity
  • display a dropdown with static values (from 1 to 10 for example). You should then set Default value to Current cell’s Line item’s Quantity

I reproduced your page, see the demo here: https://cart-test.bubbleapps.io/version-test/index/1590433693210x993003609075772200
And the editor: https://bubble.io/page?name=index&id=cart-test&tab=tabs-1

  • It turns out you do need that many fields in your data types.
  • You don’t need the Quantity input to be dynamic
  • See the data types and fields associated to each one
  • I set the page’s type of content to Basket

Hope that helps

1 Like

Thank you! Ambroisedlg! But error pops up stating that “User does not have permission to view this document”. How can I open the editor page?

Should work now @universe1

1 Like

OMG! YOU ARE THE BEST!! :rofl: Thank you so much!! :star_struck:

1 Like

You’re welcome :slight_smile:

1 Like

OMG!

I found a problem.


I tried to select ‘Current Page Basket’ like in your editor.
But I cannot find one there like the image.
What should I do?? :sob:

@universe1 make sure you have your page’s type of content set to « Basket »

1 Like

How can I do it? I cannot even find how to do it on forum. :cold_sweat: OMG.

@universe1 you can double click outside your page delimiter to open the page configuration (just as you would with any other types of elements).
Then in the type of content dropdown, just pick « Basket »

1 Like

@ambroisedlg OMG. :joy: Thank you so much!! :sob: I hate to see things in RED from now on. (for SEO: How to set page’s type of content* for other newbies like me) Thank you the Best teacher! :cowboy_hat_face:

1 Like

@ambroisedlg I found an error. Your Demo works perfectly. But your editor version doesn’t work.

It is like this. Even I clicked the ‘Add to Cart’. It doesn’t appear on the cart. And the 2 existing items in the cart never go away.

@universe1 it’s not an error. The page is of type Basket, and therefore needs a basket unique id in the URL to find that Basket data.

Look at the difference between both URLs, you’ll see the demo has a unique id (one that I created in App Data), the other one has sample:custom_cart (which is just meant for preview purposes).

That also means that whenever you have a Go to page action from another page to this page, you will need to send data Current User’s Basket in order to work

I’m a new to Bubble but also to coding world. I can tell probably I have zero knowledge about any coding language. But I strongly felt that I needed to learn coding because I wanted to make a simple thing before. (Yes, it could be simple who doesn’t know about coding like me. But need a lot of work in real. My thinking couldn’t deeply reach to that part at that time) So, I hired a programmer before to make a thing then I was fooled by the programmer because I didn’t have any knowledge. There is a saying If you wanna make it successful. Do it on your own.
I regret that I wasted my previous time on not learning any coding. Now maybe I’m not that young to catch knowledge quickly. But I want to do it myself. I’m taking a Python course for beginner now. I barely know about Bubble stuff. Therefore, I was learning from Zeroqode.

To be honest, I cannot understand what you were saying on your above mention. But there is a reason why I’m learning Bubble. So I’m just doing my best.

Your saying “The page is of type Basket, and therefore needs a basket unique id in the URL to find that Basket data.”
I think you are referring to this.
Yours creates unique id in basket items field in ‘Data: Basket’

Otherwise, Mine doesn’t.

So, If unique IDs are created in the field. The problem will be solved??
If so, how can I let it create unique ID?
How can I do this?

Thank you for reading.

Hey @universe1

No problem at all. I think you should follow the Bubble lessons, and watch all these videos if you want to learn on your own.

To solve your problem above, just click on New Entry in Data > App Data > All Baskets
You’ll be able to create a new Basket. Take that Basket’s uniqueid and put it in the URL. It should now work.

Remember that this process is for testing only. In live mode, you should create a Basket for your User in a workflow, and send Current User’s Basket data when you navigate to this page. Don’t worry you’ll get it when you move forward

Hope that helps and happy learning

1 Like

Now it works!. Thank you~
I copied and pasted the unique ID into the URL. Then it works. But as you said this is only for testing. After I see it works out. I can say I understand what you said: “Look at the difference between both URLs, you’ll see the demo has a unique id (one that I created in App Data), the other one has sample:custom_cart (which is just meant for preview purposes).”

I worry how I can set the workflow for the live mode later. But I will go forward after I add some more. It could be something like before I don’t know now but later I can understand its mechanism.

Thank you again.

1 Like

Don’t worry @universe1 you’ll get it, it’s pretty straightforward.

Quick example with a Go to Page action from another page to the Basket page:
redirect1

1 Like

Your mention:
“In live mode, you should create a Basket for your User in a workflow, and send Current User’s Basket data when you navigate to this page.”

In order to test out so far, I had to copy and paste the unique id in the url.
I’d like to test this on a webview app now. This is one page application.
So I don’t need to navigate to this page since this app will be an one page application.

How can I make it work even I don’t need to copy and paste the unique id in to the url? How can I make it automate?