How to link button to new URL using collection field ON CURRENT PAGE

Ask the community
,
1

Hi all,
My friend and I have been trying to create a dynamic page where a button uses a URL field from a collection to determine where it goes. Think of it a bit like a book where every page of the book is a different item/page within the dynamic page and the button takes you to the next page.
Now, we have been able to achieve this, BUT, only in the form of a new tab. As you can imagine, this will create problems and annoyances for any user if they have a tab open for every page of the book. I’ve attached a couple images to aid this explanation. Please let me know if there’s anything else that would be beneficial to know.

Thanks in advance

1920×936 53.4 KB

1920×940 78.7 KB

2

Hi!

I see you have an online book of sorts with different outcomes and would like to keep each page opening in the same tab when buttons are clicked.

You can do this with the to() function in the wix-location API. The to() function directs the browser to navigate to the specified URL. To learn more about this function and the wix-location API please click here .

If you are sending someone to another page on your site you use the following link pattern: /localPageURL.

So for example. you could create an onClick function for one of your option buttons and add the following code;

import wixLocation from 'wix-location';

// ...

wixLocation.to("/about-me");

You will change the “/about-me” to the local page URL for whatever dynamic page you wish to link to. For dynamic pages see the Page Info tab of the Page Settings panel for the URL structure. The actual URL used for navigation needs to contain values where the placeholders are.

For example, if the URL structure of your dynamic page looks like:

and you have an item with the title “Waffles”, the local URL to that page is /Recipes/Waffles.

Have a great day!

Dara | Corvid Team.

3

Hello IOTG :raised_hand_with_fingers_splayed:

I can see what your problem is.
Are the URLs on your own website or they are external?

Use this code to open the link in the same tab:

$w("#myElement").link = item.option1;
$w("#myElement").target = "_self";

And if the URLs are on your own website, change their values to contain only the prefix, for example, your website is:

www.mydomain.com/test-page
Then save the value as “/test-page”, and the link should be like this:

$w("#myElement").link = item.option1; // "/test-page"
$w("#myElement").link = "/test-page";

Hope that helped!
Ahmad