Ajax Comments added to the Premium Version of the Wue Theme


Last week I’ve started to work on the comments section of my news posts. I’ve estimated a workload of 2-3 days. But in the end I’ve needed one week to get all the small details to work harmoniously with each other and to develop a quite advanced comment system for a single page app.

Main features

No dependencies except Vue.js, WordPress and GSAP / TweenLite

Throughout Ajax functionality

I love ajax, blogging, discussing and trolling sometimes as well 😀 So I have tried to develop a comment system which I’ve missed everywhere else. Every feature is Single Page App conformal does not require to reload the page.

Synchronisation of the personal data

Name, email, website and captcha are synchronised among all the reply and comment forms for each comment / reply. So the (anonymous) user doesn’t have to enter all the info again and again.

Caching the form data in window.localStorage

I hate it soooo muuuuuch when I write a huge comment but close the window by accident or click by accident anywhere else on the page and the whole message / comment has gone 🙁 Therefore all the forms I develop, store the data in localStorage of the browser. Each form has its own entry. So you can write even multiple comments simultaneously ( if you’re kind of gaga 😉 or if you have to lead a comment war 😀 ) and don’t need to care about losing the text.

Manage comments on the frontend

If you are logged in and you have an admin role assigned to your account then you can delete and approve comments from the frontend without to reload the page. Child comments are deleted together with their parents and also removed instantly from the DOM / view.

Here is how the admin version of the comments looks like:

WordPress, wp rest api, ajax and vue.js comments

SEO support

The comments are visible to the bots, just append “?crawler” to any page on this site to see the bot version.

Coming soon

Reply form animation

Animation of the deleted comments (admins only)

Countless threads (currently only 2)

Cool morphing button animations 🙂

And I didn’t test it yet on all mobile devices, but on iOS works fine. Though mobile design is still in development.

Sometime this year

Real time comment conversation using WebSockets!

This would be really cool for a site with a huge community.

Comments

I really love these comments :D gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
And Even more to reply on some other comments :D gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Test gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.