Nested URL Like "/men/clothing/jackets/{productID}"?

So the title says it all.

I could make something like a single-page app ("/men") and change URL accordingly.
But if I were to make a multi-page app, how would this be implemented? I tried creating a “/men/clothing” page and it is transformed into “/men-clothing”. Has anyone implemented this nested URL or have any ideas?

1 Like

I don’t think you can, you would still need to keep it single page for the “Root” folder, and then generate the URL internally.

1 Like

Hi, @NigelG Thanks!

I found this forum thread:

As far as I understand @sridharan.s’s solution relies on URL parameters, so it would look something like this:

/root-page?tab=1?nestedTab=1

But is there a way to make this structure:

/root-page/page/page

I initially thought I could make it work in the Single Page Application (SPA) … but after fiddling with Bubble, it appears to me these nested URL structure can’t be done with Internal Links. It can be done with External Links, which always refresh the page and thus defeat the whole purpose of SPA.

Did you mean to use URL parameters? Or is there another solution to make the nested URL work?

I think the only way to get it to work is via an external link.

You can’t do it via a “readable URL” as that removes the / if you have some sort of slug with a path. But you could do page-page-page … but it does leave the UID on the end.

1 Like

Yeah - I ended up using query params instead of path params :slight_smile: … I hope one day Bubble supports path params but I think for that it would require a huge overhaul because routing is simply complicated. Thanks for advice!

Bubble can already do it, because the site we are using now is built on bubble and it’s url shows a path.

I’m not sure how it’s done and maybe it’s a newer thing. If I figure it out though I will try to post it here.

@willtaylordesign Did you figure out how to do this?

Bubble’s folder hierarchy is flat, so this isn’t literally possible (such URLs would be “fake”), but you can rewrite or modify the displayed URL using Browser plugin.

But WHY? You can do all these tricks, and I’ve shown folks how to do this, but I don’t understand the fascination with this. Literally nobody who matters cares. Your users do not care. Your users on mobile (who are like, all your users) do not see these URLs right?

Spend time on something else.

2 Likes

Disregarding fake URLs, If someone links to your pages it is more practical to have nested URLs instead of a million parameters in your URL. But sure, most people don’t care what it looks like.

SEO ?

I actually have the same question, and figured there was some reason people had to care. Could you explain a bit more about how SEO is impacted by the URL structures? In my 10 year software development career, I’ve been fortunate to never have to worry about SEO impacts, so I’m super green on the topic.

There are 3 main differences:

  • It’s cleaner URL structure which more people can use to understand how the page they’re on fits into the website - for example, my mom understands /men/clothing/jackets but she’d be scared to try to read anything that looks like code (e.g., ?audience=men&category=clothing)
  • It looks different when you’re analyzing your site’s web analytics.
  • There used to be a big difference in SEO (not inherently better or worse, but different). My understanding is these same factors still exist but they’re not near as important anymore. Additionally, you can use canonicalize your pages so that both URL structures work about the same for Google, but it takes a bit of effort to do so.
6 Likes

Yep! Check out these forum topics:

1 Like

SEO is a big part of my personal use case for it. For example, in Google search results it lists the url of the page being referenced. Pages with simpler, more familiar looking and cleaner urls tend to get more clicks and rank higher than those less readable. Additionally, it does at least appear to be of some value when submitting a site’s XML sitemap to Google, as it makes your site’s structure a bit easier to understand/parse categorically, given that it provides a bit more context for the page by including its hierarchy. Not to mention, especially if you want the link to be shared by users on social media or publicized etc., 1) Character limits - depending on the platform, the length of the url may affect character limits. 2) Predictability - People might actually remember the url and return to it directly, or possibly even guess the url for a page they’ve never been to simply because it’s predictable. 3) Versatility - If you print the url, like say your linkedin profile on a business card, it’s a whole lot easier to type than a long string of random characters. 4). Familiarity - most people don’t know the role of symbols like “#” and “=” in urls, and if presented with options they will choose the more familiar “/” nearly every time.

7 Likes

To be clear, this only works when opening an external link (reloading the page)?

I’m looking for a way to replace parameters with nested URLs on a 1 page design, where you don’t refresh going between menu items. Just like the stripe dashboard. dashboard.stripe.com/payments

Ahhh, got it. Yes, that method should still work, but make sure the page your app is on isn’t the index, otherwise you’ll just get 404 errors, because it’s only what comes after the second “/” that Bubble doesn’t redirect.

If you’re displaying an item from the database in a group, like a shirt, I would do this:

  1. In my database, create a single table named “tbl_products,” and include the fields “product_name” and “product_type.” Then I would add a note to the “type”/s field and list all of the possible inventory types so I can keep track of them in a source of truth. (e.g., “shirt, hat, coat”). Now, when adding to your inventory just make sure no two products with the same “type” also share the same “product_name” value.
  2. Create a group in my app called “Group Product Window” with data type set to “tbl_products,” leaving the data source field blank and unchecking the “this element is visible on page load” checkbox. Then create a custom state for it in conditions called “is_visible” and make it a “yes/no” statement. Then add a condition on it for “When this group’s is_visible is yes > this element is visible.”
  3. Create the following workflow: When page is loaded > display data in “Group Product Window” > do a search for “tbl_products” with “product_name” = Get data from URL (path)'s first item > set state of “Group Product Window” “is_visible” to “yes” only when Get data from URL is not empty

If you’ve already structured your database so that each “product” has its own named table, you will just need to display the data by sourcing it from a search (e.g. datasource = do a search for ___ with name = get data from URL’s first item). If you’re using different windows for each product type you’ll have to get a bit more creative with their display states on page load, like adding a “type” field to each table and incorporating the field’s value in your display conditions.

Of course, I have to ask, “but… why??” I’m guessing you’re building a native app and want to deep link to it with friendly url’s. Words to the wise; My personal opinion/experience says a parameter ("#") is just as friendly as a path ("/") and easier to work with. On the other hand, if you’re doing it for SEO purposes, I would say this pseudo-nesting method isn’t going to behave any differently than the parameter method, since you are still technically on the same “page.” Not to mention you’ll have far better luck with Google if you create a WordPress site to promote the app, as WP can automate a lot more tasks in the background related to SEO. Bubble is an app builder, and apps don’t typically rely on themselves for promotion, which is why you see a lot of them on subdomains like app.example.com.

Bada bing…

Sudsy Page - Squeaky Clean URLs

:wink:

1 Like