Hello Bubblers,
I am developing an app that lists different types of products. I want that if a user is navigating through products, the user can have the possibility to navigate back, at any point, and see the product they viewed previously by clicking on a button that takes the user back step-by-step. Any help on how to set this up will be appreciated.
Are the products divided by pages? Or how are you currently seperating them? The way you seperate them would determine how you can achieve this.
The products are divided by category, each category in a separate repeating group.
That’s an interesting question. The way I think I would do it is to have a some sort of “product view history” list (say on the User), that you add to with every product view. Then “back” would mean view the item:last item -1.
Would be nice to couple this with slugs so to users its clear you are navigating products, and can bookmark products.
I’m a Bubble Freelancer. I like Bubble coaching and making plugins for tricky API’s.
My Bubble plugins Pleased to say all 5* reviews.
1 to 1 coaching with nocodeguides.io DM me for a free voucher code if you want a quick chat.
My Youtube Channel Mostly about my plugins.
Thanks for your interesting response Lindsay. Could you please throw some light on how to set a “product view history” list on the user and how to add it to every product. And expression will be of great help. Thank you very much.
If you were to do this the same way most large sites do, you’d want to use URL parameters on each page, and so a user can just hit the back button on their browser to scroll through every previous screen/product they’ve seen.
Thanks for your response ed727. On this App, I have only 2 pages; one that lists the items (separated in repeating groups) and the other page displays items details. The page that lists the items has many repeating groups that display or hide when a button is clicked. I am wondering, how do you set URL parameter to work on a single page as described?
@lindsay_knowcode I dont think this is the best practice though, there must be a way to achieve this without dragging the database into it. At worst, it would even be better to use the user’s localstorage to save this. But I really like the history list idea.
@jpeangeles if it is just back youre trying to achieve. What about adding a custom state to each of the repeating group, say, category = the repeating group Catergory name. Then when the user clicks a category, you will add the repeating group custom category value to the custom state value (list of values) of another group called history. So every time the user clicks back, you would pick the last item in that history custom state value(that is a list of value) and then delete it. (That is show a repeating group that has that category custom value, I would need to check how realistic this is though.) When they press back again, you show the new last category in that list and delete it again. I think that is a better approach. But someone can still suggest a more better one though.
But coming to think of it again, I dont think that you need to be showing seperate repeating group by category. You can show a single repeating group and change their source data. Except if the look of each repeating group is not the same that is when you can show and hide. Even though I cant really say how your ui is arranged. But if you change source value of the repeating group on each category selection. Then the idea above would be easy to implement.
The basic concept is that anything that filters a list or shows an item based on a user action, you implement it via the page reloading and the page grabbing the search parameter from the URL.
In concept it is simple and the bubble manual explains it, but if you have really complex searches, getting it set up can be tricky. If you run into trouble, dig around in the forum a bit you’ll see some discussions like this one:
The other thing to be aware of is that you’ll need to set your pages up to be efficient and load fast, since every time a user hits the back arrow on the browser or inputs a new search term, it’s reloading the page and executing a new search.
This wouldn’t work for the basic idea of how custom states work. They are temporary stores of value and are lost or ‘reset’ when the page is refreshed, so using the browser back button would not result in the user returning the page with custom state values set from a previous visit.
@jpeangeles best approach to take is the way I outline in the link shared by @ed727 that I created to help others make their search and filtering systems the same as all the ‘big’ sites. That is to have all the filter and sorting options set into the URL and at times that would require a parameter as list if the filter options allow the selection of multiple items.
The approach makes it so that you can allow a user to select filters, leave the page and using browser back buttons return with all the same filters in tact. It also doesn’t require multiple repeating groups, and in fact there are not many reasons to ever use multiple repeating groups to display different search results for the same data type.
This approach also makes it super simple to save a search. As @lindsay_knowcode mentioned it would maybe be cool to allow users to ‘bookmark’ products and you can do this easily when all sort and filter parameters are in the URL parameters by having a data field in the database that is of type text and you simply save the dynamic expression value of ‘this URL’ which will save the URL with all the parameters so the next time the user wants to see the search results using the same parameters they can access the link and have all sort and filter parameters ‘pre-loaded’.
This approach doesn’t slow things down any more than any other search would slow down a page on load.
Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.
As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.
Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.
Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.
Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.
Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.
BTW I have a tutorial series to be released in the coming week that covers everything about using the URL parameters for filter choices and how to set filter constraints on the Search.
This topic was automatically closed after 70 days. New replies are no longer allowed.
