Speed problem with advanced shopping list - list shifter a solution?

Hi,

I am running into one (or rather multiple) speed issues when trying to create a somewhat more advanced shopping list based on a number of recipes. I have no developing background and am new to bubble, but I have gotten everything to work based on the little knowledge I have. So I have most probably not taken the most elegant route :frowning:

Now the problem is that things are running enormously slow, and I am wondering if, e.g. @keith 's ListShifter or the Repeating Group plugin (bdk) of @gaurav, might be a solution to my issues.

The use-case is simple: Have a recipe with a list of ingredients, select that recipe and put all ingredients into a shopping-list, which you can then tick off as you buy them in the store over the course of a few days. Slight complication, if you select multiple recipes, I want to have a single shopping list which categorizes items by shelf (e.g. fruit, veggies, dairy, etc.) and aggregates same type of ingredients across recipes.

This is how I have set it up:

Step 1: Create shopping list items via ‘Schedule API workflow on a list’ based on the individual recipe ingredients - this takes quite some time (same for de-selecting and deleting all the shoppinglist items again). I add a list of the shopping_list items to the user, to allow for direct referencing in step 2.

Step 2: Display shoppinglist items in two nested RG’s including some filtering. First RG uses Bubble’s ‘group by’ feature, to allow grouping by shelf. Nested RG, uses Bubbles ‘group by’ to group by ingredient name and to aggregates quantity. Filters are used to only show items that have not been marked as ‘bought’. This whole thing takes forever to load or update, e.g. if you change quantities - see next step.

Step 3: Changing servings for individual recipes needs to be reflected in the shoppinglist - hence I have another ’ Schedule API workflow on a list’ to update the relevant shoppinglist items accordingly per recipe. Also quite slow…

Step 4: User ticks-off an item and marks it as bought. Here I created a workflow, which does a search for the shopping-list item (or multiple items if they are aggregated across multiple recipes) and then saves a date into their ‘bought’ field, so I can track how people have been using the app. With conditional formatting I add a tick-mark and change font color to grey. Between ticking off the item and the conditional formatting to go into effect, easily takes more than 1 sec.

I have looked extensively through the forum, however couldn’t quite follow any more after post 98 in the list shifter post :stuck_out_tongue_winking_eye: .

Any help or pointing in the right direction would be tremendously appreciated.

Let me know if helpful to share the link to the app.

Thanks!
Georg

Yeah, you can do this much faster with List Shifter. I’m actually working on a little example and video of this that explains how you’d do it. This was useful because it exposed a bug in certain Process List operators.

While you wait for that (might be a day or two as I continue to be super-busy with my non-Bubble gig), you might want to watch my intro to Process List in the video posted in my comment here: List Shifter: Reverse, Rotate, Swap and ITERATE (Loop) Over Bubble Lists | Now at v1.4: Adds Numeric Option, GET INDEX Action.

@keith, you make me hopeful that there is a solution! Thanks for that super quick reaction!

I will watch the tutorials carefully and wait for the next example and video to come. Thanks a ton again!

Hi @keith ,

quick question in the meantime as for which steps above you think List Shifter might provide a solution.

Would you suggest to use List Shifter’s ITERATE function to replace some of the ‘Schedule API workflows on a list’ actions? i.e. Step 1 and Step 3?

Thanks,
Georg

Hi @keith @georg,

Any update regarding a possible solution with lift shifter ?
Thanks,

I have gone through all the list shifter blog post again today and it seems to me the biggest speed bottleneck in creating these shoppinglist_items is purely the fact that it requires a create / change object and as @keith points out in this blog post (List Shifter: Reverse, Rotate, Swap and ITERATE (Loop) Over Bubble Lists | Now at v1.4: Adds Numeric Option, GET INDEX Action) this is simply limited by the speed of backend modifications. My conclusion hence is that simply replacing an API workflow on a list with the iterate function will not do the trick if the actions within the iterate workflow remain creating & changing backend objects.

I am now looking into this post of @keith: 📒 What is the best way to publish a list of objects to bubble?

Watching the video, it seems that creating a shopping list with multiple line items this way should be very similar to creating an order with different line items, i.e. one shoppinglist item also consists of quantity, product / ingredient, and potentially a few other values. So I think this will be where I will start looking next…

I think list shifter will be the solution to your overall speed problem. I used it recently for a shopping cart and the speed improvement was awesome.

Other things that your post talk about lead me to have some questions about your user experience.

When you create a shopping list and then have things set up for the user to change the number of servings for a particular recipe, is that change going to take place before they are able to start selecting if they have already bought an item or not?

Also, is this app meant to be used by people who are currently in the supermarket and on the fly want to select a recipe and get the shopping list?

Hi @boston85719,

re changing number of servings. There are three possibilities:

  1. I usually pre-populate the servings with a standard number of servings for that user (stored in their profile). If the user then selects that recipe straight from the main page, I use that standard servings.
  2. If a user goes into the recipe page, changes the number of servings there and then adds the recipe to the menu, I use that recipe specific servings instead.
  3. The user is still able to adjust the number of servings at a later stage - in that case I run another API workflow on the list of shoppinglist items which updates the required quantities based on the updated servings number.

The app is usually meant for people to select meals at home and then go to the shop or fill their online basket. But we also see people who are more spontaneous shoppers, i.e. they select a recipe pretty much while they are at the store.

Lately I have thought about splitting the two processes of adding a recipe to the menu and creating the shopping list, currently I create all shoppinglist items as soon as the recipe is added to the menu all in one flow.

However, often we see people first creating a longlist of recipes and then cutting it down again to a short list of recipes. This usually goes in pretty quick succession and creating all the shoppinglist items along the way is really interrupting that experience. So now I think, maybe first let customers finalize their menu of recipes and once the selection has settled create the different shoppinglists and shoppinglist items.

What is your opinion for the best way to go about that?

I would use the list shifter plugin and the list popper plugin…together they should let you do exactly what you are looking to do.

I’d follow the video tutorials by Keith and then look at his editor and build out the same type of structure. I did just this and got mine working in a couple of hours.

If I didn’t look at the editor I would have never figured out how to use the list shifter plugin to perform all the math etc. that is what makes it such a powerful plugin.

Once you take that deep dive into the editor and see the way things are set up you should be able to let users be as spontaneous as they want to be and have your app respond to their changes nearly instantly.

Thanks so much for the input, you are instilling back some confidence in me that I might after all be able to solve the problem!!

Are you refering to the editor that keith has been linking in this post: 📒 What is the best way to publish a list of objects to bubble?, i.e. the first of the two links?

That is the one…I focused on the index page as that is where he used the list shifter and list popper to build the shopping cart

Awesome! Unfortunately I will only get to trying it tomorrow, even though my fingers are itching to try it out :slight_smile:

Thanks again for helping out!

One last question: In the example, @keith is using the bubble schedule api workflow on a list, is there a good reason not to go for List Shifters Iterate function instead?

The reason I am asking is, that iterate fires a ‘complete’ event, which I could use to show a popup while creating the shoppinglist items in case this takes longer. Or is this also possible with the API workflow?