📒 What is the best way to publish a list of objects to bubble?

vini_brito · 2019-12-24T01:55:20.239Z

Hi! Been there, thought that. This point is a bit of a pain for me too, because for example whenever you publish a list of texts (product name) or numbers (a quantity) to Bubble it cannot contain duplicates. This makes any easy JS handling useless. Unless…

I’ve been thinking of using offline in-browser database management systems like http://hood.ie/ or just https://pouchdb.com/ for more complex stuff (probably not needed in this case!), however there’s the limitation when dealing with Bubble’s native lists.

I haven’t really tinkered with it yet (it’s on my “someday” list), however I think that if we can get to pass an encoded string containing the values (objects) as a Bubble native single text (not a list, just a string) and at the workflow level have a decoding action that is able to get that single string/text and output objects one by one on a self scheduling (looping) scheduled workflow action… we could have an efficient way to handle it even server side (within Bubble’s app).

The same solution would be able to, when working with elements and displaying stuff for the users on the front side, publish a single string to several Bubble elements and having each of these elements decoding it depending on their cell index. Or something else like that. That solution would be infinitely scalable.

I know that this feels a bit different from just publishing a list to Bubble, but I’m saying this because we just can’t publish a list of quantities, Bubble would eat (remove) any values that are not unique and we would end up with an incomplete list.

However, if you’re not having too many items, you could just have a plugin element with, say, 60 states and publish to all of them individually, being 20 states “item ID X”, another 20 “item name X” and the remaining 20 “item quantity X”, with X being the index position of the item, and get the data sources of the elements in the repeating group to listen to the states with an index equaling to their cell index. But let’s not get started on the hassle that maintaining this would be.

These are possible ways for us to do client side experiences like a shopping cart that works instantly (and for free in terms of app capacity) by not needing to touch the database for non unique values.

Phew.

JohnMark · 2019-12-24T15:52:47.590Z

vini_brito:

Bubble it cannot contain duplicates

Hi @vini_brito

To make it unique, can you simply add some extra id at the end of a field, like ‘my_table_unix4234239933’ to make it unique? simply replace numbers by unique Unix date? When retreiving, remove the extra with some regex filter?

zelus_pudding · 2019-12-27T16:03:10.289Z

vini_brito:

I know that this feels a bit different from just publishing a list to Bubble, but I’m saying this because we just can’t publish a list of quantities, Bubble would eat (remove) any values that are not unique and we would end up with an incomplete list.

Vini! So great to hear from you (sorry for the delay - I’ve been on holiday)! I’m curious what options (if any) you know of that could publish objects to bubble when the list of objects does not contain duplicates. I ask because as far as I can tell, a shopping cart summary would not contain duplicates since it would have one object per unique bubble item. Oh, wait a second - what you’re saying is that the duplicates could appear in the quantity or totalPrice “sub lists”… shoot… you’re right. So then I wouldn’t be able to export those to Bubble. That’s frustrating.

That’s a real bummer because Bubble can parse JSON coming from remote servers quite well. If only it could parse JSON from a client - that would be brilliant. After all, JSON does stand for Javascript Object Notation. Perhaps @cal could offer some guidance here?

gf_wolfer · 2019-12-27T21:19:40.198Z

This has been a VERY top of mind item for me for a few years. I have a system that creates a Data Object for every ‘item’ added to a ‘cart’. I have optimized it as much as possible, but it is beginning to slow things down, and I feel any Cart experience should be as quick as possible to reduce abandonment.

So I have off and on been playing around with solutions, but never actually completed any single method. I have tried @JohnMark’s method, and a similar one using the Toolbox Plugin; turning the cart list as a single text field in JSON format, and then using the Javascript to Bubble (also in toolbox) to parse it back. Both of these seemed promising and quick, but my specific use case made these hard to implement, as I needed a Data Item to be created for each Cart Item for discounting purposes

So I have been looking into the BDK plugin from @gaurav, specifically this one: https://bubble.io/page?type=page&name=bdk_utilities_easy_list&id=bdkdemos&tab=tabs-1

It seems that you would be able to simply add and remove Duplicate items in a Cart. Which for my use case should work well. Testing this out soon so I will report back afterwards

zelus_pudding · 2020-01-03T00:08:07.198Z

Hmm, I took a look through the BDK plugin and am not sure “easy_lists” are the way to go. I could be wrong but I don’t see how to manipulate them to display price subtotals, aggregate quantities, total price, etc. @gaurav, any pointers?

All that said, I made a plugin that can update a cart stored as a cookie. It can add and remove items as well as calculate quantities, item subtotals and order totals - all in real time! (note: the item quantities shown on the app are only state driven… not reading from the cookie )

35oIJFhqdd

The only thing I can’t figure out is how to get it to send these cart objects back into Bubble and saved as things. That would be a dream! Can @cal, or @sam8 or @peterj explain how this could be done (or whether it’s impossible as Vini has said)? I would Platonic love you forever

EDIT:
And I’ll add, if this can’t be done, can you please advise as to the best way to create a shopping cart since creating them in Bubble is actually quite unintuitive. Many users share my pain. For example:

HELP needed please - Creating shopping cart
The answer in that thread was to use AirDev’s shopping cart plugin (@vlad ) . The problem with that is that it can be unusable as shown in the recording below:

First it opens up without showing any data As a prospective customer, that’s strike 1. Where’s my order? When I add or substract items, it takes a bit to respond, so perhaps I click the button again thinking I hadn’t clicked it the first time. Now I see it’s laggy. That’s strike 1.5 or 2. Say I’m rich and really need these Alpacas. I’ll take 10

Oops, as I clicked up to 10, the counter incremented to 10, then mysteriously went back down to 9, then went back up to 10. Or when I decrement down to 7, it goes back up to eight then back down to 7. Now I’m more than a little worried this site isn’t going to get my order right. That’s strike 3! I’m out of a sale from my most lucrative potential customer)!
Shopping Cart with Customizable Products
Creating Purchase Order
How to add numbers in Repeating Group? (For a shopping cart)
This one was asked May of 2019 Create a shopping cart using custom states
Help! Shopping cart based on AirDevs example
How to add a shopping cart in Bubble
This poor person never got an answer Data structure example for shopping cart
How To Create A Temporary Shopping Cart?
Can I create a shopping cart with Bubble and integrate it into Webflow?
Adding shopping cart - NEED HELP please
Asked May 2019 Dropdown Menu QTY Selector to Update Database
@Vini originally asked this shopping cart question in 2016 and in a comment above recently said

This point is a bit of a pain for me too
Creating a shopping cart
Asked Jan 2019 Stumped - Trying To Change List Of Item’s Fields Based On Selected List (still doesn’t have an answer)

Seems like this should be simple because it’s what any shopping cart would have to do to reflect the new available quantity in stock of products after a purchase. I just can’t seem to get around this logic.
Not precisely about creating a shopping cart but further demonstrates this is a core Bubble use case Making a online ordering system
Add to cart and pricing
What would be the best way to display a list of things for a shopping cart app
Has anyone built an online store?
Setup check out cart function
This post doesn’t specifically try to make a cart but it’s effectively what they’re doing… to which they get the reply:

This is surprisingly tricky to do, for a number of frustrating Bubble reasons that I won’t get into. That being said, the following seems to work, sort of, but I would be interested to see if anyone has a better approach…

I can go on and on… here’s the pile of over 143 shopping cart related questions on our forum… The point is People use Bubble to sell stuff. There are 12 Stripe Plugins which collectively have been used over 24,300 times. And look at this list of top plugins by usage:

Ionic Elements - 47,655
API Connector - 42,286
Google Material Icons - 32,277
Toolbox - 31,794
Slidable Menu - 21,687
Random User Generator - 21,356
Multiselect Dropdown - 17,207
Stripe - 15,442
Draggable Elements - 14,454

Most of those plugins have to do with just making an app look pretty - visual sugar. Filter those out and the official Bubble Stripe plugin is effectively the number one used plugin on Bubble. Ergo “Selling stuff” isn’t just a use case of Bubble, it is the use case.

So for the love of Zues make making shopping carts easy!

keith · 2020-01-03T05:42:01.303Z

You can’t export objects as “Things”, but you can export them as parallel arrays of primary Bubble datatypes. It is then up to the user to Create New Things from those outputs.

Plugins can neither directly read, modify, nor create Things in the database.

BTW, I, too am vexed by the constant cries for a way to create functional shopping carts in the page (of course, if you’re willing to do things “the Bubble way”, this is a non-issue [create an Order object consisting of Line Items which consist of a Quantity and Product], but some folks can’t abide the “blue bar of death”).

The next version of List Shifter addresses this by allowing arrays (lists) to be used as arguments in the Process List action.

(The issue with shopping carts being that even if you create an Order object consisting of Line Items, you still have a hard time doing sub-totaling and cart totaling unless you’re willing to write those values to the database which is, of course, unnecessary. But all of this is quite easy in any “normal” language. The missing link in Bubble is the lack of user-available .map() type function [or, indeed, any type of looping]… which is totally weird and stupid, of course, as Bubble does .map() all over the place [e.g., as when you reference Some_List_of_Things’s Field… and get a list of those Fields… Bubble is literally doing something akin to Some_List _of_Things.map(thing => thing.Field), right?] But the user has no way to do something more advanced like, for example, Some_List_of_Things.map(thing => thing.Field * 2) OR, more importantly, Some_List_of_Things.map((thing, i) => thing * Some_OTHER_List[i]).)

The next version of List Shifter gives that, which is very, very cool.

gaurav · 2020-01-03T08:12:15.476Z

@zelus_pudding
I think you might be complicating it much beyond requirement
The very easy way to implement shopping carts is using the repeating group tools plugin + from bdk utilities in my view. I know many people use the plugin for this very purpose.
You should be able to do it without any creation / storing of line items etc. The RG tools can basically create your line items on the fly.

For example, take a look at the demo 2 and the corresponding editor setup

You can get the line item data out via rg tools. And if one of the things you get out is the item number of that cell, you can use that to simply do whatever you want with the data. For example, run the List processor from BDK utilities on the entire list to convert the cart to order. Or use transformlist to convert to a json and store it in your database etc.

Cheers,
Gaurav

vlad · 2020-01-05T21:29:56.516Z

Hi @zelus_pudding ,

Thanks for pointing out some issues with the shopping cart widget! Here are the changes we’ve made:

Optimized how the order is updated (instead of doing a search for an order every time a quantity is changed, instead it now references ‘Current user’s Order’)
Disabled the buttons to change the quantity of the item ordered while the previous change is still processing (in case the user wants to click those buttons really fast but for whatever reason the database takes a while to update)

More generally, one of the beautiful things about Bubble is how low-level it is - this means that you can build whatever functionality you want, you have total control. So if you want a shopping cart that works differently than other shopping carts, you can do that. The downside is that it ends up being more complicated to set up than something where you just plug-in an out-of-the-box shopping cart.

As a sidenote, we do plan to introduce a shopping cart as part of our Canvas framework, at some point.

keith · 2020-01-07T00:21:06.737Z

@zelus_pudding: I made a thing for you…

zelus_pudding · 2020-01-07T05:14:56.725Z

This is very cool! You make an interesting point about how the native “Bubble way” is arguably better since it’s not exhausting capacity on server side data processing AND because it’s effectively the same speed. So I’m super curious what your exact setup for a “Bubble Way” cart is. I hunted for your editor url but from the looks of your video it doesn’t appear public…poked through your demo video starting from here up to here but my eye didn’t catch it in their either. Can you share what that setup is (Our point me to the link I may have glanced over)?

I’m really curious to see this native way, because since you pointed out that we can output lists with duplicates in them I actually implemented a client side cart that does exactly that. It’s neat because it stores the cart as a cookie and I can do any calculation or fancy volume pricing stuff… but it’s a bit of hack stitching it together with Bubble… requiring a workflow that runs every 0.2 seconds to input the current date into the plugin so as to fetch the current cookie values (because visual elements only update if a field’s value changes… but it can’t sense when a cookie’s value changes).

But in general, I’m always open to better ways of doing things.

Thanks for all of your input! And the cool plugin update!

keith · 2020-01-07T05:49:05.446Z

Hey, @zelus_pudding: Editor URLs here:

“List Shifter” (no database) way:

Bubble

Bubble Editor - List-shifter-demo

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

“Basic Bubble” way (well, also uses List Shifter, but just as a container for lists):

Bubble

Bubble Editor - List-shifter-demo

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Regards,
K

vini_brito · 2020-01-07T06:22:16.805Z

I’m always impressed by your curiosity and ingeniousness

Yup, you were right. I’m kicking myself for that simple code

The fun thing is, and also my main takeaway: you found out that Bubble doesn’t cleanses duplicates when a list touches the database, it does so when you use a few specific operators. So what you did is to pluginify those operators, sidestepping their Bubble native versions at all. Is that correct?

So if I use “set list” I’ll be always safe?

P.S: I’m still trying to figure out how did you created the duplicates with List Shifter in the first place? The step by step workflow mode breaks the page so I can’t see what happens in what order.

keith · 2020-01-07T06:27:03.742Z

I should note: The JavaScripty/no database way relies on some new features of List Shifter, which is basically its own no-code environment and can be a little confusing without familiarity. It’s more JavaScripty than Bubble. When you examine a PROCESS List action, think JS and you’ll understand what’s going on more (the operator dropdown shows literally the code that will be run).

The main point of the native Bubble way is that people mis-think carts. A cart IS NOT a list of products onto which we graft a quantity, etc. A cart is a means to building an ORDER.

As such, a CART contains either an Order (or, as I’ve done here) the LINE ITEMS that compose an Order.

A Line Item is not a Product. A Product is part of it, of course, but the taxonomy is basically:

Order

Line Items
- Quantity | Product | Price | Subtotal

Of course, a Product has a Price, but we should pull Price out when we create a Line Item because a Product’s Price may change over time. Subtotal is a derived value and is just Quantity * Current Price. One can choose to precompute it or to compute it at Line Item creation time (as long as we’ve pulled out Price at the moment the User places their Order… the point being that the Subtotal is fixed and will not change in future if Product’s Price changes).

vini_brito · 2020-01-07T06:36:36.416Z

Apart of what I said above (please please answer that ), when I first tried to build orders I tried that way you mentioned it should be. But then I got stuck at the duplicates part, not being able to create and manage lists with duplicates and then went with the less efficient way.

That’s why we all here are interested in that!

keith · 2020-01-07T06:58:22.963Z

Hey @vini_brito: Glad you found that interesting!

As for Bubble lists: YES, a Bubble list of any type is just its JavaScript equivalent. So, just as in JS, I can say:

a = [1,1,1,1,1]

And we can push that array to a plugin’s output. (Or, in Run JavaScript, I could just return [1,1,1,1,1] ). What you will see is that the returned “list” is an array(5) full of “1”.

It is only when we do a list operation on it that our array of ones transforms into an array(1) of a single “1”.

The reason this is not obvious (beyond not being documented) is that, in vanilla Bubble we cannot ever create [1,1,1,1,1]. We will always wind up with [1] because there are no constructors beyond “add list” and “plus item”… which de-dupe the array.

As for List Shifter and duplicate array elements: List Shifter’s PROCESS List function takes any of List Shifter’s internal arrays (which can be the “Original List”, “Shifted List”, “Processed List” or “Do Once” (which is just a single-element array that contains [0])) and loop over them, doing something for each iteration.

So, let us say that List Shifter’s “Original List” is an array of 5 Products (Product being a Bubble object). We can, in the PROCESS List action (if Process Action Type is set to number) do as follows:

STEP 1:

We can leave operand X empty
We can leave the Operator dropdown empty
We can enter the numeral 1 in Operand Y

(What this does is to say, “Simply return the number 1 in this step.”)

We can then set “Push to Processed List” to “yes”.

What this will do is – for each iteration – push the number 1 on to the Processed List. So we get (for each step):

Processed List.push(1)

So, at the end of iteration (over 5 items) we have the array:

[1, 1, 1, 1, 1]

And this gets published to List Shifter’s “Processed List” output.

We can also do things like randomly access the elements of Processed List and set them to new values. This is how the “in the page” version keeps track of the Quantities in that scenario.

keith · 2020-01-07T07:57:25.744Z

When we do things “the Bubble way” we face the opposite problem: We create a Line Item (which is, of course, unique… because we asked it to be). For example, the User may add “Canned Cat” to the cart. They may again hit the “Me Want… Add to Cart” button. IF they do this, this will (unless we do something about it) create a NEW Line Item for Canned Cat… Because each Line Item is unique.

However, we can check if there is already a Line Item whose Product’s contains “Canned Cat”. If so, we don’t create the new Line Item, we instead increment the existing Line Item’s quantity by 1. I’m pretty sure that my demo app does this…

zelus_pudding · 2020-01-07T10:13:03.634Z

Thanks for sending those! Am boarding a plane at the moment so will definitely check those when I get the chance. Really appreciate it!

zelus_pudding · 2020-01-26T17:45:59.527Z

This is sooo cool! I ended up creating my cart as a client side plugin which saved the cart state as a cookie. Then used your List Popper to push a completed order into bubble. I copy and pasted most of your server side actions and it just worked on the first go! Thank you so much for chiming in - just payed it forward with a karma $ donation. Thank you again so much (and being a great Bubble contributor in general)

keith · 2020-01-29T21:30:26.466Z

Hey @zelus_pudding: Much appreciate the Karma-Ware contribution and I’m glad List Popper was helpful!

rico.trevisan · 2020-12-14T11:55:47.890Z

At around 0:13:16 you make a point that it’s better to use the user’s compute power instead of Bubble’s. It was not clear to me which option you would deem “better”. I think you lean towards creating the line items in Bubble (instead of saving them in a List Shifter state). Is that correct?