Skip to main content

buildfire.components.comments

Comments is a component that can be integrated into features to add comment functionality to any item, such as posts, products, articles, media, and more.

Requirements​

After injecting the buildfire.min.js, you need to inject the following files:

  • List View component JS file listView.js and CSS file listView.css
  • Swipeable Drawer component JS file swipeableDrawer.js and CSS file swipeableDrawer.css
  • Report Abuse service JS file reportAbuse.js
  • The component JS file comments.js and CSS file comments.css

Widget​

<head>
    <!-- JS -->
    <script src="../../../scripts/buildfire.min.js"></script>
    <script src="../../../scripts/buildfire/components/listView@2.0/listView.js"></script>
    <script src="../../../scripts/buildfire/components/swipeableDrawer/swipeableDrawer.js"></script>
    <script src="../../../scripts/buildfire/services/reportAbuse/reportAbuse.js"></script>
    <script src="../../../scripts/buildfire/components/comments/comments.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="../../../styles/components/comments/comments.css" />
    <link rel="stylesheet" href="../../../styles/components/listView@2.0/listView.css" />
    <link rel="stylesheet" href="../../../styles/components/swipeableDrawer/swipeableDrawer.css" />
</head>
info

This component uses Report Abuse Service, to learn more about how to handle abuse reporting refer to Report Abuse Service

Methods​

open()
​

buildfire.components.comments.open(options, callback)

Used to open the comments drawer by passing options and provides a callback once the drawer has been opened.

buildfire.components.comments.open({
    itemId: 'item-1',
    translations: {
        commentsHeader: 'Comments for Post',
        emptyStateTitle: 'No one has commented',
    },
}, 
(error) => {
    if (!error) {
        console.log('Comments drawer opened');
    }
})

options​

NameTypeRequiredDescriptionDefault
itemIdstringyesUnique ID for the item that the comments will be attached to.
filterobjectnoObject that contains filtering properties.
translationsobjectnoObject that contains mapped values for translatable properties.

filter​

NameTypeRequiredDescriptionDefault
commentIds[string]noArray of comment IDs to filter for.

translations​

NameTypeRequiredDescriptionDefault
youstringnoSpecifies the text for the current user name in commentsYou
someonestringnoSpecifies the text for users with no provided nameSomeone
reportstringnoSpecifies the text for the report buttonReport
deletestringnoSpecifies the text for the delete buttonDelete
readMorestringnoSpecifies the text for the read more buttonRead More
readLessstringnoSpecifies the text for the read less buttonRead Less
commentsHeaderstringnoSpecifies the text for the comments drawer headerComments
emptyStateTitlestringnoSpecifies the title text for empty stateNo comments yet.
emptyStateMessagestringnoSpecifies the message text for empty stateBe the first one to comment.
addCommentPlaceholderstringnoSpecifies the placeholder text for comment inputAdd comment
commentReportedstringnoSpecifies the toast text when reporting succeedsComment reported successfully.
commentDeletedstringnoSpecifies the toast text when deleting a comment succeedsComment deleted successfully.
commentAddedstringnoSpecifies the toast text when adding a comment succeedsComment added successfully.
loginRequiredstringnoSpecifies the toast text when login is requiredYou must be logged in to add a comment.

callback(err)​

NameTypeDescription
errstringError string, null when operation is successful

getSummaries()
​

buildfire.components.comments.getSummaries(options, callback)

Used to get the summaries for a list of items.

buildfire.components.comments.getSummaries({
    itemIds: ['item-1', 'item-2', 'item-3']
},
(error, result) => {
    if (error) {
        console.error(error);
    } else {
        console.log('Summaries for provided items: ', result);
    }
})

options​

NameTypeRequiredDescriptionDefault
itemIds[string]yesUnique ID for the item that the comments will be attached to.

callback(err, data)​

NameTypeDescription
errstringError string, null when operation is successful
dataobjectAn array of requested summaries

summary​

NameTypeDescription
countnumberNumber of comments added to this item
createdOnstringDate and time when the summary was created in ISOString format
itemIdstringthe ID of the item which the summary belongs
lastUpdatedBystringthe ID of the last user that updated the summary
lastUpdatedOnstringDate and time when the summary was last updated in ISOString format

deleteComment()
​

buildfire.components.comments.deleteComment(options, callback)

Used to delete a comment by comment ID, this method should be used to handle abuse reports.

buildfire.components.comments.deleteComment({
    itemId: 'item-1',
    commentId: 'item-1-66ddd6b75571dd09e8d6n791-1751992172930'
},
(error) => {
    if (error) {
        console.error(error);
    } else {
        console.log('comment deleted successfully');
    }
})

options​

NameTypeRequiredDescriptionDefault
itemIdstringyesItem ID of which the comment belong to.
commentIdstringyesItem ID of the comment to be deleted.

callback(err)​

NameTypeDescription
errstringError string, null when operation is successful

close()
​

buildfire.components.comments.close(callback)

Used to close the comments drawer.

buildfire.components.comments.close((error) => {
    if (error) {
        console.error(error);
    } else {
        console.log('comments drawer closed successfully');
    }
})

callback(err)​

NameTypeDescription
errstringError string, null when operation is successful

Handlers​

onClose()
​

buildfire.components.comments.onClose()

Triggered when the comments drawer is closed.

buildfire.components.comments.onClose = () => {
    console.log('comments drawer was closed');
}