Show content based on the URL of page

Need help
1

I have a brand page that displays data based on the current page’s brand as selected in the data source of the page.

brand page
brand page1668×983 51.3 KB

It determines the current page brand based on the slug, for example: app.com/brand/110.

Here, “110” is the slug defined in the brand database for that specific brand in our database.

Users can reach this URL either by manually entering the slug or from the repeating group on the archive page where we pass the slug of the brand that a user clicks.

Now, I have a navigation menu on this page created using an option set: Group 1, Group 2, Group 3, Group 4, and Group 5.

Then, I have a separate content group for each group on this page.

I want to ensure that when someone clicks on the Group 1 navigation, it is passed in the URL slug (not parameter) like: app.com/brand/1110/group-1, and then only the Group 1 content is visible.

Additionally, whenever no navigation menu is clicked, it should automatically show the Group 1 content.

Can somebody please guide me on how can I achieve this? Consider me a Bubble Beginner.

2

You will just parse the URL as a list by using the Get data from Page URL:path segments as list and get the last item to get the group-1 at the end.

See the demo below:
chrome_relJnAm03v

You can do whatever you want with it later on. I show different textfields based on the last part.

See the full example here: Test for Forum 12 | Bubble Editor

3

Hi Hergin,

Thank you for your prompt response. I’ve successfully implemented the visibility control for the group based on your recommendation. However, I’m encountering an issue with passing the currently selected navigation menu properly in the URL.

Currently, I have it set up so that whenever someone clicks on a repeating group navigation menu, it directs them to the “brand” page and sends the current cell’s “brand-nav” display.

image
image1912×881 52 KB

“brand-nav” is my option set name.

However, when I click on a navigation menu, it replaces the brand slug (110) and adds the menu display name after “brand” in the URL.

For example, it changes from “app.com/brand/110” to “app.com/brand/group-1”.

However, I want it to add the menu display name after the brand’s unique slug so that the app can retain both pieces of data for complete functionality.

Could you please assist me in resolving this issue?

4

Data to send will still be the brand.

You will send this option set by clicking the send more parameters to the page and attaching it that way as a path parameter.

5

Hergin, I don’t want the URL to be app.com/brand/110?parameter=group-1

isn’t there a way to keep the URL something like this - app.com/brand/110/group-1

6

I guess you can form the url yourself by using this action:

image
image540×516 15.4 KB

Get the page URL, add the slug, add the group’s display or another attribute.

You have to play with it a bit. Get the page URL already has / at the end I guess. Then, you have to append / yourself.

7

Hergin, thanks a ton for your help.

Here’s what I have done to get the behavior that I wanted.

After clicking on the navigation menu, I send user to the brands page and pass the following data:

  • Get data from path segment list item#2
  • Append arbitrary text (/))
  • Current cell’s brand-nav display.

image
image727×680 29.2 KB

While everything is working as expected, I don’t know why for some reason the data I am sending is coming in red color. Is this indicating some issue in my workflow?

8

You cant create the url in there. You should use the action I showed if you want to form custom URL.