Hello Wix Code,
I submitted a post similar to this one a while back, but I wasn’t able to get a clear response on how to do it. I would like to create my own follow buttons that allows users to follow each other on my site. My users are displayed on a repeating layout. I want to have a button on the repeating layout that allows for users to follow one another. Below is an example of what I’m talking about:
As you can see, each user would have their own follow button that other users could click on. I am not good at coding, so nice step-by-step instructions would be appreciated, thanks!
-Pawtalog
Having this on my site would really make it a nice online community.
Hi Pawtalog.
Can you please elaborate what functionality would you expect of a site member to get once “following” a certain site member?
Hi Genry,
I would like to have a counter next to the follow button that displays how many site members are following someone. If a site member follows another site member by clicking the follow button, the counter increases by one. Here is an example below:
As you can see, different site members have a different amount of followers. When someone clicks on “follow”, the counter displayed to the left of the button increases by one.
Hi Pawtalog,
Seems genry was asking what the term follow means in tge context of the community you are trying to build further to the display of the number of followers.
Do you have collections with the relationship between followers and the people they follow set up? A wix-data code in place?
I’d be happy to help with a specific question
Thanks,
Shlomi
Hi Shlomi,
I haven’t started anything yet. I don’t have the collections with the relationships between followers and the people they follow set. Hope this helps
Hi,
db collections are a good place to start, i’d then continue and create a form to add users with their details, the repeaters with their data.
please share your code question here once you get the component set up, it will be simpler
good luck!
Shlomi
Hi,
I have everything set up. Now I simply need help with the Wix Code part, like coding this out.
What should I do next? I have the user data form, repeaters and db collections for collecting user data.
Can you please share the url if the site you are building, it will be easier to proceed with the concrete example
Hi Shlomi,
Here is the homepage of the site: https://www.pawtalog.com/
Here is the page with the repeaters: https://www.pawtalog.com/profiles
Hi Pawtalog,
Thanks for sharing your website, it seems like you are building a forum or blog which i have missed in your initial question here above.
are you familiar with Wix Forum / Blog? we might already have this functionality.
https://www.wix.com/app-market/wix-forum/demo
https://support.wix.com/en/article/viewing-forum-members
otherwise, please share a bit more information about the website you are building
thanks,
Shlomi
Hi,
The Wix Blog is simply a quick solution for my problem to give me time to work on my online community. Basically, I am trying to build a website for users to share pictures of their pets. The users on my site have their data displayed on a repeating layout, and on that repeating layout each user has their own “follow” button that other users can click on.
For now, I’m trying to make the “follow” button on the repeating layout that will allow users to follow one another. Hope this helps
Please ask if you have any other questions for me about my site
Hi,
next step is configuring the relationship table, profile followers - it should include a references to the profile collection. please configure 2 columns each of type reference to the matching collection.
when you query this relationship table you can know for each user, how many followers he has, or the profiles he follows.
you can implement code to decide if a follow button should be displayed on the repeater, in case the current user is not already following the repeater profile, please have a look here - Repeater - Velo API Reference - Wix.com
clicking on the follow button of the repeater should add a record to this table using wix-data insert
https://www.wix.com/code/reference/wix-data.html#insert
you can also create a calculated field for each profile, or update a column on the profile collection with the number of followers (on add/remove follower) so in the repeater you can display the number of followers directly from the profile collection data set
good luck!
Shlomi
Hi Shlomi, this is what I have so far:
import wixUsers from “wix-users”;
import wixData from “wix-data”;
// the onClick handler for the button in the repeated item
export function button29_click(event, $w) {
// let's get the userId of the current logged in user
const followerId = wixUsers.currentUser.id;
console.log("followerId: ", followerId);
// let's get the userId from the repeated item
// where the button was clicked
// (replace "#myMembersDataset" with the name of your dataset
const followeeId = $w("#dataset2").getCurrentItem()._owner;
console.log("followeeId: ", followeeId);
// save them to our "Followings" collection
// using the wixData API
wixData.insert("Followings", {
"followee": followeeId,
"follower": followerId
}) .catch((err) => {
// to help you debug if something went wrong
console.log(err);
});
}
I don’t know what to do from here. I have created a database with two columns: “followers” and “followees”. The database is called “Followers_Followees”. When I preview my site and check how things are going, the data isn’t submitted into the “followers_followees” database. Do I need to connect my database somehow? If so, how? Does the code look good? Anything I should fix?
Hi,
good progress! the code is actually working and logging the data you collected, however as you can see in the log when you preview your page, you get an error that such a db collection under the name does not exist
wixData.insert("Followings"
see the developer console here below:
you first need to define the collection with the right schema, choose reference data type to the profile collection. and when you use wix-data insert you should set the _id column of the collection you reference to
Shlomi
Hi Shlomi,
I don’t really understand what I have to do, or how to do it. Can you explain a bit more? Thanks!
What is the name of the collection you are trying to insert your data to? Did you set it up?
Good news! I was able to figure it out and the code is running perfectly! Now, I just need to know how to display the number of users following a certain user using a text element. One last thing, is it possible for the button to disappear or turn grey after a user has followed someone so that their aren’t duplicates.
Great!
As i have written here above, the next step is to check out Repeater - Velo API Reference - Wix.com
And query the number of followers, and if the current user is among them
Caching the data for better performance is adding another column to a profile, updating it +1 when a follower is added. As for current user, you can query the list of profiles the current user is following and holding it in local cache, then check that on each repeater render to decide if the button should be disabled or not