[Solved] Button that links to a random dynamic page

Ask the community
,
1

Hello! I know this question has been asked several times on the forum, but I haven’t been able to find a solution in any of the previous threads. What I’m looking to do is create a button that when pressed opens a dynamic page randomly selected from a wix collection. I have my collection set up, and I have a field in that collection for the dynamic page URLs. From looking through the forum I know the next step is to code an onClick event for the button that runs a wixData query of the collection and randomly sets the target URL of the button to one of URLs from that field in the collection. Unfortunately, despite having this general outline I’m not sure how to execute it in the code itself.

How do I make my code select a random entry from the collection field and then how do I set that entry as the target URL of the button?

Thank you!

1 Like
2

START:

$w.onReady(()=>{
    $w('#myButton').onClick(()=>{
      YOUR CODE FOR RANDOM-VALUE HERE  
    })
})

Take a look here for ramdom-values…
https://russian-dima.wixsite.com/meinewebsite/random-numbers-strings

3

Thank you @russian-dima ! Update to say the following code works:

let allUrls = [
 'https://www.mehelle.org/listpage/MurtuzaMuxtarov15',
 'https://www.mehelle.org/listpage/AlovsatQuliyev45',
 'https://www.mehelle.org/listpage/AlovsatQuliyevDalan2',
 'https://www.mehelle.org/listpage/AlovsatQuliyevDalan3'
];
 
export function button9_click(event) {
let randomIndex = Math.floor(Math.random() * (allUrls.length - 1));
   $w('#button9').link = allUrls[randomIndex];
wixLocation.to($w("#button9").link);
}

At this point I could technically accomplish my goal by putting in the URLs for all of my dynamic pages in the ‘allUrls’ section, however, that would make this section of code over 400 lines long and difficult to update. What would be great would be to somehow set ‘allUrls’ to equal the field in my collection that houses all these URLs and have it draw from that. I’ve tried to use a wixData query to do this, but haven’t had luck so far. I was messing around with variations of this:

let allUrls = [
wixData.query("listpage")
  .contains("ListPageLink", "list")
  .find()
  .then()
];

but I know its incomplete, I’m just not sure how to make the results connect to the button as a proper URL. Any ideas on this would be greatly appreciated, in the meantime at least the other way works, though I’m sure a cleaner version is possible.

4

SOLVED! So for anyone looking for this in the future, there are two ways to make this work. One is the code I mentioned before:

let allUrls = [
'https://www.mehelle.org/listpage/MurtuzaMuxtarov15',
'https://www.mehelle.org/listpage/AlovsatQuliyev45',
'https://www.mehelle.org/listpage/AlovsatQuliyevDalan2',
'https://www.mehelle.org/listpage/AlovsatQuliyevDalan3'
];
 
export function button9_click(event) {
let randomIndex = Math.floor(Math.random() * (allUrls.length - 1));
   $w('#button9').link = allUrls[randomIndex];
wixLocation.to($w("#button9").link);

This works great if you just have a select few pages you want to randomly link to, or if you’re not using dynamic pages. If you are using dynamic pages the following which I found here works:

import wixData from'wix-data';
let Links=[]; // global value

// ...

wixData.query("listpage")
  .find()
  .then( (results) => {
   results.items.forEach((item)=> {
 let link = item.ListPageLink
     Links.push(link)
   })

  } )
  .catch( (error) => {
 let errorMsg = error.message;
 let code = error.code;
  } );
 

export function button9_click(event) {
let link = Links[Math.floor(Math.random()*Links.length)];
  wixLocation.to(link); 
}

listpage = my collection name

item.ListPageLink = the field key of the field in the collection I want to be queried and use as my page links

I’ve altered the code slightly from the original. Because the field in my collection contains complete URLs already, I changed

let link ="/"+ item.product

to

 let link = item.ListPageLink

because the value does not need to be reformated to be a link.

Huge thanks to all that helped! Hope in the future this answer can be a useful reference as well!

5

Well done! You got a like!

6

we need to add

import wixLocation from 'wix-location';

for wixLocation.to (Link) to work