hello
how add Comments to Dynamic Page
3 Likes
Hey!
Check out forum posts on the same matter:
https://www.wix.com/corvid/forum/community-discussion/dynamic-item-page-individual-comments
You could use a repeater that is connected to your comments database and filter the comments collection for items that are only related to that particular dynamic page.
When you are passing a comment to the database, pass the dynamic page ID also.
That way you can filter the comments repeater for items that relate only to that particular dynamic page.
This can also be helpful:
https://www.wix.com/corvid/forum/community-discussion/comments-reviews-on-dynamic-pages
How to add a comment section on a dynamic page [Think Outside the Box Version]
Please Note : This might not work exactly as planned on an automatically added wix member area because I don’t think you can get their details except email but other than that it’s a win win on both ends
Note :
-
To make things short… the logic used here was to save the page path to collection and filter the repeater onReady according to the current page path.
-
If you don’t have custom members area I recommend you switch from the wix automated members area to a custom one. Reason being that you can do almost anything with your own custom area and even add nicknames, unlimited layouts, batches etc.
Email me at nzubefootballer@gmail.com (opinion) if you are stuck and maybe we can do a zoom meeting or sum else to create a members profile that best suites you (idk how to make members follow each other, i’ll crack head to that soon!)
Here’s a 4 min walk through of what your results will be like
I had to upload to youtube because file was to large to upload here
Hey! @sacoforjp @konstantinos @roi-bendet @velogenius how to add comments to dynamic page!
Step 1
1.1 create a collection titled ‘comments’ and add the following fields:
-
Field name: ’ name ’ - Field key: ’ name ’ - type: ’ text ’
-
Field name: ’ comment ’ - Field key: ’ comment ’ - type: ’ text ’
-
Field name: ’ User profile ’ - Field key: ’ userProfile ’ - type: ’ image ’
-
Field name: ’ link to comment profile ’ - Field key: ’ linkToCommentProfile ’ - type: ’ link ’
-
Field name: ’ Page link ’ - Field key: ’ pageLink ’ - type: ’ text ’
-
Field name: ’ comment ID ’ - Field key: ’ commentId ’ - type: ’ text ’
When done creating the collection add the dataset to the page. Then set it to read only . This will be ‘#dataset1’. Add another dataset for the same collection and set it to write only . This will be #dataset2.
Step 2
Setup the comment section
2.1 Add a repeater:
Choose your preferred layout
If you are too anxious that you even think of one, This is my layout
2.2 Connect the repeater to data (‘comments’) (read only):
-
Connect image to ’ User profile ’ - Link to ’ link to comment profile ’
-
Connect name (HYDRA (as shown in my repeater above)) to ’ name ’
-
Connect your date to ’ Created date ’ (automatically genrated by wix) and choose ’ Medium date ’ (This depends on you)
-
Connect where the user comment will go to ’ comment ’
2.3 Setup the commenter section
2.3.1 Add a profile plate
Add a box with a text in it saying ‘Loading…’ this will be the preloading message. On that same box add an image (Optional) and then add a design to make it circular. Make the uploaded image a preloading gif file to make it look like it’s loading while it’s getting the current user image. In total it should look something like this (you can make this your design)
2.3.2 Add a not-logged-in message
Next add a message that will show if the user isn’t logged in. You can duplicate the blue box above and change the image to a vector image that shows a warning sign (this design is up to you) and change the text to your own message example " Commenting has been disabled, please sign in to leave comment. " This box will then be collapsed on load… In total your commenter section will look like this:
2.3.2 Add comment count
Add a text above the blue plate as shown in the image above (‘Heading1’) and change the id to ‘text 2’ (you can leave it the way it is but change it in the code that says #text2)
Please note : you should not connect the commenter section to data only the repeater that should be connected to read-only data. Then you are done with the comment section that should end up like looking like this:
Step 3
Getting current data
3.1 Add inputs:
Add 4 inputs below the repeater like the image below (I accidentally added 5 in the image below)
(These inputs will later be hidden (collapsed))
3.2 functioning the inputs
By saying functioning the inputs, I meant getting the current user details from your ‘Members’ collection, displaying it on the inputs value and profile plate and also showing the current page path (wixLocation.path[1]). So in your wix code onReady function copy and paste these in… and make the substitution stated below this…Step 4
$w.onReady(function () {
let path = wixLocation.path[1];//Change the number 1 to number 0 if there are issues. The number 1 determines on how many slugs are after the default home slug or .com (if you are premium wix user).
$w('#input1').value = path;
wixData.query("Members")//your collection name
.eq("_id", wixUsers.currentUser.id)
.find()
.then((results) => {
$w('#input2').value = results.items[0].name;
$w('#input3').value = `/members/${wixUsers.currentUser.id}` //change the members to your own url slug
$w('#inpu4').value = `${wixUsers.currentUser.id}`// this is not required but you get their id to show them their recent comments on their profile by filtering on their profile
$w('#image1').src = results.items[0].profileimage; // The #image1 is the image on the blue profile plate
});
$w('#text1').text = "Commenting as " + $w('#input2').value;// this is the text on the profile plate that says 'loading...'
})
Make these substitutions:
-
results.items[0].something (change something (after the dot) to the field key that’s in yo collection)
-
#input1, #input2, #input3, #input4 = the element id in the page
-
(“Members”). Change ‘Members’ to your collection field key name
Preview the page and check to see if every input has a value is good then move to the next step. Look at mine:
Step 4
Create functions
This function is to filter the the repeater/dataset and then count the number of items on the repeater
function filter() {
$w('#dataset1').setFilter(
wixData.filter()
.contains("pageLink", $w("#pageUrl").value)
).then(() => {
let totalCount = $w("#dataset1").getTotalCount();
$w('#text2').text = totalCount.toString() + " comments"
});
}
This function to to disable the comment section
function NotLoggedIn() {
$w('#notLoggedInMessage').expand()
$w('#textBox1').disable()
$w('#commentButton').disable()
$w('#profilePlate').collapse()
}
This function is used to normalize the comment section
function commentNormal() {
$w('#notLoggedInMessage').collapse()
$w('#textBox1').enable()
$w('#commentButton').enable()
$w('#profilePlate').expand()
}
Step 5
Determine if the user is logged in
If you already have an onReady function you can find a way to squeeze this in otherwise just create another onReady function, it doesn’t affect anything
This code below is to determine if the user is logged in or not. If logged in ‘commentNormal’ function will occur if not ‘NotLoggedIn’ function will occur
if (wixUsers.currentUser.loggedIn) {
commentNormal()
} else {
commentNotLoggedIn()
}
Step 6
Finish up
Finally all you have to do next is to create an onCLick event for the comment section and insert the comment to database (‘comments’)
export function button4_click(event) {
// Add your code for this event here:
wixData.query("comments")
.eq("_id", wixUsers.currentUser.id)
.find()
.then((results) => {
wixData.insert('comments',{
'comment': $w('#textBox1').value,
'linkToCommentProfile' : $w('#artistUrl').value,
'name' : $w('#artistName').value,
'pageLink' : $w('#pageUrl').value,
'userProfile' : $w('#image7').src,
'commentId' : $w('#input15').value,
});
setTimeout(function() {
$w('#textBox1').value = '' //this clears the text box
$w('#dataset2').refresh()//this refreshes/update the collection
$w('#dataset1').refresh() //this refreshes/update the repeater
}, 1500);
setTimeout(function() {
let totalCount = $w("#dataset1").getTotalCount();
$w('#text2').text = totalCount.toString() + " comments"
}, 2000);//this updates the repeater
})}
Feel free to remove the on login function if you want anyone to comment on the pageWith all these done perfectly you should be able to have a beautiful comment section to your dynamic page
Later on i’ll take a week or 2 to crack head on how to add likes to the repeating comments, how to reply and how to email to certain people if a comment is added.
The key is to think outside the box.
For the mean time enjoy having a comment on your page
DJ bon26
OMG ! You are awesome maan! 
@okeyiwobi By the way, can you share the example website link?
@velogenius I had to duplicate my original website because you know … i dont want it get messed up in the comments filled with ‘testing testing’ lmaoo.
This would be best if your using a laptop not mobile!
Use this guide:
-
Go to the link below this list
-
Click on any music (repeater)
-
Observe how it looks when not signed in
-
then sign up then it says “commenting as undefined” becasue you have nothing on your profile
-
Go to your profile and edit your profile
-
You choose what you update but be sure to update your artist name(this depends on you), profile image, and wallpaper
-
Go back to the dynamic page and see the changes, you can switch dynmic pages to see the difference
-
This is a duplicated site there might be some incomplete or weird looking parts! it’s for example purposes only! I do nothing with the information you give
the link:
https://okeyiwobi.wixsite.com/website/search
DJ bon26
@velogenius Thank you so much it took me 2 whole days. Literally 24 hours in total to think of this and execute it… and I thought i’d share my ways
I don’t think im the only one that knows this but I researched and couldn’t find. The fustrating part is that the wix team just linked me to where i’ve been back and forth 
@okeyiwobi Profile url doesn’t work. Could you update?
@velogenius You have to sign up first.
If the ‘my profile’ button doesn’t appear click on your image next to the ‘listen to music’ button at the top right corner
@okeyiwobi I signed up the site but profile button didn’t work.
@velogenius reload the page and see again, if it doesn’t work click on the click on your profile image (top right corner) instead of the button if it doesn’t work i’ll make a video for you
@okeyiwobi That is how it looks like
@velogenius I just made a fix that’ll link you to your ‘update profile’ page onLogin
SO try logging out and then log in again
@okeyiwobi It throws me a 404 page again.
sign up with this email
99testingtesting99@gmail.com this is a new gmail i created right now… the password is ‘testing99’
I think i must have set the wrong permission to my collection. I just updated it let’s see if theres a 404 again
Still doesn’t work 
@velogenius okay it took me on hour to solve the issue! log in again with that email and see the results
I apologize for taking too much time
DJ bon26
Hey, @okeyiwobi , nice work. How about posting this is Tips, Tutorials, Examples so that others can see this.
Also, please observe the community guidelines and refrain from tagging Wix employees. Tagging so many forum members is not the proper community etiquette. Thank you
In Step 1. 1 Line 4 it says to be of type link, I am presuming this means URL? There is no type of “link”