Forum Academy Marketplace Showcase Pricing Features

🌐 URL Router for Navigation - New Free Plugin from Zeroqode

Can someone link the documentation? I looked on their documentation site and couldn’t find it.

Hi @d00219125, thanks for your question.
Unfortunately, currently, there is no supporting documentation available for this plugin. Sorry for the inconvenience.
Allow me to recommend you checking the plugin demo page, where you can see all necessary settings: https://zeroqode-demo-17.bubbleapps.io/router_for_navigation

Also, kindly note that this plugin is suitable for use on all pages except the index.

  • Add the Router element to any page you would like to perform routing in.
  • Use the “Change URL” action to make changes to the current URL and as a result, fire the “URL Changed” event automatically.
  • Use the “URL Changed” event to trigger workflow actions that will change what the user should be seeing based on the values of the different paths & parameters extracted from the URL.

Note: The first path is the path immediately after the page name. For example, if the URL is https://test.bubbleapps.io/library/books the 1st path will be booked.

This plugin also handles the dev version and live version which can be set in the router element properties.
So for example, if the URL is https://test.bubbleapps.io/version-test/library/books the 1st path will still be booked.

Hope it helps.

Regards,
Zeroqode Support Team

Hi there,

I really like this plugin and use it a lot.
I have a quick suggestion: I have a 1 page app, and I am using the Router to display different “sites”. What I want to achieve is following:

  • A user is in the “Feed” and scrolls to the 10th entry.
  • He clicks it and gets to the product page & scrolls within that product page.
  • When he “goes back a router” he should be scrolled to the 10th entry where he left off (easily doable with a bit of javascript).

The problem: I only have the event “when router changes” - instead it would be beneficial to have an additional option - “when router goes back”.

Would that be possible to implement?

Thanks for the awesome plugin!
Manuel

Hi Guys

I need help with achieving the following please:

I have one page with different tabs. Each tab is linked to a custom state. Each custom state tab shows different content. I want to use this plugin to create a unique url for each custom state. I have already achieved this.

My issue is this: I want that if a user clicks a link from another page with one of those custom state urls in it, that they navigate to the page without displaying the page’s original custom state content but rather the custom state content of the unique url. So far this does not occur though, and each time I click such a link (or even refresh a page with the new unique custom state url) it goes to/displays the page showing the original custom state’s content and not that of the custom state linked to the new url.

I hope I have explained my issue clearly.

Hello Manuel @maze, Thank you for your suggestion.

Have you tried to achieve this functionality with the Bubble’s standard actions? For instance:

  1. when the user clicks on some product in your Feed, set state of that product (current cell index)

  2. and when the user “goes back to the Feed”/clicks the specific button that leads him to the Feed section, use the action “scroll to the specific element” (use the state you’ve indicated in the 1st step) and then refresh the state + change the URL parameter with the “feed” instead of the specific product name.

Hope this idea makes sense. :slightly_smiling_face:

Regards,
Zeroqode Support Team

Hi @phrase9, thank you for your message.

We would best recommend you to check and study our Demo page, click on the link below to get to it. There you can find a similar use of the custom states that you can use for reference in your case.

Regards,
Zeroqode Support Team

I have gone through the link you sent me but am unable to make sense of it because I don’t see where the custom state’s are being set in the workflow. In any event I have tried to replicate your demo and am still running into the same issue in that when I directly navigate to a new url set by the router, or refresh the page, the original custom state’s content displays again. My setup and workflow is as in the 3 images below. I am unable to give access so I require guidance here please. Let me know if any of my steps are wrong. Note that “ClickTab” is a custom state.



Hello again @maze,

Just wanted to say that we are going to add your idea to the list of the plugin’s functionalities. We will see how feasible it is for a future improvement.

Thanks again :pray:


@phrase9, thanks for sharing with us the screenshots with your setup and workflows.
As far as we understand your use case, you can add an additional step (event) on the page load that will change the URL route immediately after the page is refreshed/loaded Screenshot by Lightshot

Please in case that we got your use case wrong, provide us with the detailed/step by step guidance so we can recreate it on our side and test it.

Regards,
Zeroqode Support Team

1 Like

Thanks that would be awesome! :slight_smile:

I also noticed a little issue, that came with the update after V1.4.0. (The issue seems to be in both of the newer versions)

I have some elements that are visible when “router’s 2nd path is X”.

  • When I use the “change URL Router” WF it works as it should - the URL changes and the elements are shown/hidden accordingly
  • However when I use the Browser’s back button (or the “Go back a Router” WF) - the URL changes but the page remains as it was (elements are not hidden/shown)

If I go back to Version 1.4.0 the issue seems to be resolved.

Also in my opinion it would be beneficial to have the path like in V1.4.0 -
to have one more path to use.

Thanks for the awesome support.
Manuel

Hi @maze,

After discussing with the plugin Dev team, in order make the button ‘back’ from the browser to perform as expected, it is needed to add the Workflow that will be linked to the same URL’s set with the plugin. Check the screenshot below and see how you can add the plugin’s actions to the event ‘When Page is loaded’

Hope this helps. Let me know if there is anything else we can assist you with.

Regards,
Zeroqode Support Team

If I am right you mean like this?

If I implement it like this I can go back only once - also when going back I cannot again go forward in the browser history.

Maybe I was not clear enough: I have a one page app - and I am not switching pages - just manipulating the path’s and then displaying the relevant content.

PS: In the past it worked as intended. Using the back button/“WF - Go back a Router” automatically updated the Router.

Hi @maze,

That’s right, take a look at the below test page for reference, you can check the workflows as well from the editor’s page - Your Bubble app
Also, take a look at the below video and see how the ‘back’ button from browser functions - Loom | Free Screen & Video Recording Software

You can double-check the demo page of the plugin and see all the available actions related to the use cases of the plugin, in case you would like to use the plugin for a particular case it will be needed to create the workflows based on your app model.

Hope this helps.

Regards,
Zeroqode Support Team

@ZeroqodeSupport Hello! This evening I’ve upgraded the plugin from 1.3 to 1.6 in one of my apps and it broke all the routing which had previously worked just fine. Not entirely sure what the issue was, but I think the problem is that 1.6 doesn’t work properly if the app doesn’t use/version-live/ in the URLs. (Which I don’t, as it’s ugly and just adds unnecessary baggage to production URLs, making them longer.) After unsuccessfully trying a few things to get the routing working again, I gave up, downgraded to 1.4, and things went back to normal.

1 Like

Hi @chaostorm, thank you for your message, and sorry for the issue you had with our plugin.

When installing the new version (1.6.0) the Developer Version field was removed from the functional window of the plugin element. The plugin will now automatically detect when the site is live or in the development stage.

To use the new element you can follow the next steps to set it up and see if it works for you:

  • upgrade to the latest version of the plugin (1.6.0)
  • place the new element on the page (DO NOT delete the old one)
  • in the workflow section, in the plugin actions change the referring to the new element
  • After all the action will be changed - delete the old element from the page

Let me know if that helped, or if there is anything else we can assist you with. Apologize for the inconvenience created :pray:

Regards,
Zeroqode Support Team

@ZeroqodeSupport Thanks for the reply. I deleted the old element after upgrading to the latest version, placed a new element on the page, and updated all the workflows to refer to it, but the new setup then worked only with example.com/version-live/app and not with example.com/app. Does 1.6.0 support the latter use case at all?

Hey @chaostorm, sorry for having issues with the plugin.

That’s a strange behaviour of the plugin, we would like to investigate the issue further. It will be great if you can give us access to your app so we can double check it from our side.

Waiting for your reply.

Regards,
Zeroqode Support Team

1 Like

I am also using the older version.

Maybe your issue is that the old version worked like this: “domain.com/page/path1/path2/path3/path4

Whereas the new version works like this:
domain.com/page/path2/path3/path4

Example: google.com/api/keys/81239412349

2path in old version = “81239412349”
2path in new version = “keys”

2 Likes

Hi. I’m having issues with the plugin in Live. Works perfectly in test. Tried to diagnose it by inserting a text field with:
image

On the page in my test version: “bestwishes.cards/version-test/ecard_types/birthday/ID/2406000”
this is correctly showing ID: ID (i.e “ID” is the 3rd path)

However on the equivalent page in my live version
“bestwishes.cards/ecard_types/birthday/ID/2952100”, It just shows ID:

i.e it doesn’t seem to be identifying the third path at all.

Have I messed it up or is there a bug?

Hey @gavin1, thank you for your message.

We have double-checked the setup of the plugin on our side to make sure it performs as designed. In order to verify your use case, it would be best to share a link to your Bubble Editor so we can check the setup of the element in your design. As well, let us know on what page we can test the element, and if there are any additional details you can share.

Waiting for your reply!

Regards,
Zeroqode Support Team

Thanks for the offer. The app has entered a paid pilot with a large client in the meantime, so I’m afraid that means I won’t be pushing any possible breaking-change commits to production until the pilot’s over late next month. We can pick up this convo again then. :slightly_smiling_face: