MilenKo

Custom comments form and list styling

Recommended Posts

Hello all.

I have almost completed my recipe project and am now again at a stage of implementing the comments and comments rating system. From my past notes of NowKnow I am able to make the custom form using the API sample here however I had no need to allow rating the comments and eventually use the comments to rate the recipe. Now I decided to try to implement the comments system by the standard way of rendering them. For the purpose I created a field 'comments' and assigned it to my recipes_inner template. After adding a feew comments I was able to see them in the page as well as the form to add a few new. So this proved that the setup works and now I am at a stage of applying my custom styles to make the comments and the submission form appear properly. So reading any posts in regards to that matter i got a bit confused as to should I make a copy of the fieldtypecomment in my site/modules folder and apply the modifications directly there, or use some of the arguments provided here .

As far as I am not in a need of some heavy modifications of the code, other than applying my styles, would it be possible to apply all my classes via the arguments or it would still make more sense to edit the code of the module to make the changes there?

I am facing a few strange issues with the stars rating and comments votes:

1. When I mouse over to the stars, I am shown a number field above them with the chance to select a number from 1 to 5 instead of just hovering to the stars to set the rating.

2. When I select the rating to 0 using the down arrow and then try to go lower than 0, I get a message: Automatic Credit Card filing is disabled because this form does not use a secure connection

3. If I click on the comment voting buttons (up/down arrows) the number does not increase or decrease other than bringing me to the comment posting form.

At first I thought I am doing something wrong, but I do not have anywhere in my code the error about the credit card, so smth. else is happening.

Would a behavior of point 1, 2  or 3 be normal for the out-of-the box module installation and my calls:

<div class="recipe-comments">

<?php 

$count = count($page->comments); // Count the comments number

echo $page->comments->render(array(
'headline' => '<h3 class="lined">There are (' . $count . ') opinions about this recipe</h3>',
'commentHeader' => '<h5><a href="#">{cite}</a></h5><span class="time">({created})</span> {stars} {votes}',
    ));
?>
</div>

<div class="comment-form">
<?php echo $page->comments->renderForm() ?>
</div>

Besides that, what would you consider best option of applying my custom styles, as I don't see a way to provide any arguments for styling the comment appearance (other than the one for the comments posting) ?

Share this post


Link to post
Share on other sites
12 minutes ago, MilenKo said:

When I mouse over to the stars, I am shown a number field above them with the chance to select a number from 1 to 5 instead of just hovering to the stars to set the rating.

Most likely Javascript components didn't load

13 minutes ago, MilenKo said:

Automatic Credit Card filing is disabled because this form does not use a secure connection

Chrome gives this error on non-https forms

15 minutes ago, MilenKo said:

If I click on the comment voting buttons (up/down arrows) the number does not increase or decrease other than bringing me to the comment posting form

Again, if scripts don't load you'll get this behavior. 

Share this post


Link to post
Share on other sites

Oh, that would explain why the stars are pulling up that field as well as everything else. Thank you very much @abdus.

In regards to the custom comments form/listings which way you would go to style everything if you would use custom HTML provided? I am sure if I am building my htmls myself I would apply the default styles and simply render the forms, but am not yet there ;)

Share this post


Link to post
Share on other sites

Ok, I figured out why the comments rating and up/down vote system was not working. Initially I thought that I did not include the comments.css and comments.js files but they were included and the path was correct. The issue seemed to be with jquery that was loaded locally from the theme files. I am not sure why it would work for the rest but not for the comments, however as soon as I included the cdn version of 3.2.1, it all started working fine so now it is just to apply the custom style to render the comments as they should be in the theme.

I decided to copy the /wire/modules/Fieldtype/FieldtypeComments to my site modules folder /site/modules/FieldtypeComments and apply the modifications I need there, however I am not sure if that is the only requirement as far as any modifications that I have to site/modules instance are not applied, but those from /wire/ are showing... Anything I am missing here?

Share this post


Link to post
Share on other sites

Refresh the module cache, it should ask you which copy of the module to use.

  • Like 1

Share this post


Link to post
Share on other sites

@abdus Thank you very much for the precious advice. Will try that for sure to get how the system is working.

For the moment I decided to not edit the default module code, rather than using custom code that I used in a previous project and it worked sort of OK. I am saying sort of OK as I am not sure of a few things how to implement yet:

1. The time format of (X days ago) that is working fine if I render comments but in the custom code - not clear yet (how to call $cite or {cite} in my custom form without the use of external functions to iterate the date format.

2. How can I call the stars rating in my custom code.

3. Same thing for the comments voting.

 

 

Share this post


Link to post
Share on other sites

You may need to replicate ids, class names, and input names in your markup from the original form, and include js files for rating system to work.

Share this post


Link to post
Share on other sites

Ok. I seem to have another issue indirectly connected to the comments - the HTML theme is build on jquery 1.11.3 so the comments are not working (rating and vote). At first I tried to replace the call for 1.11.3 with the 3.2.1 but that breaks the pre-loader and the jquery popups. Tried to include both for the test, but it did not work either, so I will have to find a way to find the difference between 1.11.3 and 3.2.1 and update the jquery in order to use the proper functionality.

As far as my custom form is working for now, I don't think this is the best way to approach it, so will try to render the comments and edit the code to match my markup. This way will know that all the built in code would work fine.

P.S. Moving the files to my /js/ folder seemed to work now. Go figure what was the problem, but I am now with a working comments form and listings (rating, vote etc.) so will see what needs to be edited in the code to make it work and move on.

Share this post


Link to post
Share on other sites
10 hours ago, abdus said:

Refresh the module cache, it should ask you which copy of the module to use.

@abdus How can this be done? I have not activated the cache on the template to avoid similar issues, but is there another place to do clear as well for the module?

So to be clear, I just copies  the folder FieldtypeComments from /wire/modules/Fieldtype and pasted it to /site/modules/

Then went to clear the whole cache folder /site/assets/cache and I am still seeing the path of the FieldTypeComments to point to /wire/...

Trying to edit some of the code in /site/modules/FieldTypeComments is not showing on the frontend, but if I edit /wire/ one it does.

Share this post


Link to post
Share on other sites

Oh boy, that was easy... Ok, one thing less to worry (thanks to you again!!!)

Now the fun part would be how to edit the module to make it match my markup of the comments list and the form, but will see what's how now when jquery and module copy are out of the way. Thanks again, @abdus

Share this post


Link to post
Share on other sites

Just to add for those who might be taking my steps, it is not just enough to refresh the Modules, but there are 3 files to point to the new location which would appear in the notifications - module, form and list. I thought I was going crazy as even if I delete the whole file content, it was still showing the comments after I changed the first file path, but not all of them.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.