I need to be able to with code change the displayed browser URL. This is possible in raw HTML and is even hinted at within the corvid api with the URL onchange event handler: https://www.wix.com/corvid/reference/wix-location.html#onChange
Detailed:
I have a page that loads up a repeater based on database entries. The repeater items then have a click through button that displays new information depending on the item clicked. What I’d like to be able to do, is change the displayed browser URL depending on the item selected using code.
This is because if a client would like to go directly to a specific item, my router picks off part of the URL path to pre-load said item. Everything works in that if I type a specific product id within the URL path, that product is directly loaded into. I do not load into a new page since the data for each item is already there and thus it’d be a redundant reload. Think similar to a store page and clicking sub items.
Is there any plan to add this feature or is there a way of doing so not explicitly outlined in the API?
Thanks.
Since I did not get a reply and I had a bit of free time, I played around with some workarounds to the issue stated above. I came up with the following solution which works and you can test it working here:
https://www.loganrdavis.com/wix-changing-url-without-refresh/
I DO NOT advise doing this as this is definitely a workaround. I did this more for the sense of accomplishment and the fun of it. I am still hoping the Wix Corvid team releases an official way of accomplishing this. With that being said, check out my solution!
Do this at your own risk. This is not an intentionally supported function. I would not advise doing this unless you have some coding experience. This is pseudo code and you will have to change it to get it to work for your site.
1.) Create an element on your page that will dictate how the URL will look. Whether that be a text input or a text field that is loaded using Corvid.
2.) Right click on this element and click inspect. You need to take note of the elements id.
3.) Go into your Dashboard-Settings-Tracking & Analytics and click new tool, custom.
4.) Copy the code below but make sure to replace the id held on line 5:
var element = document.querySelector(‘#idGoesHere’);
5.) Name the code whatever you want and choose the pages you want this to apply to.
6.) Make sure to choose to place the code at the body end else the element you described above may not have been loaded in yet.
Good luck! If your URL ends up needing to be changed differently than the code below allows, it’s easy to change how the URL is handled. The URL that will be set is the combination of the baseURL and the element value.
HTML CODE:
2 Likes