Jump to content
Edison

Create a very basic Forum using Comments in PW Uikit 3 Site/Blog Profile

Recommended Posts

When your blog content is growing to some thousands of pages and you have comments scattered here and there, sometimes you start wondering if placing comments below each post is the best approach. Of course this totally depends on your project and contents. In my case I came to the conclusion I could provide a better user experience switching to a Forum-like solution, where discussions were organized by macro subjects and not below each individual post.

Of course there are many products and services providing fully featured forum solutions, but getting only few comments per day I was reluctant to setup a dedicated forum and to deal with users' profiles. A nice thing of the comments system is that users do not need to create account and password, but simply use their email address.

And here we are ... why not to setup a very basic Forum-like solution using PW Comments? But please do not get too excited… we will just use comments in a way that looks-like-a-forum. I think this solution makes sense if you have a limited number of comments per day spread on some topics. If you need to deal with high discussions traffic with several users ... do it with a fully featured forum solution !!

To implement this Forum-like solution we will take benefits of (1) PW pages/templates flexibility (why you should be here otherwise…), (2) core module FieldtypeComments, (3) Uikit 3 Site/Blog Profile, (4) some of the tutorials I recently released about PW Comments (listed at the end).

OK, let's start. Login into the Admin panel, select Setup, and then Fields. Let's create a checkbox field named "sticky" that we can use to keep some forum subjects on top of the communities.

1985098572_ScreenShot2019-07-13at12_15_57.thumb.png.6c1fa73d3fc5e64da1a23c91dbdc668f.png

Now let's move to Setup, Template. We will create a new template with name "communities'. In addition to "title" field, we will add also "body" and "sidebarRight" fields (already available in the profile):

1191524514_ScreenShot2019-07-13at12_11_50.thumb.png.ee0c80a918303dd5c07c1c3b41a4a6f3.png

Then we create a template, that we will use for individual communities, with name "community". In addition to "title" field, we will add "date", "body", "images", "comments" fields (already available in the profile) and the "sticky" field we have just created. If you wish, as I did, you can also associate some category fields. If you use Multi-Language is a good idea to use the field "date", as ,differently from createdStr, it will automatically return a locale-formatted date as you defined in the field.

490570598_ScreenShot2019-07-13at12_19_03.thumb.png.3ac8dd69365c4567966f755edcc41ff4.png

Now that we have created the templates, we need to customize them. Reopen the "communities" template. In the Family tab: allow the template to have children, allow only one page with this template, select "community" as only allowed template for CHILDREN.

305275040_ScreenShot2019-07-13at12_25_25.thumb.png.551c7f3cb640521e9c57cc8be123b961.png

Then in the URLs tab: select allow page numbers. This will return a paginated list of communities.

473894949_ScreenShot2019-07-13at12_27_59.thumb.png.0f8c9b292208f81cbdafba89e7aa5c57.png

We reopen the "community" template. In the Family tab: do not allow the template to have children, allow to create new pages, select "communities" as only allowed template for PARENT. 

804094505_ScreenShot2019-07-13at12_29_28.thumb.png.d1e53d0d2af873a59c92a3f5585b56a6.png

Now in the URLs tab: select allow page numbers. This will be necessary to create paginated comments.

1905782011_ScreenShot2019-07-13at12_30_50.thumb.png.0d28ae5d61e067c9093379fefb7377e1.png

Let's go to the page-tree, under Home we will create a new page named "Community" using the templates "communities" (note the final s), this will be the page listing all the communities. Under the Community page, we will create the individual communities. Give the pages the name you wish and use the template "community" (note w/o the final s). It may be good creating one with the name "New Forum Requests" checking its "sticky" field so that it remains on top.  

1498820504_ScreenShot2019-07-13at12_39_10.png.0ac7dd491d13976c5120b9fe917d2906.png

As to implement this Forum-like solution, the comments pagination is a must, at this stage you will have to implement it as described in this tutorial:

Now we are ready for coding (very little!) the php templates. We need to associate php files to the two templates we have created. In site/templates create two new php files communities.php and community.php. Open the template blog.php and copy its content to communities.php, then repeat the same operation copying the content of template blog-post.php to community.php.

Great! We are few steps away from our Forum-like solution. 

Modify communities.php as follows:

...
echo ukHeading1(page()->title, 'divider');
echo page()->body . '<br><hr>'; //>>>>> ADD THIS LINE
//$posts = page()->children('limit=10');
//echo ukBlogPosts($posts);
$posts = page()->children('sort=-sticky, sort=title, limit=10'); //>>>>> ADD THIS LINE
echo ukBlogPosts($posts, ['moreText' => '', 'moreIcon' => '']); //>>>>> ADD THIS LINE
...

Then modify community.php as follows:

// blog post content
echo ukBlogPost(page());
// comments
if($page->hasField('comments')) { //>>>>> ADD THIS LINE
	$comments = page()->comments;
	// comment list
    if(count($comments)) {
      //echo ukHeading3("Comments", "icon=comments");
      echo ukComments($comments->find("sort=-created"), ['paginate' => true]); //>>>>> ADD THIS LINE - READ PAGINATION TUTORIAL (NEEDED)
      echo '<hr>';
    }
    // comment form
    $gdpr = __('I agree with the processing of my personal data. I have read and accept the Privacy Policy.'); //>>>>> ADD THIS LINE - READ GDPR TUTORIAL (OPTIONAL)
    echo ukHeading3(__('Join the discussion'), "icon=comment");
    echo ukCommentForm($comments, ['labels' => ['gdpr' => $gdpr]]); //>>>>> ADD THIS LINE - READ GDPR TUTORIAL (OPTIONAL)
} //>>>>> ADD THIS LINE

Very good (hope so...). Now let's see the result. When browsing to the Community page we will get the list of the communities. In my example I decided to keep sticky the one where users can submit suggestions for new forum subjects.

704269664_ScreenShot2019-07-14at11_18_29.thumb.png.fd62df943921dc3edf3a575992cf52e5.png

Selecting one of the communities we have created, we are going to see (1) a description of the community, (2) a paginated list of comments, (3) and the comment form at the bottom. Please note that in this picture pagination is kept with a limit of three items just to fit the image … It makes sense to have 10-15-20 comments per page depending on your preferences.

975738937_ScreenShot2019-07-13at13_02_53.thumb.png.b8e18263a30e72dd6bf928ae49faeeb4.png

And we are done, here it is. If you wish you can implement some additional features as described in the tutorials below.

Not mandatory but probably makes good sense to enable the honeypot field as described in this tutorial as anti-spam measure:

If you have the "pleasure" to deal with GDPR matters, here is described how to add a privacy checkbox to your comment form:

and finally if you wish your Forum-like solution to be Multi-Language here it is what to do:

I hope you enjoyed and wish you a nice week-end ! 

PS: it's a couple of tutorials I miss the emoj … hope they will come back in this forum soon !!

 

 

 

 

  • Like 14
  • Thanks 2

Share this post


Link to post
Share on other sites

You're on a roll! Thanks for all these tutorials, and a very good weekend to you, too! 👍🏆🎆

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...