Hi,
I want to allow members to save pages. I found this article: https://www.wix.com/velo/forum/coding-with-velo/allow-users-to-save-pages-unsolved , but I didn’t understand @admin-23 's answer.
Here’s a clearer explanation of what I want to do:
-
On a page there is a button (say button1)
-
When button1 is clicked, then there are one of two scenarios: a) if the user is logged in, then the page is saved in a dataset which is linked to them as a member, and they can access the page later from a profile page of some sort; b) if the user is not logged in, then it prompts a login.
Is this possible?
Thanks,
Ajani
Yes, this can be done.
Do you use a custom Log-In?
This is my code without using a custom login (I created a workaround):
import wixData from 'wix-data'
import wixUsers from 'wix-users'
$w.onReady(function () {
wixUsers.onLogin( (user) => {
let userId = user.id
wixData.query('collectionTest')
.eq('_id', userId)
.find()
.then( (results) => {
if(results.items.length === 0) {
let toInsert = {
'_id': userId
}
wixData.insert('collectionTest', toInsert)
console.log('hi') //this was just for my testing purposes
}
})
})
if(wixUsers.currentUser.loggedIn === true) {
$w('#text192').onClick( (event) => {
let toUpdate = {
'_id': wixUsers.currentUser.id,
'status': true
}
wixData.update("collectionTest", toUpdate)
.then( (results) => {
let item = results; //see item below
console.log(item)
})
})
}
});
I didn’t save pages, I updated a boolean status to true, but it would be the same principle, right? Basically I created an item for each new member with the item id being the member id, and then when I called a function (the text onClick), I got the id of the current user and used that to identify the correct item.
@Velo-Ninja what I’m confused about is how to store multiple links (all saved pages) in a single field, and then display all of those on a profile page.
Store something MULTIPLE in something SINGLE…
let mySingleArray = [ ]
Now, let put some MULTIPLE VALUES into the SINGLE-ARRAY…
mySingleArray.push(“value1”)
—> [“value1”]
mySingleArray.push(“value2”)
—> [“value1”, “value2”]
mySingleArray.push(“value3”)
—> [“value1”, “value2”, “value3”]
At the end, what do you have?
A —> single-array ???
With–> multiple-values ???
Surely you will also have the possibility to set one of your DB-fields-type as → “array”.
The same way, you could use the tags-field, for multiple entries in your db.
@russian-dima THank you that is very helpful! How would I display that array as individual links on a page?
Get first value of array → myArray[0]
Get sec…value of array → myArray[1]
Get 3rd…value of array → myArray[2]
…ans so on …
console.log(myArray[0])
console.log(myArray[1])
console.log(myArray[2])
…
…
.
@russian-dima Thank you, but let’s say I have a different number of elements in each item’s array. So in item 1 I have 0-3 and in item 2 I have 0-4 indicies. How can I display on a page all of them? does that make sense?
I found this array to repeater forum post: https://www.wix.com/velo/forum/coding-with-velo/array-to-repeater. However, @ahmadnasriya 's answer didn’t make sense to me. However, this illustrates what I’m trying to do clearly than I was saying: how can I show this array in a repeater?
Figured it out. Thanks @russian-dima for all your help! Here is my code:
On masterpage.js:
import wixLocation from 'wix-location'
import wixUsers from 'wix-users'
import wixSite from 'wix-site'
import wixSeo from 'wix-seo'
import wixData from 'wix-data'
import {session} from 'wix-storage'
import {saveButton} from 'public/saveButton.js'
if(wixUsers.currentUser.loggedIn) {
$w('#button117').label = 'Profile/Logout'
}
export function button114_click(event) { //button114 is the save button
if(wixUsers.currentUser.loggedIn) {
let currentPage = wixSite.currentPage
let pageName = ''
if(currentPage.type === 'static') {
pageName = currentPage.name
}
else {
pageName = wixSeo.title
}
saveButton(wixLocation.url, pageName)
}
else { //this allows the page to still be saved once the user logs in so that they don't have to go back and click save again
session.setItem('accountNeeded', 'true')
session.setItem('previousUrl', wixLocation.url)
session.setItem('savedUrl', wixLocation.url)
let currentPage = wixSite.currentPage
let pageName = ''
if(currentPage.type === 'static') {
pageName = currentPage.name
}
else {
pageName = wixSeo.title
}
session.setItem('savedPage', pageName)
wixLocation.to('/login-signup')
}
}
export function button117_click(event) { //this is the login/signup button. The session storage allows there to be an "X" on the page which directs the user back to the most recent page.
wixLocation.to('/login-signup')
session.setItem('previousUrl', wixLocation.url)
}
The saveButton function:
import wixData from 'wix-data'
import wixUsers from 'wix-users'
export function saveButton(url, pageName) {
let updateLinksArray = []
let updatePageTitleArray = []
wixData.query('Members')
.eq('_id', wixUsers.currentUser.id)
.find()
.then( (results) => {
let items = results.items
if(items.length > 0) {
updateLinksArray = items[0].savedPageLinks
updatePageTitleArray = items[0].savedPageNames
}
updateLinksArray.push(url)
updatePageTitleArray.push(pageName)
let toUpdateLinks = {
'savedPageLinks': updateLinksArray,
'savedPageNames': updatePageTitleArray,
'_id': wixUsers.currentUser.id
}
wixData.update("Members", toUpdateLinks)
.then( (results) => {
let item = results
})
})
}
On Login/Signup/Logout page:
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {session} from 'wix-storage'
import {saveButton} from 'public/saveButton.js'
$w.onReady(function () {
$w('#button114').collapse()
if(wixUsers.currentUser.loggedIn) {
$w("#loginButton").label = "Logout";
$w("#profileButton").show();
wixUsers.currentUser.getRoles()
.then( (roles) => {
if (roles.length > 0 && roles[0].name === 'Staff') {
$w('#button89').expand()
}
})
}
else {
$w("#loginButton").label = "Login";
$w("#profileButton").hide();
$w('#button89').collapse()
}
});
export function loginButton_click(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginButton").label = "Login";
$w("#profileButton").hide();
$w('#button89').collapse()
} );
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( {"mode": "login"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.then( (results) => {
console.log(results)
})
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginButton").label = "Logout";
$w('#button117').label = 'Profile/Logout'
$w("#profileButton").show();
wixUsers.currentUser.getRoles()
.then( (roles) => {
if (roles.length > 0 && roles[0].name === 'Staff') {
$w('#button89').expand()
}
})
if(session.getItem('accountNeeded') === 'true') { //this allows the automatic save once the user has signed up
session.removeItem('accountNeeded')
saveButton(session.getItem('savedUrl'), session.getItem('savedPage'))
}
$w('#text193').collapse()
})
}
}
export function image14_click(event) {
wixLocation.to(session.getItem('previousUrl'))
}
export function profileButton_click(event) {
let url = '/members/' + wixUsers.currentUser.id
wixLocation.to(url)
}
Hope this helps someone in the future! Any tips on shortening code greatly appreciated.
Looks good, the most important thing is → that it works for you.
You made good progress! Well done!
Hey guys, do you have a demo of this in action?