Implement a Star Rating System in the Item Info Section

Extended the childViews function of ProductLineSkuView and added Global.StarRating as a child view.
childViews: _.extend(ProductLineSkuView.prototype.childViews, {
'Global.StarRating': function () {
return new GlobalViewsStarRatingView({
model: this.model.get('item'),
showRatingCount: true,
showValue: true
});
}
})
Added a context variable to get the ratings and displays the rating in the product info section only if rating count is greater than 0.
getContext: _.wrap(ProductLineSkuView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
var ratingCount = this.model.get('item').get('_ratingsCount');
context.ratingCountGreaterThanZero = false;
if (ratingCount > 0) {
context.ratingCountGreaterThanZero = true;
};
return context;
})
{{#if ratingCountGreaterThanZero}}
<a data-action=”scroll”>
<div data-view=”Global.StarRating”></div>
</a>
{{/if}}
Added an event to perform the scroll action.
events: _.extend({}, ProductLineSkuView.prototype.events, {
'click [data-action="scroll"]': 'scrollToReview'
}),
// @method scrollToReview
scrollToReview: function () {
jQuery('#reviews').trigger('click');
let scrollHeight = jQuery('#reviews').offset().top - 200;
jQuery('html, body').animate({ scrollTop: scrollHeight }, 300);
}
The scrollToReview function has 2 steps. First, it triggers a click action on the review tab and then it scrolls to that section.
Increased the font-weight and changed the color of the text to match that of the text in the ‘Reviews’ subtab.
.global-views-star-rating-review-total {
color: $sc-color-h3;
line-height: 25px;
padding-left:$sc-padding-lv1;
font-weight: 700;
vertical-align: middle;
}

Leave a comment Cancel reply