90%
top of page

Add a Title

Add a Title
Published Date
Published Date
Tags
0 Comments
Views
Share Post

Comment

successMessage

errorMessage

Add a Title

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

No comments yet. Be the first to comment!"

Related Posts

Start Now
Start Now

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

Start Now
Start Now

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

Start Now
Start Now

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

  • Writer: @lan Design
    @lan Design
  • Dec 29, 2023
  • 2 min read

Updated: Nov 29, 2024



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!

Comments


bottom of page