Random website redirecter from database

Ask the community
1

Hi, please advise. I have a classic button on the website named “take off”, and I need when the user clicks on that button, it redirects him randomly to one of the 10 websites that I have in the database named “Weblinks”, I try different codes and solutions and I just it doesn’t work

2

not only is it not possible from the database, but it’s also not possible if I add a button to an empty page and enter code via dev mode, nothing happens. I just want the link to open when the button is clicked. When I enter it directly on the button, it works, but not through dev mode.

3

Assuming you have a CMS with URLS saved in the CMS I would follow a structure like this:

import wixData from 'wix-data';
import wixLocationFrontend from 'wix-location-frontend';

let dataUrls = []

$w.onReady(function () {

    getWebsiteUrls()
    eventHandlers()

});

async function getWebsiteUrls() {
    const getData = await wixData.query('collectionName').limit(1000).find()
    const { items } = getData
	if (items?.length > 0) dataUrls = items
}

const eventHandlers = () => {
	$w('#takeOffButton').onClick((e) => handleTakeOffClick())
	// other event handlers if needed
}

const handleTakeOffClick = (event) => {
	// grab a random index from dataUrls query
	const start = 0
	const end = dataUrls.length - 1 
	const randomIndex = getRandomIndex(start, end)
	wixLocationFrontend.to(dataUrls[randomIndex]?.url) // ".url" is supposed ot be your object key name
}

function getRandomIndex(min, max) {
	  return Math.floor(Math.random() * (max - min + 1) + min)
}

You obviously need to make some changes to your element, collection, and object key names but this would do the trick.

Wix Location will open the link in the same tab, however. If you need to have it open in a new tab, you would need to set the button target url before they click the button.

1 Like
4

everything works as it should, but I can’t make the links open in a new window

5

Then you would not use wixLocation.to(). You would need to set the button target and link before the click event takes place. Something like this:

import wixData from 'wix-data';

let dataUrls = []
let currentIndex

$w.onReady(function () {

    getWebsiteUrls()
    eventHandlers()

});

async function getWebsiteUrls() {
    const getData = await wixData.query('collectionName').limit(1000).find()
    const { items } = getData
    if (items?.length > 0) {
        dataUrls = items
        setButtonUrl()
    }
}

const eventHandlers = () => {
    $w('#takeOffButton').onMouseIn((e) => updateLinkTarget()) // if the click handler overrides use onMouseIn instead
    // other event handlers if needed
}

const setButtonUrl = (event) => {
    // grab a random index from dataUrls query
    const start = 0
    const end = dataUrls.length - 1
    const randomIndex = getRandomIndex(start, end)
    $w('#takeOffButton').link = dataUrls[randomIndex]?.url
    $w('#takeOffButton').target = '_blank'
	currentIndex = randomIndex
}

function getRandomIndex(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}

const updateLinkTarget = () => {
    const start = 0
    const end = dataUrls.length - 1
    const randomIndex = getRandomIndex(start, end)
    if (randomIndex !== currentIndex) {
        $w('#takeOffButton').link = dataUrls[randomIndex]?.url
        $w('#takeOffButton').target = '_blank'
	currentIndex = randomIndex
    } else {
		// make sure index does't repeat back to back
		randomIndex === end ? currentIndex = randomIndex - 1 : currentIndex = randomIndex + 1 


		$w('#takeOffButton').link = dataUrls[currentIndex]?.url
        $w('#takeOffButton').target = '_blank'
	}
}

Check to see if the event handler does not override the actual opening of the link. Code’s pretty similar.

The updateLinkTarget Function is supposed to generate a random url for the button each time it’s clicked. Otherwise the URL will not update after the first time.

1 Like
6

Love this solution @oakstreetassociates! Nothing better than a good getRadom function :muscle:

1 Like