wix-comments-ooi

Comments-wix-ooi

• Overview
• Setup
  • Properties
    • Settings Property
  • ViewerScript
  • Share
  • SSR

Overview

Comments is a component that runs within an out of IFrame TPA, the TPA is required to provide a number of properties in order to run comments. Some of the properties need to be passed from wixCodeAPI which is available in the viewerScript, See viewerScript section. TPA can implement more than one instance of Comments, instances can be distinguished by the entityID property.

Setup

npm install wix-comments-ooi

Comments Component:

<WixCommentsOoi
               compId
               biToken
               uid
               appInstanceId
               locale
               entityID
               triggerShareMode
               buildShareURL
               viewSharedComment
               isMobile
               styleConverter
               appHeight
               signedInstance
               appDefinitionId
               editorMode
               wixCodeApiParams
               settings
               triggerScroll
               memberAuth
               commentsPreLoader
           />

Properties

propName	propType	defaultValue	isRequired	description
isMobile	bool	true	true	If the app is open in mobile
settings	object	default settings	false	Configuration of the app Settings. See table below
styleConverter	object	-	true	Style of the site
locale	string	'en'	false	The current site language
wixCodeApiParams	object	-	true	Object with params from wixCodeApi. See more info
commentsPreLoader	object	-	false	Object with the preLoad comments for SSR. See more info
memberAuth	function	-	true	A function that checks if the User is logged in & in-Community before invoking the callback,memberAuth(arguments, callback). See more info
signedInstance	string	-	true	The current signedInstance
appDefinitionId	string	-	true	The appDefinitionId
compId	string	-	true	The current compId
biToken	string	-	true	The current biToken
uid	string	-	true	The current uid
appInstanceId	string	-	true	The current appInstanceId
entityID	string	-	true	a GUID that is unique per site
buildShareURL	function	-	false	a function that gets called with two parameters: commentsId, entityId. should return a URL of the site with the provided comment data to be shared buildShareURL(commentId, entityId)
viewSharedComment	object	-	true	an object that contains the id and the entityID of the comment than needs to be viewed - if provided, Comments enters share mode
triggerShareMode	function	-	true	This function gets called when the app enters/exits share mode with one boolean parameter
triggerScroll	function	-	true	Function that gets bool and freeze/unfreeze page scroll. triggerScroll(bool)
editorMode	bool	false	false	if the app is in editor mode

ViewerScript

Comments requires some properties to be passed from the viewerScript, They can be acquired like this:

1. import WixCodeApiManager from wix-comments-ooi

import WixCodeApiManager from 'wix-comments-ooi/dist/src/wixCodeApiManager.js';

1. then call WixCodeApiManager with the parameters wixCodeApi, appParams, compId :

 let wixCodeApiParams = await WixCodeApiManager(wixCodeApi, appParams, compId); 

1. This will return an object that contains the necessary parameters for comments, it should be passed via setProps:

      let wixCodeApiParams = await WixCodeApiManager(wixCodeApi, appParams, compId); 
      
      setProps({
            ...,
            wixCodeApiParams
       });

1. add the same logic to the user.onLogin function:

      wixCodeApi.user.onLogin(() => {
           let wixCodeApiParams = await WixCodeApiManager(wixCodeApi, appParams, compId);
           setProps({
                // other props
                wixCodeApiParams
            });
       }

Settings

An object that contains the settings of Comments. Like how many comments to load/show..

propName	propType	defaultValue	isRequired	description
commentsToDisplay	number	1	-	number of comments to display by default
repliesToDisplay	number	1	-	number of replies to display by default - next version
textDirection	string	"LTR"	-	text direction: "RTL" / "LTR"
commentsToLoadOnShowMore	number	5	-	number of comments to be loaded when clicking show more comments
repliesToLoadOnShowMore	number	5	-	number of replies to be loaded when clicking show more comments
enableReplies	bool	false	-	Enable replies
showCommentsTitle	bool	true	-	Show/hide "All Comments(n)" title
enableLikes	bool	true	-	enable/disable likes
enableShare	bool	true	-	enable/disable share
enablePaddingDesktop	bool	false	-	enable/disable left & right padding on Comments component (20px)
enablePaddingMobile	bool	false	-	enable/disable left & right padding on Comments component (20px)
enableDivider	bool	true	-	enable/disable divider bellow Comments title
showRepliesByDefault	bool	false	-	show/hide replies with comments
commentsBox_none	number	1	-	Indicates where to show the addCommentBox when there is no comments yet. 1=at top. 2=at bottom. 3=at top & at bottom.
commentsBox_few	number	1	-	Indicates where to show the addCommentBox when there is few comments. 1=at top. 2=at bottom. 3=at top & at bottom.
commentsBox_many	number	3	-	Indicates where to show the addCommentBox when there is many comments. 1=at top. 2=at bottom. 3=at top & at bottom.

Member Auth

The TPA should implement a function called memberAuth and pass it to Comments component via props, the function will check and open login/join-community popups when required, and in case the User is login and in the community then invoke the callback.

In order to perform any action in the Comments Component the User needs to be of the following:

• Signed-in
• Part of the community

memberAuth function gets two parameters:

• arguments
• callback

Example of how the implement should look like in the TPA:

memberAuth(args, cb) {
    if (!isUserLoggedIn) {
      	showLoginPopup();
    } else {
      if (privateUserFlag) {
        showJoinCommunityPopup();
      } else {
        cb.call(this, ...args);
      }
    }
}

Share functions

Since Comments is not a standalone app, Its the TPA responsibility to build the share URL, and decode it later when users come through it. Comments will enter share mode when it gets the property viewSharedComment. The object should look like this:

viewSharedComment={
            id:  "commentId",
            entityID: "entityId"
        };

When user clicks on share comment, Comments will call the function buildShareURL, the function should return the URL, and Comments will send this URL to the user. User should be able to exit share mode by clicking back to all comments, This will call the function triggerShareMode

Page Scroll

Comments need to freeze the page scrolling in some situations and for that, a function needs to pass to Comments that control the scrolling called triggerScroll(bool). for example:

triggerScroll(status){
       document.querySelector("body").style.overflow = status ? "scroll" : "hidden";
   }

• you can use this useful package: https://www.npmjs.com/package/body-scroll-lock

SSR support

Because Comments load his data via API call, the site (TPA) needs to do that before loading Comments component. to display comments data and support SSR with Comments:

1. import CommentsPreLoader from 'wix-comments-ooi/dist/src/commentsPreLoader.js';
2. call CommentsPreLoader to receve the list of comments to display: let commentsPreLoader = await CommentsPreLoader(signedInstance, token, entityID, numberOfCommentsToLoad);
3. pass the 'commentsPreLoader' to 'WixCommentsOoi' component props.

Example:

import CommentsPreLoader from 'wix-comments-ooi/dist/src/commentsPreLoader.js';

let commentsPreLoader = await CommentsPreLoader(signedInstance, token, entityID, numberOfCommentsToLoad);

<WixCommentsOoi
    ...
    commentsPreLoader={commentsPreLoader}
/>