Hello Wix Code,I was wondering if it is at all possible to create my own follow button. I have all of the users on my website on a repeating layout, so that when a new user creates a profile, that user’s information is automatically displayed on the repeating layout. I want to make it so that each repeating layout has a button that allows users to “follow” or “friend” one another. Is this at all possible? Thanks in advance to anyone who helps out!
Link to page with repeating layout: https://www.pawtalog.com/profiles
2 Likes
Hey Pawtalog!
Of course you can! If I understand correctly, you want to add a button to each repeated item, that on clicking it “remembers” that the current logged in user follows the user in the repeated item.
If this is the case, I would recommend creating a “Followings” Collection with two columns, “Follower” and “Followee” (or any better fitting names you can think of). Button clicks can then add rows to this collection. This also makes it easy to query the collection not only who does a specific user follow, but also who is following a specific user.
I hope this was helpful.
J.
Thanks! Can you explain to me a little bit more about how to do this? Also is it possible to add a counter that shows how many users are following someone? I’m kind of new to Wix Code.
Thanks for your help, Jonathan!
Sure!
Start by creating a collection with two columns, “Followers” and “Followees” (or a pair of betters names). Make sure your users have Write permissions for the collection. And create a dataset set with write permissions to the dataset.
Now, add a button to your repeating layout, click on it, and go to it’s Properties Panel. Add an “onClick” handler, that gets the appropriate user ids and saves them to the collection:
import wixUsers from "wix-users"
import wixData from "wix-data"
export function button1_click(event, $w) {
// let's get the userIds
const followeeId = $w("#myMembersDataset").getCurrentItem()._owner
const followerId = wixUsers.currentUser.id
// save them to our "Followings" collection
wixData.insert("Followings", {
"followee": followeeId,
"follower": followerId
})
.catch((err) => {
// to help you debug if something went wrong
console.log(err);
});
}
I’d recommend going through our tutorial for “Adding Custom Interactivity”
To find out how many people are following the current users, just query the “Followings” collection, filter the result by "followee"s that matches the current userId, and count the number of items.
In addition, notice that with the above implementation, you might get duplicates. You should verify before inserting the new record that it doesn’t already exist.
Read more about queries and inserting records here, this should be a good start.
Let me know if you have additional questions,
J.
Thanks! I have a quick question. What do you mean by “add an onClick handler, that gets the appropriate user IDs and saves them to the collection”?
Take a look at the video at this link . It thoroughly explains, with examples, how to add different kinds of handlers.
If you still have questions after that, let me know 
J.
Ok, thanks soooo much for the help!!!
Jonathan,
I’m still confused about this part: “Now, add a button to your repeating layout, click on it, and go to it’s Properties Panel. Add an “onClick” handler, that gets the appropriate user ids and saves them to the collection”
I’ve watched the video over and over again, but can’t seem to figure out what it is I need to do. Sorry about all of the questions! Thanks for your super awesome help so far 
No problem, this is not a trivial task! First off, you can find a bunch of videos, examples and articles regarding repeating layouts here .
Now, let’s break things down:
-
Connect the repeater to your “Users” Collection. (example here )
-
Add a button to your the Repeated Item. (explanation here )
-
Create a custom behavior for the button you added. (tutorial here )
-
Make clicking the button save a record (with whatever) to your “Followings” Collections. (see how to work with the Data API here )
You’ll need to elaborate on what you’ve done successfully, and where you’re stuck, and we can go on from there.
J.
I’ve created the new database with two fields, “following” and “followees”. I also dragged the button onto the page with the repeating layout. Unfortunately, that’s all I’ve been able to do. Thanks again for helping out!
No problem
Where you able to drag a the button into the repeated item? Where you able to define an onClick handler for the button? If not, what was the problem? What did you expect to see/happen that didn’t? Maybe add screen shot of the problem?
I was able to drag the button to the repeated layout, but I don’t know what to do from there. I don’t know what to type for the onClick option in the properties panel. Basically, I’m confused with the onClick. Can you give me instructions on how to do this and what to type? Thanks Again, I’m completely new to Wix Code
Thanks!
I’d like to bring your attention to this link . Notice also the related topic on the right-hand side “Working in the Code Panel”.
Each component has “events”, to which to can respond when they happen, for example when a button is clicked. When clicking on the “onClick” option, type in a name for example: “button1_click” (this is what will appear by default if I’m not mistaken).
When the button is clicked, Wix Code will look for a function by the name “button1_click” in the Code Panel which is located on the bottom edge of the editor.
Paste the following code into the Code Panel:
export function button1_click(event, $w) {
console.log("hello")
}
And go to the site preview. When clicking the button, you should see “hello” printed out to the console in the bottom of the preview screen.
Were you able to see the message printed out when clicking the button?
Yes, I got the “hello” message when clicking the button.
What should I do from here?
Awesome!
Looking at https://www.pawtalog.com/profiles, I see the “follow” button on the page itself. You’ll need to drag the button into the repeater, so you have a “follow” button for each user.
After adding the button to the repeated item, replace the contents of the code panel with the following code snippet:
import wixUsers from "wix-users";
import wixData from "wix-data";
// the onClick handler for the button in the repeated item
export function button1_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("#myMembersDataset").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);
});
}
Now go to preview and click the button in the repeated item. Do you see the ids printed out to the console? Was a record added to the “Followings” Collection?
I think I got it:
followerId: 14aa7e62-e725-4bb6-9f5f-71831c2608f5
followeeId: 14aa7e62-e725-4bb6-9f5f-71831c2608f5
Error: The Followings collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor.
Is this correct?
In the line:
wixData.insert("Followings", { ...
You need to put the name of the Collection in which you’re going to save who’s following who. I’m guessing your Collection isn’t called “Following”, and hence the error.
Once you get that set up, users that click follow will have an appropriate record created. You can then use this Collection for what ever “following” logic you’d like to implement.
J.
Ok, so I followed everything and I think everything seems to be working. Can you double check:
The page on my site is called “Pet Profiles”.
Also, is there a way to display a number of how many users are following?
Thanks! Is there a way to display how many users are following someone? I would like to have the number of followers displayed next to the follow button.