Product Comments module displays raw JSON instead of updating the DOM

[jak78]

Prerequisites

• I understand and accept the project's code of conduct.
• I have already searched in existing issues and found no previous report of this bug.

Describe the bug and add attachments

When I submit the form to submit a product comment using the native Prestashop Product Comments module, the raw JSON is displayed. Feel free to watch the enclosed screen recording.
The behavior is the same wether the form submission is an error (error message) or a success (no error message).
I can reproduce the issue on both Chrome (latest version) & Firefox (latest version)

Screen.Recording.2024-05-04.at.00.10.19.mp4

Expected behavior

I would expect the HTML page to be updated instead and display a message to the user.

Steps to reproduce

1. Go to a product page
2. Click the button to show the product comment form
3. Submit a comment

PrestaShop version(s) where the bug happened

8.1.5

PHP version(s) where the bug happened

8.1.12

If your bug is related to a module, specify its name and its version

product comments 7.0.0

Your company or customer's name goes here (if applicable).

No response

[spanishsnapper]

Same error present on 8.1.3 (PHP version 8.2)

[leemyongpakva]

@spanishsnapper This bug comes from my recent implementation for @jak78 request make rating mandatory. If you use a theme with override module template (like hummingbird for example), you need add these two lines (inside <script> tag)

  var productCommentMandatoryMessage = '{l s='Please choose a rating for your review.' d='Modules.Productcomments.Shop' js=1}';
  var ratingChosen = false;  

at the very top of your theme's modules/productcomments/views/templates/hook/post-comment-modal.tpl file to make new implementation works correctly.
You can see an example for hummingbird theme at modules/productcomments/views/templates/hook/post-comment-modal.tpl

[spanishsnapper]

That fixed it - Thank you @leemyongpakva

[jak78]

@leemyongpakva thanks for implementing my suggestion. I use the classic theme version 2.1.1, there is no module template override, but I have the issue. Is there a workaround? I'd love to help solve the issue but I'm a beginner: feel free to provide me with instructions.

[leemyongpakva]

@jak78 I think it was a cache issue in your case. You can try CONFIGURE > Advanced Parameters > Performance > Clear Cache in Back-Office, and Clear browser cache in Front-Office.

[jak78]

Thanks. I just cleared the cache on the back office (do you mean the Smarty cache?) and the browser cache, but the issue still persists. Le lun. 13 mai 2024 à 07:51, Lee Pak ***@***.***> a écrit :

…

@jak78 <https://github.com/jak78> I think it was a cache issue in your case. You can try CONFIGURE > Advanced Parameters > Performance > Clear Cache in Back-Office, and Clear browser cache in Front-Office. — Reply to this email directly, view it on GitHub <#36093 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACV4HP3DKPIZ7ZKKTJSPNLZCBIHTAVCNFSM6AAAAABHGHHTUCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBWG4YDMMJZGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[leemyongpakva]

Yes, we usually call it Smarty cache. I see you use Classic theme but with its child_classic also. If you have no module template override in your child_classic theme, then I only have one solution left for you (: copy your_site_root/modules/productcomments/views/templates/hook/post-comment-modal.tpl file to your_site_root/themes/classic/modules/productcomments/views/templates/hook folder.

[spanishsnapper]

@jak78 I see your site is en françias.
I also had to regenerate translations to make sure I had a translation for the new variable on a site that was in Spanish.
Before I did it, the invalid translation was causing a javascript error that prevented the subsequent code from executing.
You could try that to see if it solves issue.

[jak78]

Yes, we usually call it Smarty cache. I see you use Classic theme but with its child_classic also. If you have no module template override in your child_classic theme, then I only have one solution left for you (: copy your_site_root/modules/productcomments/views/templates/hook/post-comment-modal.tpl file to your_site_root/themes/classic/modules/productcomments/views/templates/hook folder.

Thanks @leemyongpakva - I've just done that, then cleaned the Smarty cache and the browser cache, but the issue persists.

[jak78]

@leemyongpakva I've figured out the issue 🎉
One translation contained a ' character. That triggered a JavaScript error as seen on the screenshot below:

I've escaped the character in the translation string and now it works!

[jak78]

I guess there would be some escaping to implement in the module

[leemyongpakva]

@jak78 Great, we still need some improvements on this feature.

[florine2623]

@jak78 ,

I can't reproduce your issue on my end :

Screen.Recording.2024-05-15.at.14.56.01.mov

I'm using productcomments v7.0.0, PS 8.1.5 and PHP 8.1.13.

@leemyongpakva , does this issue needs a PR ? Should I keep it open ?

Thanks!

[jak78]

@florine2623 did you try to use a ' character in a transation string as described here?

[leemyongpakva]

@florine2623 Yes, this issue really a need a PR to solve escaping for special character in JS message variables (jak78 case) and 3rd party themes that have its own productcomments template override (spanishsnapper case).

[leemyongpakva]

@jak78 Is ' character above shipped with original productcomments module or customized by yourself ?

[jak78]

@jak78 Is ' character above shipped with original productcomments module or customized by yourself ?

@leemyongpakva the French translation string for 'Please choose a rating for your review.' is missing from the productcomments module translation. I had to customize the string to ensure that the text is displayed in French. My French translation contains a ' character.