Need to jump to a specific anchor somewhere in your website from an external URL/other site? The code below may help:
import wixLocation from 'wix-location';
$w.onReady(function () {
setTimeout(function () { // Uncomment/comment this line and line 24 if you want to delay page redirection
let query = wixLocation.query['anchor']; // look for "?anchor=" in the URL string
let anchorto = '#' + decodeURIComponent(query); // Add # character to front of whatever appears after ?anchor= to create our ElementID
let url = $w(anchorto).link; // set the variable url to the link associated with the ElementID stored in anchorto
if (url === undefined) { // If we are unable to find a valid anchor or URL
url = '/error404'; // set the url to our default 404 page
}
wixLocation.to(url); // and off we go to our new redirected URL
}, 3000); // Uncomment/comment this line and line 8 if you want to delay page redirection 1,000 is 1 second
});
That above is the Page Code from a page on our site called "redirect-to". The page name is not important. Example URL:
eastnetworks co uk / redirect-to?anchor = WhatWeDo
N.B. Unable to post links here, so if you want to see the above in action, remove all spaces and replace the ones before and between "co uk" with periods/full stops"." .
Alternatively, find our blog pages. Most of the pages contain a link "Home Test Service" that uses this approach to land in the correct part of our website.
The "redirect-to" page has some buttons on it - I have 20. Could have more, or less. One of these buttons has a link to the anchor "WhatWeDo". To aid external readability, I changed the ElementID for this button to # WhatWeDo. You don't need to, but I think it looks better than using # button77.
Basically the code uses the buttons ElementID (# WhatWeDo) to push the link into the wixLocation.to(url) instruction.
Cheers
Peter
202103160824GMT - Edited for clarity. 202103160948GMT - Fixed typo.
Does this still work in Wix? I have tried to implement it on my site, but it can't seem to find any of links the Element IDs that I try to reference in the URL.
Some additional notes that explain the thinking / application behind the above code:
The core issue is that it is almost impossible to navigate from an external site/browser to an anchor in a WiX using something like:
..... Somesite / some-page # some-anchor
In testing, I discovered that trying to pass anything into a WiX site that contains a "#" character in the URL string causes confusion at best.
However, you can successfully pass parameters from an external location in a URL destined for a WiX site. Something like this, will work:
..... Somesite / some-page ? some-name = some-value
i.e. You can, in WiX Velo, tell it to look for the variable called "some-name" and, if found, extract the value after the "=" character. i.e. Will return "some-value".
All objects in WiX site have a unique ElementID associated with them. Some objects, like buttons, can point to links/anchors. Left to their own devices, all your buttons on a site will have an ElementID something like "# buttonNN" , where "NN" is a unique number.
We know we can write Velo code to extract information about and control the behaviour of individual elements by referencing them via their unique ElementID. Using the ability to pass parameters we can tell our Velo code which ElementID we want to control. So, an external URL like this will work:
..... Somesite / some-page ? some-elementID = button77
In Velo code, we could look for the variable "some-elementID" and, if found, extract the value "button77". Add the "#" character to the front of this in code to get "# button77". Now we can manipulate the unique object called # button77.
N.B. I have not yet found a successful way to pass the "#" character via an external URL into a WiX site/Velo code, so I decided to add it in code.
Having worked out the principles involved, I applied them in this way to allow me to navigate to any anchor, anywhere on our WiX site:
I created a page on our site called "redirect-to". This page is a placeholder for any anchor I want to be able to navigate to from an external URL/location. The page name itself is not important, you can use any page name you like.
I placed a number of buttons on this page. For readability, I renamed the ElementID to be the same name as the Anchor / Link that the button points to. i.e. A button that is linked to the anchor "WhatWeDo" has been given the ElementID "# WhatWeDo".
N.B. The page name is not important. You could call your page anything you like. In fact, there is no reason I can currently see why a variation of the code below could not appear on every WiX page if you altered the code to not assume that an external or valid variable will always be passed. i.e. Make the default action to always load the base URL unless a valid variable/anchor reference is passed.
"WhatWeDo" is different to "whatwedo" - the latter would fail and be redirected to our custom 404 page.
In creating the "redirect-to" page, I put one button on the page and linked to it our home page first. Then copied that button until I had twenty buttons in total. Spaced them out neatly, hid them etc. i.e. We can cope with up to 20 unique redirects on this page. Could add more buttons, could have less buttons.
The "redirect-to" page itself is just a place holder. You could actually put this code on any page and use any Element that you know the ID for and which can have a valid link associated with it. A picture menu with each picture linked to a specific destination? Every page on your site could handle anchor redirects. This might be useful for large/complex sites? Could also be used to create navigable blogs if you broke large blogs down into multiple individual blog posts.
Thank you for your contribution.
Moving this post to Tips, Tutorials, Examples.