So, I am aware of the code for first time popup lightboxes, and I entered this on my website. This is a “welcome” lightbox that will appear everytime a NEW MEMBER access this members only page “my account”.
Now, if two different members acess in the same computer/browser that page, the second new member will not see the pop up right? Because the flag has been placed on the browser.
What can I do to have the lightbox showing up for every user on a specific page when they see that page for the first time?
Here is the code I have at the moment on “my account” member page:
$w.onReady( function () {
//TODO: write your page related code here…
if (wixWindow.rendering.env === “browser”) {
// flag is not found
if (!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“welcome”);
// set flag for future visits
local.setItem(“firstTimePopupShown”, “yes”);
}
}
$w("#wixVisitors1").show();
});
Hello Daniela,
Yes you’re right, the second new member will not get the pop up because the browser saved the flag.
It also wont act as you wish if the old member opens his account from new browser, right ? local will not be the same as the first browser he used. So, better way to do is to create new item in the Data Base with Boolean value and then you only check if its true or false to show/not show the pop up and change that value after showing it.
Hope this helps you.
Best,
Mustafa
Oh, that’s a great idea, thank you so much Mustafa!
I am confortable with working with Data Bases, but terrible at coding.
Could you possibly guide me on how to set this lightbox appearing only when the Boolean value is true? (I have no idea how to write this on the page)
You welcome,
Here is a snippet code that you can use. How it works ?
Create new data set (i called it oldUsers in the code) with an item called userId, this data set will contain only the IDs of members who visited the site before, so any member id in this DS will not see the lightBox again.
Also, if the id is not there, the lightBox will be shown and the id will be added/inserted to that Dataset so that next time that id will not see the lightbox.
import wixUsers from 'wix-users';
import wixData from 'wix-data';
$w.onReady(function () {
let user = wixUsers.currentUser;
wixData.query("oldUsers")
.eq("userId", user.id)//check if the user id exist
.find()
.then( (results) => {
if(results.items[0]){ //if the user id exist
console.log("Not the first time, hide lightBox");
$w("#lightBox").hide();
}
else { //if the user id doesn't exist
console.log("First Time => ID doesn't exist, lightBox is shown and id has been added to DB");
let toInsert = {
"userId": user.id,
};
wixData.insert("oldUsers", toInsert) // user id added to the DS
.then((res) => {
let item = res;
console.log("inserted successfully");
})
.catch((err) => {
let errorMsg = err;
});
}
} )
.catch( (err) => {
let errorMsg = err;
} );
});
Let me know if you have any questions.
Good Luck.
Mustafa
Hi Mustafa thank you sooo much for this, this is really helpful! What do I need to do if I want it to show according to a Boolean value like you mentioned previously? The thing is that I have certain details that a first time logging member should fill out, and using a Boolean value can help me out to show the lightbox until they fill those details in a more precise way 
In this case, add a boolean value in the same data set ( oldUsers ) i called it detailsFilled , then add another condition to the Query, so your code should look something like this:
wixData.query("oldUsers")
.eq("userId", user.id)//check if the user id exist
.eq("detailsFilled", true) // check if the details is filled out (True)
.find()
.then( (results) => {
if(results.items[0]){ //if the user id exist and the detailsFilled is True
console.log("Not the first time,and details filled before");
$w("#lightBox").hide();
}
Note that you have to store the boolean value for the member who filled the details.
- just after submission/filling the details, get the user id and insert it to the DS and turn the boolean value to True.
Best,
Mustafa
Hi Mustafa! Thank you for helping me out. I have changed the code, and now this is looking like this:
import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
$w.onReady( function () {
let user = wixUsers.currentUser;
wixData.query(“oldUsers”)
.eq(“:_id”, user.id)//check if the user id exist
.eq(“detailsFilled”, true ) // check if the details is filled out (True)
.find()
.then( (results) => {
if (results.items[0]){ //if the user id exist and the detailsFilled is True
console.log(“Not the first time,and details filled before”);
$w(“#lightBox”).hide();
}
} );
The lightbox is showing up to everybody, even to those who have got the booleam value true.
This code is on my page, and not on my lightbox (not sure if this is the cause).
I have changed the “usersID” to “_id” as this is the item on my DB that contains the user ID. Not ure if I was supposed to do this or not. The lighBox I am not sure if I have to change that to the actual name of the lightBox, or if I am suupposed to leave it as “lightBox”.
Finally, since there is no coding to now show the lightbox, I should make that appearing automatically, right?
Hi Daniela,
Yes , i used usersID so you can change it to the same ID you are using in your DB.
$w(" #lightBox ").hide(); ==> LightBox ID should match the ID of your light box.
You right, because we only hide the lightbox when its not the first visit for the user, we let the default state ( shown ), Hidden onLoad check box => unchecked .
Just to be sure, if you copied and paste this code, i can see a " : " at the beginning of your user ID, and that could be the reason why that query is not working fine.
.eq(":_id", user.id)// :_id INSTEAD OF _id
Hope this can help you.
Best,
Mustafa
Oh, I didn’t noticethe “:” on the id.
At the moment, the lightbox is still appearing all the times.
This is the code I have now:
import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
$w.onReady( function () {
let user = wixUsers.currentUser;
wixData.query(“oldUsers”)
.eq(“_id”, user.id)//check if the user id exist
.eq(“detailsFilled”, true ) // check if the details is filled out (True)
.find()
.then( (results) => {
if (results.items[0]){ //if the user id exist and the detailsFilled is True
console.log(“Not the first time,and details filled before”);
$w(“#lightbox1”).hide();
}
} );
});
(THIS IS THE WHOLE CODE OF MY PAGE, I DON’T HAVE ANYTHING ELSE ADDED)
since “#lightbox1” on the “my account” page is saying that it is not a valid sector, I placed this code on the lightbox instead, but it is still showing the lightbox to everybody. - I am not sure if this should be on the page or at the lightbox (where it doesn’t give me any error).
Finally, if I click “show properties” of the lightbox, it doesn’t show the “hidden onLoad”, only the “collapsed on load”, which is unchecked. For the lightbox to appear in the desired page (my account), I have set triggers so that the lightbox automatically displays on “my account” page.
Seems like something is missing in your site that makes the query not working!
Are you sure you have the DB called " oldUsers" ? and the field “detailsFilled” in it ?
