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

Hi @sudsy I found a small bug you might want to be aware of:

When you run the app in version-test, SudsyPage's Path Param knows to ignore version-test.
When you run as a user in live version (from your database), the URL bubble creates has version-live appended to the end of Website Home URL. Sudsy Page's Path Param's 1st element evaluates to version-live in this case, which breaks many of the routes that are built in my app.
Is it possible to add parallel logic to ignore version-live just as it does for version-test?

Hi @jacob.b.singer,

Thanks for the head-up on that. I don’t think we’ve ever actually tested that scenario, so will look into it.

In the interim, if you manually remove the version-live path param from the URL after clicking run as, does that work for you?

-Steve

This should now be resolved, @jacob.b.singer. Thanks again for letting us know.

-Steve

Thanks @sudsy !! I missed your earlier message - the answer was yes, we could work around it by deleting version-live. But glad to not need to do that anymore!

Confirmed this works well!

1 Like

Hi @sudsy :wave: Wondering if you have any insight into a problem I’m facing. I’m building an SPA using your brilliant plugin. Everything is going swimmingly except for my SEO metadata. As you probably know, Bubble’s expression builder for SEO title’s and descriptions is not very … “expressive.” It can only refer to the current page’s thing, the current user, an option set, the current URL or an arbitrary data search. That is to say it cannot reference the current page’s elements or states. Even worse, the SEO fields are not accessible from the conditional logic builder. So whatever approach one adopts can’t rely on conditional logic to retrieve SEO metadata. Finally, testing has demonstrated that any searches performed within the SEO fields are run only once, on the initial page load. All of this has me more or less pulling out my hair. Do you know of any solution that would allow me to change the SEO metadata fields dynamically on URL change without reloading the page?

Edit: After thinking about this some more, I’m wondering if it would be possible to use Javascript or perhaps @ZeroqodeSupport’s CSS Tools plugin to modify the metadata in the page head? I’m not very familiar with JS, so a little intimidated by the prospect. That said, it seems to me that modifying the metadata prior to changing the URL might be a hacky way of preserving the performance of one’s SPA without sacrificing good SEO. Do you think this might work? Pinging @keith here since he’s a whiz with this sort of thing.

@sudsy Sorry to ping you twice in one night. However, I’m wondering if you could explain the relative benefits of using link elements vs workflow actions to navigate via the Sudsy plugin. I’m realizing that the solution suggested in my last post would require me to rely on workflows for most intra-page navigation. I’ve read suggestions that links are better from an SEO perspective, but don’t quite understand why that would be. Please forgive me if you’ve addressed this elsewhere.

Hi @ts11,

Looks like your persistence paid off with this issue. Nice going!

First off, I’m no SEO expert.

What I do know, though, is that link elements result in actual HTML anchor tags <a> in the DOM (rendered page), which Google can “see” and thus utilize to glean info about site structure. Bubble actions, OTOH, are just JS code and provide no information about document or site structure.

Also, from a UX perspective, browsers treat links a bit differently. Sometimes this is desirable and sometimes not. For example, most browsers show the full destination URL when the link is hovered. It’s precisely the browser-specific UI handling of links that some devs who are creating SPAs (especially those intended for conversion to native mobile app) prefer to use the navigation action instead - i.e. the clickable element won’t “behave” like a link. Sudsy Page provides both options, and the end result - i.e. intra-page navigation without page reload - is of course the same.

Hope it helps,

-Steve

1 Like

Hi Sudsy! Have a weird bug to report.

In my app (app.swapstack.co), I’m getting an error, but only in some situations related to viewing the page on mobile. It’s a little hard to show you without having an account, so I’ve recorded a loom for you.

Full Error text:

run.js:8 Action Go to URL via SudsyPage A - The plugin Sudsy Page / action Go to URL via a Sudsy Page threw the following error: TypeError: e.data.navTo is not a function
    at eval (PLUGIN_1551900316693x963780318009229300/Sudsy-Page-element_action--Sudsy-Page-Go-to-URL-via-.js:3:8)
    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2…/xfalse/x15/run.js:8:1207345 (please report this to the plugin author)
 
{original_error: TypeError: e.data.navTo is not a function
    at eval (PLUGIN_1551900316693x963780318009229300/Suds…, element_instance: null, action: t.exports, code: '1650669966195x702439546317152400'}
action: t.exports {json: e, A: {…}, _field_names: {…}, get_static_property_run_cache_1_param: ƒ}
code: "1650669966195x702439546317152400"
element_instance: null
original_error: TypeError: e.data.navTo is not a function at eval (PLUGIN_1551900316693x963780318009229300/Sudsy-Page-element_action--Sudsy-Page-Go-to-URL-via-.js:3:8) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207345 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1194301 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207302 at Object.i.run_without_catching_not_ready (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1322235) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207252 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1307224 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1307132 at g.evaluate (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1307163) at new g (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1308494) at Object.r.Watcher (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1306365) at Object.r.run_once (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1305232) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207219 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320628 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at h.callback (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320610) at Object.r.run_once (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1306162) at Object.run (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1206984) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1146559 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320628 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at h.callback (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320610) at t.exports.run (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1146400) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97400 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at t.run_subsequent_actions (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97119) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:94596 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at t._run_workflow (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:94563) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:99831 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:99802 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at t.start_custom_workflow (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:98240) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97370 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at t.run_subsequent_actions (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97119) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97980 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320628 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441 at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104) at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393) at h.callback (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320610) at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97564 at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:170377
message: "e.data.navTo is not a function"
stack: "TypeError: e.data.navTo is not a function\n    at eval (PLUGIN_1551900316693x963780318009229300/Sudsy-Page-element_action--Sudsy-Page-Go-to-URL-via-.js:3:8)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207345\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1194301\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207302\n    at Object.i.run_without_catching_not_ready (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1322235)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207252\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1307224\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1307132\n    at g.evaluate (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1307163)\n    at new g (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1308494)\n    at Object.r.Watcher (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1306365)\n    at Object.r.run_once (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1305232)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1207219\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320628\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at h.callback (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320610)\n    at Object.r.run_once (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1306162)\n    at Object.run (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1206984)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1146559\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320628\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at h.callback (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320610)\n    at t.exports.run (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1146400)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97400\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at t.run_subsequent_actions (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97119)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:94596\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at t._run_workflow (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:94563)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:99831\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:99802\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at t.start_custom_workflow (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:98240)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97370\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at t.run_subsequent_actions (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97119)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97980\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320628\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320441\n    at h._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320104)\n    at h.then (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320393)\n    at h.callback (https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:1320610)\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:97564\n    at https://dhtiece9044ep.cloudfront.net/package/run_js/6d23fc2574c8c609c4f4617155c40895cf887d6d2113e7968fc17663a8689852/xfalse/x15/run.js:8:170377"
[[Prototype]]: Error
[[Prototype]]: Object

Hi @jacob.b.singer,

Check to make sure the SudsyPage element is not inside a reusable or other container that gets hidden. The page root is generally the best place for it. Attempting to use a plugin action when the plugin (or the container in which it resides) is hidden is the only situation in which I’ve seen a similar error. Although the SudsyPage element is “headless”, it must be “visible” in order to use its actions.

-Steve

Thank you! Really appreciate that.

1 Like

I’m unable to use debug mode with sudsy page. The url query string is immediately removed on page load. Is this expected behavior?

Hi @aj11,

If the URL is changing, it’s because Bubble logic is explicitly changing it, so check your workflows. SudsyPage does nothing “behind the scenes” in that regard. I’ve debugged URL has changed events without issue.

As you noted, debug mode is enabled by a simple query string parameter, so if it’s needed, it must be added to any relevant URLs. I suppose one could even add it conditionally to all test mode URLs…

Of course, depending on your setup and URL structure and whether or not you’re using other query string params, it might not be quite that simple; but the point is that the URL is whatever the Bubble logic says it should be.

Having said all that, I personally don’t use Bubble’s debugger much at all, so if you’ve encountered a particularly tricky debugging issue, feel free to elaborate and perhaps others might have suggestions.

1 Like

Got it, thanks! Must have a wildcard url change happening somewhere on page load.

1 Like

This ended up being some kind of Bubble thing where is the page width is below a certain size then it auto strips the query string for the debug mode and disables it. Nothing to do with Sudsy.

1 Like

Interesting! I might have noticed that while checking responsive behavior at various times, but I guess I never paid close enough attention to discern the actual behavior.

Thanks for pointing it out!

Hi @sudsy! Thank you so much for your effort here!

I decided to use your plugin in order to build a SPA including SEO-friendly URLs. I first configured everything with Bubble’s LINK element, but I am realizing now that these LINKs are not Google SEO friendly indeed, because they are not crawled. Can you please confirm whether it would be necessary that I implement BBCode or HTML tags vs Bubble LINK element?

On the other hand, I am thinking whether to use BBCode links (if Bubble LINK is not convenient for Google), but I do not understand the steps required for sudsy to recognize < a > refs that you mention in the documentation:

SudsyPage automatically “recognizes” native Bubble Link elements. To enable SudsyPage to work with other anchor < a > tags on the page (such as those inside an HTML element or within a Text element containing BBCode (from Bubble’s Rich Text Editor), enter a CSS attribute selector into this field.

Can you please help me there? What is the CSS attribute that you refer to?

Thank you in advance

Hi @rentquota,

Perhaps the following will prove helpful…

Sorry, but I could not get this solved with the links you gave.

If I include a link using a BBCode inside a “text” element, clicking on it will always reload the page even though it is going to the same page. This will not happen if I include the link inside a “link” element. Is there a way to do so? Can you please provide some steps?

image

I just include the target self to open in the same tab and not new, but it does not change the effect that sudsy does not avoid reloading the page.

Thank you in advance

Correct. Sudsy Page is only aware of native Bubble Link elements by default. Is there a reason you can’t simply use a Bubble Link element?

The only other option is to use the advanced Link Selector feature to which I already pointed.

That feature requires knowledge of attribute selectors (as described in the docs). Some knowledge of Chrome dev tools might come in handy as well. The Sudsy Page docs also include links to external documentation on MDN which goes into more detail on attribute selectors. Again, Link Selectors are an advanced feature.

Honestly, just use a Bubble link element. The behavior you’re experiencing is expected and documented.

If you’re at an impasse, feel free to DM me. I can set up a working example in your own app; but beyond that, you’d be looking at some paid consulting help.

EDIT

And just to clarify, Sudsy Page is not reloading the page. You’re simply experiencing the default Bubble behavior.

EDIT 2

And one final note… Here’s the post where I announced the Link Selector feature along with a demo and the rationale behind my decision to implement the feature. As you can see in the demo, it works just fine. All the links in the merged text make use of the Link Selector feature.

Just in case anyone needs the solution to this. The way to allow sudsy page to identify any link pointing to the same page is including a attribute that is common to all these links in the “link selector” field in the “sudsy page” element on the page:

image
image

For example in my case I identify those links using the first “path parameter” of the URL (i.e. the same bubble page).

Now, no matter it is a BBCode, a bubble “link” element or other, the page is not refreshed.

Thank you @sudsy for your guidance!

1 Like