Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

0:00​ Awesome Wix Intro

2:23​ Create Input Elements

5:10​ Rename Element ID's

9:20​ Create the loadComments Function

14:46​ Create onItemReady Repeater Function

15:26​ Create ternary and if-else conditions

19:36​ Create Comments Validation Function

22:08​ Insert sumbitButton onClick Function

27:56​ Create Post Comments Data Collection

30:33​ Adjust Code Parameters for Data Collection

31:35​ Save and Preview Post Comment Section

---

Code Snippet to follow along with the video:

Page Code

This imports the multiple API's

import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

This loads the page code

$w.onReady(function () {
 // TODO: write your page related code here...
 //let info = 
    wixLocation.onChange((res) => {
        $w("#input5").value = null;
        freshState()
    })
    freshState()
});

Get freshState function and call for the latest post via getPost

function freshState(parameter) {
    $w("#post1").getPost().then(async (res) => {
        if (res) {
            loadComments()
            $w("#post1").expand()
            $w("#statebox9").expand()
        } else {
            $w("#noshowStrip").expand()
            $w("#statebox9, #columnStrip1, #post1").collapse()
        }
    })
}

Create a loadComments function to call all comments to the page that are in reference to the post.

async function loadComments(parameter) {
 const { items: postComments } = await wixData.query("PostCommentsData")
        .eq("post", currentPost._id)
        .find();
 if (postComments) {
        $w("#commentsRepeater").data = postComments
        $w("#commentsRepeater").expand()
    } else {
        $w("#commentsRepeater").collapse()
    }

}

Then you will need to load the information to the repeater element with this code.

 export function commentsRepeater_itemReady($item, itemData, index) {
 // Add your code for this event here: 
    $item("#name").text = (itemData.name) ? itemData.name : "Anonymous";
 if (itemData.comment) {
        $item("#comment").text = itemData.comment
        $item("#container6").expand()
    } else {
        $item("#container6").collapse()
    }
 
    $item("#date").text = itemData._createdDate.toLocaleDateString('en-US')
}

Then you collect the comment information from the site visitor by doing this below. This will have the comments validation once the visitor checks the agree box and enable the submission button by an onChange event handler.

function commentsValidation (parameter) {
 if ($w("#checkbox").checked) {
        $w("#submitButton").enable()
    } else {
        $w("#submitButton").disable()
    }
}

export function submitButton_click(event) {
 // Add your code for this event here: 
    $w("#commentSucessVector").hide()
 const newComment = {
        post: currentPost._id,
        name: $w("#addName").value,
        comment: $w("#addMessage").value
    }
    wixData.insert("PostCommentsData", newComment).then(() => {
        $w("#commentSucessVector").show().then(() => {
            setTimeout(() => {
                $w("#commentSucessVector").hide()
            }, 2500)
        })
        loadComments()
        $w("#addName").value = null;
        $w("#addMessage").value = null;
        $w("#checkbox").checked = false;
    }).catch((error) => {
        console.log(error)
    })
}

export function checkbox_change(event) {
 // Add your code for this event here: 
    commentsValidation()
}

---

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2020: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!