Jump to content

Stars not working in Product Comments

nellybongo
 Share

Recommended Posts

nellybongo Newbie

nellybongo

Posted
Posted

Hi All,

 

I am completely new to this and was hoping someone could help me, I am having problems with the inbuilt review system under the Product Comments Module,

 

For some unknown reason the rating stars are always stiuck on 3, it wont allow you to select any other number, I think it maybe a javascipt conflict,

 

Has anyone come across this before, i`m using 1.5.2, new install with responsive theme,

 

The site can be viewed here I will be quite happy to pay a small amount for any help with this as I need a good review system,

 

Or does someone know of one I can purchase, I have already tried one from egrovesystem.com but it completly messed up the theme and put me back a week.

 

Any advice or help would be most grateful.

Link to comment
Share on other sites
Paulito Newbie

Paulito

Posted
Posted

Good Morning,

 

I have the same problem with the default module and like you I am not sure why it does not work properly.

 

Their is one from Presta add-ons Here which will work for PS 1.3 to PS 1.5.2 but have not tried it also another Here from Module Bazaar

 

Hope this helps

 

Paul

Link to comment
Share on other sites
nellybongo Newbie

nellybongo

Posted
  • Author
Posted (edited)

Hello,

 

Thank you both for your comments, thought i was going mad ! Sorry the website is now open for you to see the comments ratings, could you confirm that the stars stay on three ? and you are unable to select the star rating, i`m sure its a theme problem as I have tested in default theme but not sure if its the css or javascript,

 

Yes Halenoor, tried uninstalling, this is a new install of PS, only two products on shop at the moment.

 

The review system from Module Bazaar is the same one as Egrovesystems, although very helpful they completly messed up my site which was live, (wont do that again),

 

So what I have done is sent them the theme to install and work out the problem locally and hopefully they can send me and upgrade.I will post here when I hear from them.

 

Did you get any other review system working ?

Edited by nellybongo (see edit history)
Link to comment
Share on other sites
nellybongo Newbie

nellybongo

Posted
  • Author
Posted

Hi Prince,

 

Well they have contacted me this morning and sai they are working on a new update for my site so I will keep you updated, they are very helpful but I think any modifications would be much safer to implement on a local machine and like I have done, send them the theme you are using.

 

Thanks for the reply

Link to comment
Share on other sites
  • 2 months later...
  • 1 year later...
  • 1 year later...
  • 3 weeks later...
  • 11 months later...
electrostuff_de Newbie

electrostuff_de

Posted
Posted

Tested in Prestashop 1.6.1.7:

 

1. GoTo themes/{YOURTHEME}/css/modules/productcomments

Note: {YOURTHEME} is your custom theme name or the default-theme

2. open productcomments.css (recommendation: edit with Notepad++)

3. Change following lines:

#product_comments_block_extra div.star:after {

    content: "\f006";

#product_comments_block_extra div.star_on:after {

    content: "\f006";

Change the value f006 to f005

 

4. GoTo themes/{YOURTHEME}/css/

Note: {YOURTHEME} is your custom theme name or the default-theme

 

5. Open globalmd.css

(recommendation: edit with Notepad++,download page: https://notepad-plus-plus.org/download/v6.9.2.html

 

search following codeblock:

div.star.star_on {
  display: block; }
  div.star.star_on:after {
    content: "\f006";
    font-family: "FontAwesome";
    display: inline-block;
  }

Change the value f006 to f005

 

Another recommendation: Do NOT use the "search and replace" Function in Notepad++, otherwise all Stars would be shown as a filled star.

 

Another recommendation: Adding following line will customize your color of rated stars:

(in each css, put it directly under the line, where you changed the value f006 to f005)

color: #ffc000;

So our colored-code would look like:

div.star.star_on {
  display: block; }
  div.star.star_on:after {
    content: "\f006";
    font-family: "FontAwesome";
    display: inline-block;
    color: #ffc000;
  }

Another recommendation: For those of you, who dont wanna have stars as symbol, check following Link:

 

http://astronautweb.co/snippet/font-awesome/

 

UPDATE:

 

it was too complicated to document every step, unless I don't have really much time for it :/ - whatever, here's the complete Code for the productcomments.css:

#product_comments_block_extra {

    float: left;

    margin: 0;

    padding: 0; 

    font-weight: normal;

    line-height: 18px;

    border: none;

    background: #FFF;

    

}

#product_comments_block_extra .comments_note {

    float: left;

    display: block;

    margin-right: 5px;

    margin-bottom: 6px;     

}

#product_comments_block_extra .comments_note span,

#product_comments_block_extra .star_content {

    float: left;

    color: #ffc000; 

}

#product_comments_block_extra .star_content {

    margin-top: 1px; 

}

#product_comments_block_extra div.star:after {

    content: "\f006";

    font-family: "FontAwesome";

    display: inline-block;

    color: #222221; 

}

#product_comments_block_extra div.star_on:after {

    content: "\f005";

    font-family: "FontAwesome";

    display: inline-block;

    color: #ffc000; 

}

#product_comments_block_extra .comments_advices {

    float: left;

    margin-bottom: 6px; 

}

.comments_advices {

    padding-top: 0px; 

}

.comments_advices li {

    display: inline-block;

    line-height: 18px; 

}

.comments_advices a {

    text-decoration: none;

    color: #666;

    position: relative;

    margin-right: 8px;

    line-height: 18px;

    padding: 0;

    display: inline-block;

    font-size: 14px;

    font-weight: normal 

}

.comments_advices a:before {

    display: inline-block;

    font-family: "FontAwesome";

    font-size: 14px;

    font-weight: normal;

    height: 18px;

    line-height: 18px;

    margin-right: 2px;

    text-align: center;

    width: 16px; 

}

.comments_advices a.open-comment-form:before {

    content: "\f040"; 

}

.comments_advices a:hover {

    color: #333333; 

}

.comments_advices a.reviews {

    border-right: 1px solid #e1e1e1;

    padding-right: 10px;

    margin-right: 5px; 

}



/* pop-in add grade/advice ********************************************************************* */

#fancybox-wrap {

width: 585px; }



#fancybox-content {

width: 585px;

border-width: 0; }



#new_comment_form {

overflow: hidden;

color: #333333;

text-align: left; }

#new_comment_form h2 {

    padding: 0 0 13px;

    margin-bottom: 15px;

    font-size: 16px;

    font-family: Arial;

    border-bottom: 1px solid #ccc;

}

#new_comment_form .title {

padding: 10px;

font-size: 14px;

color: white;

text-transform: uppercase;

background: #333333; }

#new_comment_form ul.grade_content {

list-style-type: none;

margin: 0 0 20px 0; }

#new_comment_form ul.grade_content li {

width: 50%; }

#new_comment_form ul.grade_content span {

display: inline-block;

padding: 0 10px;

width: 150px;

font-weight: bold; }

#new_comment_form ul.grade_content .cancel {

margin-right: 5px; }

#new_comment_form .product {

    padding: 0 15px;

}

#new_comment_form .product img {

border: 1px solid #d6d4d4; }

#new_comment_form .product .product_desc {

line-height: 18px;

color: #666; }

#new_comment_form .product .product_desc .product_name {

    padding: 15px 0 0 0;

    font-size: 14px;

    color: #393939;

    margin-bottom: 10px;

}

#new_comment_form .new_comment_form_content {

    padding: 0 25px 15px 15px;

    background: #FFF;

}

@media (max-width: 767px) {

#new_comment_form .new_comment_form_content {

padding-left: 25px; } }

#new_comment_form .new_comment_form_content .intro_form {

padding-bottom: 10px;

font-weight: normal;

font-size: 14px; }

#new_comment_form label {

display: block;

margin: 12px 0 4px 0;

font-weight: normal;

font-size: 14px; }

#new_comment_form input,

#new_comment_form textarea {

padding: 0 5px;

height: 28px;

width: 100%;

border: 1px solid #ccc;

background: white; }

#new_comment_form textarea {

height: 80px; }

#new_comment_form .submit {

margin-top: 20px;

padding: 0;

font-size: 13px;

text-align: right; }

#new_comment_form #criterions_list {

border-bottom: 1px solid #CCC;

padding-bottom: 2px;

list-style-type: none; 

}

#new_comment_form #criterions_list li {

margin-bottom: 10px; }

#new_comment_form #criterions_list label {

display: inline;

float: left;

margin: 0 10px 0 0; }

#new_comment_form #criterions_list .star_content {

float: left; }

#new_comment_form #new_comment_form_footer {

margin-top: 20px;

font-size: 12px; }



/* TAB COMMENTS ******************************************************************************** */

#product_comments_block_tab {

    margin: 0 0 20px 0; 

}

#product_comments_block_tab div.comment {

    margin: 0 0 14px;

    padding-top: 14px;

    border-top: 1px solid #e8e8e8; 

}

#product_comments_block_tab div.comment:first-child {

    padding: 0;

    border: none; 

}



#product_comments_block_tab div.comment .comment_author {

    padding: 0 10px 0 0;

    line-height: 18px

}

#product_comments_block_tab div.comment .comment_author .star_content {

    display: inline-block;

    vertical-align: middle;

    margin: 0; 

}

#product_comments_block_tab div.comment .comment_details {

    overflow: hidden;

    border-left: 1px solid #e8e8e8; 

}

@media (max-width: 991px) {

#product_comments_block_tab div.comment .comment_details {

border-left: none; }

#product_comments_block_tab div.comment .comment_details ul {

list-style-type: none;

margin: 0; }

#product_comments_block_tab div.comment .comment_details ul li {

padding: 2px 0 2px; }

#product_comments_block_tab div.comment .comment_details ul li:before {

font-family: "FontAwesome";

content: "\f0da";

color: #333333;

margin-right: 8px; } }

#product_comments_block_tab div.star:after {

content: "\f006";

font-family: "FontAwesome";

display: inline-block;

color: #222221; }

#product_comments_block_tab div.star_on:after {

content: "\f005";

font-family: "FontAwesome";

display: inline-block;

color: #ffc000; }

#product_comments_block_tab .comment_author_infos {

clear: both;

padding-top: 9px; }

#product_comments_block_tab .comment_author_infos strong {

display: inline-block;

color: #393939; }

#product_comments_block_tab .comment_author_infos em {

color: #adadad; }

#product_comments_block_tab a {

text-decoration: none;

font-weight: bold; }

#product_comments_block_tab span.report_btn {

cursor: pointer; }

#product_comments_block_tab span.report_btn:hover {

text-decoration: underline; }



.fl {

float: left; }



.fr {

float: right; }



p.fl.required {

    margin-top: 5px;

}

#product_comments_block_tab .usefulness_btn {

    margin-left: 10px;

    display: inline-block;

}

just copy the whole Code and replace it with your code, if you have not made any changes to productcomments.css

 

Have fun with a working solution now!

Link to comment
Share on other sites
  • 1 month later...
 Share
Go to topic listing
×
×
  • Create New...