Forum Academy Marketplace Showcase Pricing Features

[UPDATED v2.2.0] 😃 Sudsy Page router for SEO-friendly clean URLs! (by Tech-Tonic)

Except that neither makes sense in the context of a plugin with no runtime UI. It seems to me a proper solution would enable the developer to designate an “element” of a plugin as having no visual interface. Seems to suggest the notion of a “faceless” plugin element wasn’t anticipated in Bubble’s early days.

At any rate, thanks for the helpful input, @stone and @mebeingken.

Do I have to add the plug-in element to the 404 page? and
Why do I get the double slash symbol in the url “//” ?
Capture
I setup the link button as same as yours.

Hi @newlee,

What’s the desired URL structure and behavior? What exactly is it you’re trying to accomplish?

Ah, I see. After taking a closer look, it appears you’re attempting to use the plugin on the home (index) page. As stated in the product announcement at top of this thread, that won’t work…

1 Like

sad, but thanks :joy:

New and Improved!

Now gets clothes cleaner, teeth whiter, and helps fight mold and mildew!!! :wink:

  • New features!
  • New pricing!
  • New icon!
  • Wow! :grin:

icon-sudsy-page
 
:soap: Squeaky Clean URLs for your Bubble App

Hey all, I’m very pleased to announce the next step in the evolution of Sudsy Page, the premier premium plug-in for SEO-friendly clean URLs.

What It Is

Sudsy Page enables router functionality for friendly URLs and “deep linking” without page reloads. It’s especially well-suited to Single Page Applications but can be used on any page where a friendly “nested” URL structure is desired.

What’s New

This plug-in was created to address the needs of various ongoing internal projects. Since its initial release in March of 2019, opportunities to expand and improve its functionality have been identified and addressed.

Sudsy Page’s feature set now includes…

  • :white_check_mark: URL path parameters core router functionality for friendly URLs.
  • :white_check_mark: Automatic link detection simplifies implementation and enables “crawler-friendly” page content for better SEO.
  • :white_check_mark: [NEW in 2.1.0] Reusable element compatibility for greater flexibility and ease of use.
  • :white_check_mark: [NEW] “Go to URL” action for workflow navigation. Can be used in lieu of or in conjunction with link elements.
  • :white_check_mark: [NEW] Preserve history option when using workflow navigation.
  • :white_check_mark: [NEW] Context awareness for greater flexibility with application logic.
  • :white_check_mark: [NEW] Query string parameters for proper behavior (no page refresh) when QS params are desired - e.g. sorting and filtering. Also enables bookmarking of “search” URLs.
  • :white_check_mark: Hash token detection for enhanced intra-page navigation.
  • :white_check_mark:Set title” action for specifying tab/window name via workflow.

Demos

The demos have been updated to showcase some of the new features - e.g. the blog search now uses a button and workflow action instead of a Link element, which results in a nice UX improvement - i.e. just press return after typing search term (no need to click the button).

Documentation

 
 
:warning: PLEASE NOTE: Sudsy Page does not work with Internet Explorer, so if you’re stuck using IE, all I can offer at this time is…well…my condolences. :smirk: (If IE compatibility is important for your project, contact me directly to discuss further.)

3 Likes

Steve @shot, how does this work with reusables on the page?

I run a lot of navigation on a single page application between full-page reusables as well as on context menu reusables inside an RG for instance.

image

Especially with the context menus, it’s not uncommon to have a reusable nested inside another reusable.

Is it possible to make Sudsy work in that scenario?

Love the functionality you are providing here. Amazing job!

@eli, my efforts over the past week have rendered my original reply obsolete, so I’m revising this post to reflect my updated response… In short, Sudsy Page is now fully compatible with reusable elements.

In fact, the demo pages are now running the updated version of the plug-in, so be sure to check them out.

Additionally, the demo pages themselves have been updated with a real-time dashboard of URL data so that you can get a good idea of how the plug-in works…

In addition to the page itself, the plug-in is used in both the header and footer (dashboard) of the demo pages, and those are both reusable elements. Be sure to check out the blog demo in particular, as it uses both workflows and links for navigation.

1 Like

Yes and no. I have both 2nd level reusable navigation elements inside RG’s in a reusable as well as 1st level navigation elements directly inside the reusable.

An example, I have a Job view that is a full page reusable. In the header there are buttons that will take you to the schedule screen, etc that are simple Go to Page workflows.

But on this Job view reusable I also have line items in an RG and inside the cell is a 2nd reusable element with a dropdown menu with navigation elements in it as well.

Currently I use all Navigation workflows but that can easily be changed to external links if needed.

I think I just repeated you and myself there twice but at least it’s all clear as mud now! :laughing:

Ok, thanks for the clarification, @eli. I think I understand.

If you put the Sudsy Page element on the page itself - not inside a reusable element - then it should work. The “router/nav logic” (workflows) must be implemented at the page level as well (not within any reusable element). Sudsy doesn’t care where the Link elements reside; but the workflow logic for the “URL has changed” event must be where the element is located - at the page level in this case. And for a SPA, that makes perfect sense to me.

However, it also means that your reusable elements can’t directly access the plugin functionality (actions or exposed states). That’s a constraint imposed by Bubble’s architecture. But again, that shouldn’t be an issue if the navigation logic is implemented at the page level.
 
 
ASIDE: It’s technically possible to use the plugin within a reusable element (I’ve done it), but then you have to use “proxy” custom states or other plugins to pass data between the reusable and the page. It’s doable but generally not necessary or recommended - especially for a SPA.

So as long as the link in the reusable is constructed properly, it will still fire the URL has changed event on the main page?

That makes sense. I’ll just have to think through the structure in detail before retrofitting this.

Thanks for the response!

Exactly! :slightly_smiling_face:

This reply of mine has been rendered obsolete now that Sudsy Page supports reusable elements, as noted in this revised response.

Updated demo pages with real-time data can be found here.

2 Likes

Great wow, thanks! :slightly_smiling_face: I was having to do a whole bunch of intricate extra stuff with zeroqodes router plugin because it doesnt have any compatibility with reusable elements at all. I will be switching everything over to sudsy!

1 Like

Yeah, I found myself implementing “proxy” custom states just to pass plug-in data between the reusable element (header in my case) and the page and figured there had to be a better way. This not only simplifies things, but it makes the plug-in more versatile.

I hope to release the update within a week or so, after I bring the docs up to date.

2 Likes

Very nice!

Sudsy Page v2.1.0 - Reusable Element Compatibility

This update greatly increases the flexibility and ease of use for projects with reusable elements. No need to jump through hoops to access actions or exposed states when implementing workflows. Just add logic wherever it makes most sense - at the page level and/or inside reusable elements.

Features Include

  • :white_check_mark: URL path parameters core router functionality for friendly URLs.
  • :white_check_mark: Automatic link detection simplifies implementation and enables “crawler-friendly” page content for better SEO.
  • :white_check_mark: [NEW in 2.1.0] Reusable element compatibility for greater flexibility and ease of use.
  • :white_check_mark: [NEW in 2.0.0] Go to URL action for workflow navigation. Can be used in lieu of or in conjunction with link elements.
  • :white_check_mark: [NEW in 2.0.0] Preserve history option when using workflow navigation.
  • :white_check_mark: [NEW in 2.0.0] Context awareness for greater flexibility with application logic.
  • :white_check_mark: [NEW in 2.0.0] Query string parameters for proper behavior (no page refresh) when QS params are desired - e.g. sorting and filtering. Also enables bookmarking of “search” URLs.

Demos Updated

The demos have been updated to showcase some of the new functionally. All demo pages make use of multiple reusable elements and show real-time plugin data to provide an overview of the capabilities.

Additionally, the “router” functionality of the quick-start demo has been reworked to employ a simpler and “cleaner” approach to implementing logic. Be sure to check out the quick-start edit mode.

Sample Screenshots


FREE Trial

If you’d like to tinker before you commit, please PM me. I’d be happy to provide temporary access to a private build of the plug-in so that you can determine if it will suit your needs.

2 Likes

Sudsy Page v2.2.0 Now Available (How about a feature with that fix?) :wink:

 
Version 2.2.0 of Sudsy Page fixes an issue and adds a feature…

  • :wrench: [FIX in 2.2.0] Fixed an issue which prevented initially-hidden reusable elements from responding to the “init” type of URL Has Changed event. Each instance of the plug-in now correctly “sees” the plug-in’s exposed states when the reusable element first appears. (Thanks to @Taiheta for bringing this to my attention.)

  • :white_check_mark: [NEW in 2.2.0] Forward / back navigation actions have been added, enabling you to move forward and back in history an arbitrary number of pages via workflow.

 
See this post for links to demos and docs.

1 Like

@shot as the plugin doesn’t work with internet explorer how does that affect the app when used on internet explorer as a browser?

Does the apps link structure get “lost”, for example if my navigation bar navigates using the URL created with the plugin and a user is on internet explorer do they not get directed to the page?

I’ll have to double check when I’m at my Windows test machine. The bottom line is that IE simply doesn’t support the underlying browser capabilities leveraged by the plug-in.

It might be that the page does load on first visit but that subsequent intra-page navigation is broken. But again, I’ll have to check and will make a note to do so and provide a definitive answer by Monday.

(There appears to be a way to get it to work using some 3rd party libraries, but I doubt it would be worth my while to implement, unless it’s important for some enterprise application and they’re willing to pay for the development.)

1 Like