Customize Your Wix Blog Post Comments Section using Velo

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()

}

Have fun!