Button to download file and redirect to new page onclick

Ask the community
,
1

Hi,
I have a dataset and approximately 70 dynamic pages connected to it - on each page there is a button to download a file relevant to that page/service from the data collection. I want the button to do two things on a single click -

  1. download the connected file
  2. redirect the user to a new ‘thank you for downloading’ page

In my mind this should be something simple as you see it all the time on many sites with downloadable software etc but I am no coder so don’t know how to join the dots.

Cheers.

2 Likes
2

id you ever find a solution to this? I am wanting to do the same but nothing is working.

3

Every already uploaded file should have a stored link somewhere inside of your databsae, right? So all you have to do is to click onto the link to be able to download the file?

So all you have to do is to get the related link by a click onto your wished button, set it as a link onto a button and redirect after download?

$w.onReady(()=>{
	$w('#dynamicDataset').onReady(()=>{
		$w('#myButtonID').onClick(()=>{
			let currentItem = $w('#dynamicDataset').getCurrentItem();
			console.log("CURRENT-ITEM: ", currentItem);
			
			let downloadLink = currentItem['here your DB-FIELD-ID'];
		});
	});
});

Seems like this goes already into the right direction, but something is missing! You get now the LINK out of DB, but you still have to possibility to use it.

So what next?
Next step woud be to add that link onto your wished button, to be able to start the download (belonging to the url).

Can we use an onClick()-event-trigger? —> NO we can’t, because it would be to late when you click.

So we need —> onMouseIn()-event-trigger <— to set the url to the button before we click onto the button to download the file.

$w('#myButtonID').onMouseIn(()=>{
    let currentItem = $w('#dynamicDataset').getCurrentItem();
    console.log("CURRENT-ITEM: ", currentItem);
    $w('#myButtonID').link = downloadLink;
});

Till here your button gets the download-url out of your DATABASE, now your button should be able to start the download, when you click onto the button.

But what is still missing?

EXACTLY —> The redirection function.

This for import the wix-location-api into your page and use…
wixLocation.to(’ ') - method

$w.onReady(()=>{
	$w('#dynamicDataset').onReady(()=>{
	    $w('#myButtonID').onMouseIn(()=>{
            let currentItem = $w('#dynamicDataset').getCurrentItem();
    
    console.log("CURRENT-ITEM: ", currentItem);
    
    let downloadLink = currentItem['here your DB-FIELD-ID']; //--> where you have stored your DOWNLOAD-URL
    
    $w('#myButtonID').link = downloadLink;
		});
	
		$w('#myButtonID').onClick(()=>{
			wixLocation.to('https//:xxxxxxxx.com')
		});
	});
});

But not really sure if this will work 100%…

-maybe a setTimeOut() will be neccessary?