Clickable download buttons only for site members

Wanting to have a button to be a clickable download link (PDF) but only for signed up site members.

Is this possible in wix studio? Would need a popup informing users that only members can download / click the button. Thanks

You would need to write some code. If logged in, enable button.

https://dev.wix.com/docs/velo/api-reference/wix-members-frontend/authentication/logged-in

https://dev.wix.com/docs/velo/api-reference/wix-members-frontend/authentication/prompt-login

You will most likely need to adjust the logic flow though. Since you cannot link the button to something AND code the button. You will most likely need to do some sort of onClick of loggedin redirect to pdf URL (or initiate download) or else prompt login then on Login redirect or initiate download.

It’s codable, just a bit complex to explain without a little more context on your setup. At this point it would just be a guessing game to point you in the right direction.

Hi, user3965 !!

I wanted to try it out myself, so I gave it a shot. I think this should work for now! Please make any improvements on your own! :wink: :+1:

I used a method where the page is reloaded once after the login process, but if anyone knows a better solution, please let me know. :thinking:

// frontend

import { getPdfDownloadUrlFunction } from "backend/getDownloadUrl.web.js";
import { authentication } from "wix-members-frontend";
import wixLocationFrontend from "wix-location-frontend";

$w.onReady(async function () {

    try {

        const isLoggedIn = authentication.loggedIn();

        if (isLoggedIn) {

            $w("#downloadButton").label = "You can download!";

            try {
                const downloadLink = await getPdfDownloadUrlFunction(0);
                $w("#downloadButton").link = downloadLink;
            } catch (error) {
                console.log(error);
                $w("#downloadButton").label = "Error fetching download link.";
            }

        } else {

            $w("#downloadButton").label = "You can't download...";

            $w("#downloadButton").onClick(() => {
                authentication
                    .promptLogin({ mode: "login", modal: true })
                    .then(() => {
                        wixLocationFrontend.to(wixLocationFrontend.url);
                    })
                    .catch((error) => {
                        console.log(error);
                    });

            });

        }

    } catch (error) {
        console.log(error);
    }

});

// backend

import { Permissions, webMethod } from "wix-web-module";
import { mediaManager } from "wix-media-backend";

export const getPdfDownloadUrlFunction = webMethod(
    Permissions.SiteMember,
    async (pdfUrlsNo) => {

        const pdfUrls = [
            "wix:document://v1/ugd/abcd1234.pdf/first_document.pdf",
            "wix:document://v1/ugd/efgh5678.pdf/second_document.pdf",
            "wix:document://v1/ugd/ijkl9101.pdf/third_document.pdf"
        ];

        const myFileDownloadUrl = await mediaManager.getDownloadUrl(pdfUrls[pdfUrlsNo]);
        return myFileDownloadUrl;

    }
);


1 Like

It really all depends on how they have everything setup so you can’t really write a code for them to “use”. (And you really shouldn’t be just creating code for free. They will expect free every time, they won’t learn anything, they will not attempt to create the code on their own, etc etc etc. )

Their setup could be anything……

For example, they could have a button within a blog post ——- not codable.

They could have a regular page with a button —- codable.

They could have multiple download buttons on a regular page —— codable.

They could have a button on b a lightbox —— codable.

They could have a repeater on a regular page connected or not connected to a database—- complicated but codable.

They could have a repeater on a dynamic page connected or not connected to a database—— codable,

And so on and so on.

One must first understand the entire context and their setup because the approach to the solution will be immensely different in different use case scenarios.

It’s not a race to create a code, it’s a matter of obtaining enough information to slowly navigate them to a solution that could possibly work for their specific scenario.