Display document in a new tab using wix code

Discussion Ask a question
,
1

When a user clicks a button, I want a document to display in a new browser tab. I also need to check that the user is logged in. The below code works EXCEPT it displays the document in the same browser tab. This is bad because the user normally just closes the tab and therefore the website. NOTE: in the code below, the login check works and if necessary displays the login, and the document then displays in either case - but always in the same tab.

Obviously, if wixLocation.to had a target parameter, this would definitely solve this problem. But it doesn’t exist. So, instead I assigned target=“_new” to the button but this does not work. I can’t just simply assign a link to the button, because after the user browses the (available to public) titles and descriptions, then selects to view one by clicking it’s button, I need to verify that this is a valid user before displaying the document.

So, how do I get the document to display in a new browser tab? What is wrong with the following code?

export function btnWalterFlato_click(event) { //the story
//require a login to view this story. Call the generic shared module public/isLoggedIn.js.
if (validUser() ){
$w(“#btnWalterFlato”).target = “_new”; //DOES NOT display story in a NEW browser tab
wixLocation.to(“https://docs.wixstatic.com/ugd/8a7fb1_f04d0abaf69f43f49156d46c9311dfc4.pdf”);
}
else {
// prompt the user to log in
wixUsers.promptLogin( {“mode”: “login”} )
.then( (results) => {
$w(“#btnWalterFlato”).target = “_new”; //DOES NOT display story in a NEW browser tab
wixLocation.to(“https://docs.wixstatic.com/ugd/8a7fb1_f04d0abaf69f43f49156d46c9311dfc4.pdf”);
})
}
}

2

target and wixLocation don’t work together.

Try something like:

function setLink() {
  $w("#btnWalterFlato").link =  "https://docs.wixstatic.com/ugd/8a7fb1_f04d0abaf69f43f49156d46c9311dfc4.pdf";
 $w("#btnWalterFlato").target = "_blank";
}
$w.onReady(() => 
 if(validUser()){setLink();}
 else  {
  wixUsers.promptLogin()
 .then(setLink());
}
})
3

J.D. thanks for the help. I created the setLink function, then put the code to check for validUser/call setLink in the button handler. It sort of works but with some quirks.

Quirk one: if the user IS logged in and clicks the button - nothing happens, HOWEVER, if they click the button a second time then the document opens in a new tab. Then, if they close the tab then click the button again - it works. So, why does the user have to INITIALLY click the button twice?

Quirk two: if the user is NOT logged in and clicks the button, the document IMMEDIATELY appears in a new tab. Wierdly, when the user closes the tab THEN the login prompt appears.

One more think I tried. I called setLink initially in the onReady function (which basically, preloads the document). If the user is automatically logged in, then when the user clicks the button it works the first time. However, if the user is not automatically logged in, the same issue occurs - document is first displayed followed by the login prompt AFTER the tab is closed. This sounds similar to a promise issue - but it is inside a then clause.

I am trying to avoid putting the login check/prompt in onReady because much of the website is public and does not require a login.

Any additional ideas on solving one or more of the above quirks?

Here is the updated code:

export function setLink() {
$w(“#btnWalterFlato”).link = “https://docs.wixstatic.com/ugd/8a7fb1_f04d0abaf69f43f49156d46c9311dfc4.pdf”;
$w(“#btnWalterFlato”).target = “_blank”;
}

export function btnWalterFlato_click(event) { //the story
//require a login to view this story. Call the generic shared module public/isLoggedIn.js.
if (validUser() ){
setLink();
}
else {
wixUsers.promptLogin( {“mode”: “login”} )
.then (setLink());
}
}

4

@lmacklin You used a combination of your code and mine. That’s why the user has to click twice.
While I set the link once the $w is ready, you set it only on click (inside an export function btnWalterFlato_click function).
Delete your entire code and copy&paste mine, then let me know if it worked.

5

I ran the code as you stated. Upon page load, it prompts the user to log in. Then, when the user clicks on the button on the page it does work correctly. However, a new issue can occur: if the user chooses not to log in when the page loads (that is, clicks the X and closes the login box) then clicks the document button - it displays the document even thought the user is not logged in.

What do you think?

6

What exactly is validUser() ?

7

Just a simple shared javascript in the public folder that can be called from any page where I need to know whether or not the user is a member.

// Filename: public/isLoggedIn.js
import wixUsers from ‘wix-users’;

//check if current user is loged
let loggedin = wixUsers.currentUser.loggedIn;

export function validUser() {
if (loggedin) {
//user has a valid Wix account (user IS a member)
return Boolean( true );
}
else {
//user DOES NOT have a valid Wix account (user IS NOT a member)
return Boolean( false );
}
}

8

I don’t why you’re havig this issue but try:

else {
   wixUsers.promptLogin()
    .then (() => {setLink();})
    .catch(() => {  $w("#btnWalterFlato").link = "/currentPage";//put the path for the current page instead
    $w("#btnWalterFlato").target = "_self";
     });
    }

Maybe it’ll work.

9

By the way, you can also try making the function shorter:

function validUser() {
if (loggedin) { return true; }
    return false;
}
10

I ran the code as you expressed. Upon page load, it prompts the client to sign in. At that point, when the client taps on the catch on the page it works effectively. In any case, another issue can happen: if the client decides not to sign in when the page http://gg.gg/flasz stacks (that is, taps the X and shuts the login box) at that point taps the archive button - it shows the report even idea the client isn’t signed in.

What do you think?

11

I don’t know, but you can try this code instead:

import wixUsers from 'wix-users';
let isLoggedIn  = wixUsers.currentUser.loggedIn;
function setLink(){
  $w("#btnWalterFlato").link =  "https://docs.wixstatic.com/ugd/8a7fb1_f04d0abaf69f43f49156d46c9311dfc4.pdf";
 $w("#btnWalterFlato").target = "_blank";
}
$w.onReady(() => 
isLoggedIn ?  setLink() : wixUsers.promptLogin();
})
wixUsers.onLogin(user => {
  setLink();
} );
12
  • Needless to say you should be sure the button is not linked via the editor.
13

The button is not linked in the editor. The code you sent last night and the other variations this morning all result in the same result: If the user cancels the login prompt at page load, then goes to the page and clicks the button to view the document, nothing happens. This fixed the issue of displaying the document without being login in. However, it does not display the login prompt so the user can actually log in and then view the document.

J,D, I really appreciate all your effort here. You have presented some really good alternatives and given me some things to play around with. I will continue to work on this and will update this post if I solve it.

14

I think the problem is the login prompt needs to be in the button handler. So, I will try some alternatives here.

15

J.D. I have given up for now on trying to get this to work. As a workaround, in the button handler, I will check if the user is logged in: if no, display a lightbox stating a login is required; if yes, then display the document in the current tab and simply put a link in each document that will take them back to the website page.

Hopefully, in the near future Wix will add a target parameter to the wixLocation.to function.
Thanks for all your help in trying to solve this!!!

16

I think I don’t really understand what exactly you experience there. You can try to make it clearer and maybe I’ll be able to advise.

17

In a nutshell, here is what I want to accomplish. A page viewable by anyone that shows a bunch of genealogy-based stories with their titles, brief descriptions, authors, etc. Each of these stories has two buttons associated with it: One to view the Story (a pdf document), and the other to view all the photos that accompany the story (each story has its own photo portfolio page which is working fine). Some people will google and find our genealogy-based stories page and then hopefully want to view them as they may relate to their own ancestors. However, in order to view the stories they need to pay a $15 annual membership fee (which is handled on a separate Membership page). As part of the new membership process, they acquire a website login. So, when they click one of the story buttons, I need to check if they have a membership (that is, they have successfully logged in), then open the story in a new browser tab.

One of the goals is to use these stories as a recruitment tool to get new members to join once they see the value of these stories (among other benefits). So, I don’t want to prompt them for a login before they have had a change to view the page. This means the loggedin check (and prompt) needs to occur when they actually click on one of the story buttons. And the second important piece is the story then needs to display in a new browser tab.

Probably more information that you needed, but that is the big picture of what I want to do. In the meantime, I changed the code to just display the lightbox to prompt them to log in, then put the link back to the website in each of the documents. Not elegant, but it at least works.

18

If I got you right.
In case the user logged-in → you want the url to get open on click
In case the user is not logged-in → you want the button to prompt logging-in

And that’s all. Right?

So maybe this one will work for you:

import wixUsers from wixUsers;
let isLoggedIn = wixUsers.currentUser.loggedIn;
function setLink(){
  $w("#buuton").link = "/url.com";//your url
  $w("#button1").target = "_blank";
}
$w.onReady(() => {
  if(isLoggedIn) {
  setLink();
  } else {
          $w("#button1").onClick(event =>
              if (!isLoggedIn){
                wixUsers.promptLogin();
           }
      })
    }
 })
wixUsers.onLogin(user => {
  isLoggedIn = true;
  setLink();
});
19

@jonatandor35 We are VERY close to the desired solution. Upon clicking the button, If the user is NOT logged in, they are prompted, but after logging in the document is not displayed. So, it appears the [second] setLink function inside the wixUsers.onLogin function is not triggering the document to display.

This may be because I don’t have the wixUsers.onLogin code in the right place, In your code above, the wixUsers.onLogin is outside of the onReady function so I would expect it would throw an error since it is not inside perhaps an export function…but there is no error. I tried moving the wixUsers.onLogin section to the button onClick handler. I got the same result. I also tried just deleting the button onClick event in the properties panel, but still got the same result.

So, this tells me the code as you have written it above works, but the setLink inside the wixUsers.onLogin doesn’t trigger the document to display.

We are one step away from solving this!

  • Lee
20

@jonatandor35 Here is my code:
let isLoggedIn = wixUsers.currentUser.loggedIn;

$w.onReady( function () {
//TODO: write your page related code here…

if (isLoggedIn) {
setLink();
} else {
$w(“#btnWalterFlato”).onClick(event => {
if (!isLoggedIn) {
wixUsers.promptLogin();
}
})
}

})
wixUsers.onLogin(user => {
isLoggedIn = user.loggedIn;
setLink();
});

//})