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';

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

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

3. 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
       });

4. 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}
/>