Skip to content

Client side

Alexander Teshabaev edited this page Jul 19, 2020 · 10 revisions

Introduction

By default plugin starts with the following script:

<div id="anycomment-root"></div>
<script type="text/javascript">
    AnyComment = window.AnyComment || [];
    AnyComment.WP = AnyComment.WP || [];
    AnyComment.WP.push({
        root: 'anycomment-root',
        postId: 1,
    });
</script>

This renders root element with id and passed it as root to AnyComment.WP, later main script kick in and processing each pushed item.

Available config properties:

Property Description Required
root ID of the element to mount comments widget. yes
postId Post ID for which to load comments yes
events List of events associated with plugin. For full reference see details below. no

Programmatically Initiate Comments

You may use manager to invoke comments programmatically after page has loaded.

Here an example how it works:

window.AnyComment.Manager.start({
    root: 'anycomment-root',
    pageId: 1
})

This will remount comments into anycomment-root for page with ID 1.

The Manager uses the same config definition as the one you push to AnyComment.WP (see introduction part of this documentation).

Override Default Embed Script

You may override default script on the page using anycomment/client/embed-native-script filter:

add_filter( 'anycomment/client/embed-native-script', 'anycomment_override_native_script', 11, 2 );

function anycomment_override_native_script( $script, WP_Post $post ) {
    $id = 'anycomment-root-' . $post->ID;
	return <<<HTML
<div id="$id"></div>
<script type="text/javascript">
    AnyComment = window.AnyComment || [];
    AnyComment.WP = AnyComment.WP || [];
    AnyComment.WP.push({
        root: '$id',
        events: {
            init: function() {
                console.log('Some when comments loaded');
            }
        }
    });
</script>
HTML;
}

It accepts two argument, first for the script text and second is post object. Using these two values you can configure script to your needs.

As you can see, we have added events, so now we can do something once plugin has loaded.

Events

Event name Description Example
init Triggered once plugin was loaded. init: function({postId)
onRated Triggered when users rates the page. onRated: function({postId, value, totalCount})
onLogout Triggered when users logs user out. onLogout: function({userId})
- More to come.

init

Property Description
postId Post id for which initiation happened.

onRated

Property Description
value Post ID for which page was rated.
value Start value user selected, from 1 to 5.
totalCount Total number of stars after reaction.

onLogout

Property Description
userId User id who logged in.