Topic Ratings Plugin

Hey, Santa Angus! Got some room in your busy schedule? :slight_smile:

https://github.com/angusmcleod/discourse-ratings/issues/11

Added :santa: Setting is rating_show_count; default is false.

https://github.com/angusmcleod/discourse-ratings/commit/0822e094a5fa25d875c615fcc07a1bbd02676d06

See further: https://discourse.angusmcleod.com.au/t/the-400-blows-truffaut/151

3 Likes

Dear Santa, thank you very much! I always believed you were real :blush:

1 Like

Thanks for Your time. Ok i will learn how to do it all becouse im not a programmer… Need some time. Pls tell me - should i learn a ruby laungage or not really ? Should i know somethink more ? How to learn it as fast as it possible (not for be a pro - just for myself needs)

@dalerka @hnaseri As discussed, I’ve updated the average / count style. It now looks like this:

54 PM

Both the Amazon style and the use of an emoji has issues. I think it’s best we keep it simple.

https://github.com/angusmcleod/discourse-ratings/commit/0b7b8fb908cb2073d3a95b3f3f17b9028092bfd2

Thanks for your suggestions :+1:

2 Likes

Thanks, Angus! I totally agree with you on KISS, but genuinely curious if you could expand on issues with Amazon’s approach. Is it about UX or Discourse-related?

There aren’t any inherent flaws with Amazon’s rating UI/UX or any inherent limitations in Discourse, it would just take considerably more work to achieve the same result in this plugin and there would be various UX tweaks to their approach and decisions that you’d need to make.

Effectively it would be a new feature-set rather than a UI tweak, which is all that is required for now.

Off the top of my head, some things you’d need to do would be:

  1. Fractional stars, which would entail a refactor of the CSS. Albeit, this has the minor caveat that the fractional star in Amazon typically does not represent the actual average. See the screenshot below for an example (4.5 according to the stars, 4.7 according to the text)

  2. Provide the rating breakdown from the server and set up the UI so that it’s consistent with the Discourse UI, e.g. the bar chart would be a new UI element you’d need to build specifically for this.

  3. Interactivity of the rating breakdown, i.e. in Amazon if you click on one of the ratings you see just those ratings. Once a rating breakdown is provided, the ability to filter the rating posts by rating is the natural next step.

Not to say that I wouldn’t want to do each of all of these things at some point, just not right now, particularly as these kind of features get more relevant when you’re dealing with consistently large volume of ratings, which (as far as I’m aware) we’re yet to see with this plugin.

1 Like

This is awesome!

I’ve been thinking how awesome a Discourse / ecommerce integration would be. There are heaps of third-party reviews systems, but they all to some extent take the SEO and community engagement away from your site.

IMO, this plugin + your Q&A plugin would work very nicely! Basically you could relate the post to a particular product (from say a CSV or XML product feed or ecommerce CMS’s API). I guess the ratings threads would need a way to restrict topic creation so that there is only one thread per product.

On the ecommerce CMS side you’d have some kind of widget that shows a snippet of the ratings and Q&A’s for that product, similar to the WP / Discourse integration.

Thoughts?

1 Like

Yes that’s all doable. I haven’t been doing a lot of work on the QnA plugin, so if you want to use that in a serious way you’ll need to take a close look at it and test its functionality thoroughly.

Not entirely sure what you mean here, but this would seem to be something your moderators would handle, at least initially.

Sounds a bit like you may want to also use Topic List Previews.

:crazy_face: Today I updated the plugin to (fd25572) and the Rating-stars disappeared from items of topics list view and on suggested topics list (i.e. I can still see the stars on a topic page).

I cannot find any elements with .topic-rating class in the source code of the topic list view. Is it a bug or is there a new setting I should enable?

Yup, minor bug. It will work as normal now. Thanks for reporting.

https://github.com/angusmcleod/discourse-ratings/commit/2607f452519a7ddf357c033bf6403fdd4e75a83b

1 Like

Thanks! So, (just for the record) previously the plugin rendered the .topic-rating nested under .social-footer and now it renders nested under .topic-title (in a topic-list view).

Now, I also see that in the suggested topics list sometimes (randomly) the .topic-rating and .topic-excerpt elements don’t get rendered at all. Any ideas why?

UPDATE: Don’t know why, but the later issue with excerpt and rating not rendering randomly has suddenly disappeared. Magic :smile:

Hm yeah. This is all about plugin outlet placement in the topic list item template(s). The Ratings plugin is now using the topic-list-after-title outlet.

I’ve handled the case you’re referring to. For social style, the plugin outlet will render content in the gutter now.

https://github.com/angusmcleod/discourse-topic-previews/commit/2f3d069d93e988f784bcacd64aac8c77a4fc23ad

1 Like

Haha, I’m sorry, didn’t mean to distract you.
The after-title position was actually preferable for me (even with Social style). My point was to help other people fix styling (target the right element). I made few CSS changes and removed hiding an extra middot.

So, if possible can you keep it the new way (i.e. rendering at after-title)?

UPDATE: Also with the recent update the .topic-ratings element doesn’t render on mobile (with social style topic list enabled). So, to keep it simple, maybe just render after title?

I’ve fixed the mobile outlet, but I’m sorry, I think it makes more sense for the social style to have the outlet in the footer by default - it’s where all the other topic info is in that style.

If you want to move the element on your instance (i.e. more than just using CSS), you can use jQuery:

Ember.run.scheduleOnce('afterRender', () => {
  const $topicRating = $('.topic-rating');
  const $target = $(target);
  $topicRating.appendTo($target);
});

This will make the topic-rating element the first child of whatever container you want to put it in.

1 Like

No, problem at all! As long as things are kept consistent across updates :slight_smile:
Thank you for all your hard work!

1 Like

Hey @angus,

I want to extend this to allow for multiple ratings instead of just one.
e.g. in my case Train reviews can include punctuality, cleanliness, food.

I’ve cloned the repo and exploring the code, a few pointers will be very helpful.

1 Like

Do you mean multiple ratings on one topic? Yes that could be done I suppose. Basically, you’ll need to add in additional custom fields, wherever the current rating custom fields are. And some conditional logic to handle the calculation of the average separately for each type.

For example, you may end up with something like this for saving the rating when a post is created:

  DiscourseEvent.on(:post_created) do |post, opts, user|
    if opts[:rating] || opts[:rating_type2]
      post.custom_fields['rating'] = opts[:rating] if opts[:rating]
      post.custom_fields['rating_type2'] = opts[:rating_type2] if opts[:rating_type2]
      post.custom_fields["rating_weight"] = 1
      post.save_custom_fields(true)
      RatingsHelper.handle_rating_update(post, opts)
    end
    ///

Then add some conditional logic in handle_rating_update to calculate averages and push those averages to the topic, for each type of rating.

The newest version makes opening the rating topic too slow. for example if other topics would open in two seconds, rating topic opens in 5 seconds.

on the other hand is there an option to remove stars from below topic title and just let them be inside the topic?

Can you give me an example of this? In my own testing on localhost, and on https://discourse.angusmcleod.com.au, rating topics load at the same speed as any other topic.

I’ve added settings for the average ratings in the topic and in the topic list:

https://github.com/angusmcleod/discourse-ratings/commit/c1ada78cbd12d6422b3fefa1faae2022c4447f04

1 Like