Question:
I would like to have a member page with a drop down menu allowing to filter members based on a field “year”
Product:
Wix Editor
What are you trying to achieve:
THe drop down menu with year choices, would allow filtering the Wix Member list based on a field “year”.
The wix member widget does nor allow such filtering.
Any idea how I could acheive this ?
What have you already tried:
[Share resources, forum topics, articles, or tutorials you’ve already used to try and answer your question.]
Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]
To create a member page with a dropdown menu for filtering members by a “year” field, you can use Wix Velo (developer tools) to customize the functionality since the Wix Members Widget doesn’t support such filtering natively.
We can add a repeater to the member page and query the members database using Velo. By doing this, we can display the member data in the repeater and we can apply multi-filters, such as filtering based on the “year” field. This will require some coding
Thankyou. Do you have example code I could use ?
What I want to say is: Make sure that everything has the correct ID, like the repeater, dropdown, database, and everything else. Ensure that the code is placed on the member page.
import wixData from ‘wix-data’;
$w.onReady(() => {
// Query the database on page load
loadMembers();
// Set up a change event listener for the year dropdown
$w('#yearDropdown').onChange(() => {
loadMembers();
});
});
function loadMembers() {
const selectedYear = $w(‘#yearDropdown’).value; // Get the selected year
let filter = wixData.filter();
// Apply the year filter only if a value is selected
if (selectedYear) {
filter = filter.eq('year', selectedYear); // Replace 'year' with your database field key
}
// Query the members database with the applied filter
wixData.query('Members') // Replace 'Members' with your database collection name
.filter(filter)
.find()
.then(results => {
if (results.items.length > 0) {
// Populate the repeater with the queried data
$w('#repeater1').data = results.items;
// Set up item-specific actions
$w('#repeater1').onItemReady(($item, itemData) => {
$item('#memberName').text = itemData.name; // Replace 'name' with your field key
$item('#memberYear').text = itemData.year.toString(); // Replace 'year' with your field key
// Add more fields as needed
});
} else {
// Handle no results
$w('#repeater1').data = [];
}
})
.catch(err => {
console.error('Error querying members:', err);
});
}
1 Like
Thankyou very much I will give it a try and come back to you.
1 Like
First I have imported a cvs file into contacts to make my member list. But is seems it does not take the year field as it is a specific field.
Is there a way to add that field to the wix predetermined fields of the member list ?
Unfortunately, the Wix predefined member fields, like those in the Contact List or Site Members, are fixed and cannot be directly customized to include new fields like “Year.” However, there is a workaround to achieve this functionality:
Create a Custom Members Database:
Instead of relying solely on the Wix Contacts system, you can create a new Members database collection in Content Manager.
Import your CSV file into this custom database, where you can add and manage fields like “Year.”
1 Like
hankyou. I had used this workaround of a custom Members database. But if I create a Members database collection by importing from a CSV file, it will reflect the dta during the import. Each time I will have a new member registring or changing its profile like “email”, I wont be reflected into my Members collection but only in the wix Site member list.
What I would like to achive is to publish a list of members (including a year field, like a year of birth). and I would like the visitors to be able to filter members based on a particular year. Any smart idea ?
Appreciate your help.
Use Velo code to synchronize the Site Members list with your custom Members database, ensuring it stays updated. Then, create a repeater that queries and displays filtered data based on the “year” field.
Test your site to ensure it works as expected. Add console.log() statements in your Velo code to identify any errors and verify the code’s functionality.
To achieve filtering members by year, create a custom database to store member details (including year of birth). Use Wix’s API to sync updates between the site’s member list and your database. Add a dropdown for users to select a year and filter the displayed members in a repeater. This solution ensures a dynamic and up-to-date member list with year-based filtering.
Great that is exactly What I want with the synchronization.
I know how to create a custom database to store member details (including year of birth).
I knwo how to add a dropdown for users to select a year and filter the displayed members in a repeater. from my custom database member.
Can you let me know how to Use Wix’s API to sync updates between the site’s member list and my custom database ?
That would be fine. Can you please help me , I do not know how to to synchronize the Site Members list with my custom Members database,
You can try this method
Whenever a new member registers or logs in, you’ll want to add their details (like email and year of birth) to your custom Members database. You can do this by using the onLogin event, which triggers when a member logs in. Here’s how it would work:
javascript
Copy code
import wixUsers from 'wix-users';
import wixData from 'wix-data';
$w.onReady(() => {
wixUsers.onLogin((user) => {
const userId = user.id; // Get the member's ID
const email = user.getEmail(); // Get the member's email
const yearOfBirth = user.get("yearOfBirth"); // Get year of birth field (replace with your own)
const newMember = {
"_id": userId,
"email": email,
"yearOfBirth": yearOfBirth
};
// Save member to the custom database
wixData.save("MembersCollection", newMember)
.then(() => {
console.log("New member added to the custom database.");
})
.catch((error) => {
console.log("Error saving member data:", error);
});
});
});
I am not sure I understand the code.
I already have a member collection with following filds name, email, year facebook-url.
I also have a wix member list with name and email. (not year nor Facebook-url)
Now the synch between to 2 database should be like this/
If an knowed member logs in and changes its email in the wix member base (update of his profile), I want that new email to be synch in my custom data base.
If a new member registers, I want to collect its name, email, year and facebook, and I want name and email to be placed in teh wix member and also name, email, yearr ,e tc in my member collection.
I usally code in PHP and SQL. and I have no expertise with wix yet.
tahnks for your help.
Add the code to a backend .jsw file to handle synchronization securely. To test it, you can run it directly from the backend or trigger it from the frontend using import and call methods.
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users-backend’;
async function syncSiteMembersToCustomDatabase() {
try {
// Get all site members
const members = await wixUsers.queryUsers().find();
for (let member of members.items) {
let memberData = {
_id: member._id, // Unique identifier
name: member.name,
email: member.email,
yearOfBirth: member.yearOfBirth, // Add the custom field you need
};
// Check if the member already exists in the custom database
const existingMember = await wixData.query('Members')
.eq('_id', member._id)
.find();
if (existingMember.items.length > 0) {
// Update existing member data
await wixData.update('Members', memberData);
} else {
// Insert new member data
await wixData.insert('Members', memberData);
}
}
} catch (err) {
console.error('Error syncing members:', err);
}
}
I do not knwo haw to add the code to a backend .jsw file to handle synchronization securely.
Nor to run it directly from the backend or trigger it from the frontend using import and call methods.
There is no way I can extend the Wix member list with more fields like year and facebook ?
and then query only that database ? the synch option seems difficult (for me).
we can help you out with that if you are interested to connect further on fiza@astrosia.in
You will need to create a custom signup lightbox where you can add the details you want. The user will be logged in through this lightbox, and the data will be saved to the custom database. After that, you can display the data from that database on the member page by querying it, and you can also add filters there.