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
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:
You can use this
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 code
$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
A function is used to make coding easier and faster/ It prevents you from writing or duplicating a function .
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 page.
With 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 DYNAMIC page
Test the comment section here (Full functioning):
DJ bon26