Hello
I am a music producer and artist, and I’m trying to create a basic website. I have never coded a website before, but have dabbled in coding. My issue is coding my download button to do two things. The first thing I want my button to do is download a .zip file from the Dynamic Dataset. The second thing is to show a light box that says, “Thanks For Downloading!” I can get the Light Box to show, but a download doesn’t start. I’ve tried following Nayeli’s (Code Queen) videos, but sadly it didn’t help. This is the code I’ve tried:
import wixWindow from 'wix-window';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
let source;
$w.onReady(() => {
$w('#button4').onClick(() => {
let item = $w('#vitalDynamicDataset').getCurrentItem();
let soundPack = item.packFiles;
let url = soundPack.split("/")[3];
let filename = item.vitalNote;
wixLocation.to('https://static.wixstatic.com/media/${url}?dn={filename}');
$w('#button4').disable()
$w ('#button4').label = "Downloaded"
wixWindow.openLightbox('TFD');
})
})
Screenshots of my site to help visualize the idea:
Here is a quick update about my problem. I went ahead and published my website. After clicking the download button, the page returns with a Forbidden screen. I did change the url to match what all of my .zips would match, now I’m confused about how to get the file to start downloading. I can’t post the code with the changed url, because Code Snippet isn’t allowing me for some reason. Can anyone help me?
Okay final update, hopefully. I got it to work! The code in the original post was actually good except for the wixLocation. I went to Nayeli’s (Code Queen) website she had linked in one of her videos, and decided to copy the code she had there. One of the biggest things that I’m questioning is the ${url} and ${filename}. In her code that I did a copied and pasted had those parts look like normal black lines of code and not pink. Every time I typed it out myself, that part would always be pink. Anyway, that updated part caused the Forbidden screen to appear, but the url changed. It showed the actual file it was trying to access. I managed to make it work by remove everything in the .to() part except the ${filename}. The file downloaded and showed the Light Box.
For anybody who comes across this post, this is what my code looks like (altered for general naming). Make sure to change everything that is unique to your naming scheme such as button, item. file, the let names (can be whatever you want), and $w("# dynamicDataset). You may not need the item. note. It depends on your Dataset. I hope it helps for others :
import wixWindow from 'wix-window';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
let source;
$w.onReady(() => {
$w('#button1').onClick(() => {
$w("#dynamicDataset").onReady( () => {
//assign the hasDoc variable the value of the field that holds the document in the current item of the dataset.
let item = $w('#dynamicDataset').getCurrentItem();
let soundPack = item.note;
let url = soundPack.split("/")[3];
let filename = item.file;
wixLocation.to(`${filename}`);
$w('#button1').disable()
$w ('#button1').label = "Downloaded"
wixWindow.openLightbox('TFD')
});
})
})
1 Like
One issue that I see is that you are incorrectly using a dataset onReady() function inside of an onClick() event handler.
$w('#button1').onClick(()=>{
$w("#dynamicDataset").onReady(()=>{
The only place that the onReady() is needed is inside of the page’s onReady() function, when you need to perform actions right after the dataset has loaded its data from the collection and updated all connected page elements with their corresponding values.
Otherwise, the code won’t run as you expect it to with a dataset onReady() inside of an event handler.
Hey, have you solved this? Im having the same issue.
