Jira Code: IBT-38,40
All PDP review customization as one extension. We have extended the Global view for our use.
//EXTENSION JS
define(
'JJ.ProductReviews.ReviewsExtended', [
'Global.StarRating', 'ProductReviews.Center.View', 'GlobalViews.StarRating.View', 'GlobalViews.Pagination.View', 'Backbone'
],
function(
ReviewsExtendedView, ProductReviewsCenterView, GlobalViewsStarRatingView, GlobalPaginationView, Backbone
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
var pdp = container.getComponent('PDP');
var model, ratingObj, item, self = this,
ratingObjReady = false;
if (pdp) {
pdp.addToViewContextDefinition('ProductDetails.Full.View', 'test1', 'string', function(context) {
model = new Backbone.Model(context.model);
item = new Backbone.Model(model.get('item'));
return '';
});
pdp.addToViewEventsDefinition('ProductDetails.Full.View', 'click [data-action="scrollToreview"]', function() {
$('html, body').animate({
scrollTop: $('.product-reviews-center-content').offset().top - 15
}, 1000);
});
pdp.addToViewContextDefinition('ProductReviews.Center.View', 'ratingCount', 'number', function(context) {
var ratingCount = model.get('item').custitem_ns_pr_rating;
return ratingCount;
});
pdp.removeChildView('ProductReviews.Center.View', 'Global.RatingByStar');
pdp.addToViewEventsDefinition('GlobalViews.Pagination.View', 'click [data-action="scroll"]', function() {
if ($("div").hasClass("product-reviews-center-more-info-content-container")) {
$('html, body').animate({
scrollTop: $(".global-views-pagination").offset().top
}, 2000);
}
});
pdp.addToViewContextDefinition('ProductReviews.Review.View', 'reviewText', 'string', function(context) {
var reviewText = stripHTML(context.reviewText);
return reviewText;
});
pdp.addToViewContextDefinition('ProductReviews.Review.View', 'reviewCreatedOn', 'string', function(context) {
var reviewCreatedOn = new Date(context.reviewCreatedOn);
return convertDate(reviewCreatedOn);
});
pdp.addChildViews(
pdp.PDP_FULL_VIEW, {
'Global.StarRating': {
'Global.StarRating': {
childViewIndex: 10,
childViewConstructor: function() {
return new ReviewsExtendedView({ model: item, showRatingCount: false, showValue: false });
}
}
}
}
);
pdp.addChildView('Global.StarRating.Custom', function() {
return new ReviewsExtendedView({ model: item, showRatingCount: true });
});
function stripHTML(text) {
text = text.replace(/(<br\ ?\/?>)+/gi, '<br/>');
return text.replace(/<br\s*[\/]?>/gi, '\n').replace(/<(?:.|\n)*?>/gm, '');
}
function convertDate(date) {
var monthNames = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
var day = date.getDate();
var monthIndex = date.getMonth();
var year = date.getFullYear();
return monthNames[monthIndex] + ' ' + day + ', ' + year;
}
}
}
};
});//JS CUSTOM VIEW: EXTENDED FROM GLOBAL VIEW
// @module JJ.ProductReviews.ReviewsExtended
define('Global.StarRating'
, [
'global_views_star_rating.tpl'
, 'Utils'
, 'Backbone'
, 'jQuery'
, 'underscore'
, 'SC.Configuration'
]
, function (
global_views_star_rating_tpl
, Utils
, Backbone
, jQuery
, _
, Configuration
)
{
'use strict';
// @class JJ.ProductReviews.ReviewsExtended.View @extends Backbone.View
return Backbone.View.extend({
template: global_views_star_rating_tpl
, initialize: function (options) {
this.ratingObj=options.ratingObj;
this.options.value = this.model.get('custitem_ns_pr_rating') || 0;
this.options.ratingCount = this.model.get('custitem_ns_pr_count') || 0;
this.options.label = this.model.get('label') || '';
this.options.name = this.model.get('name');
}
, events: {
}
, bindings: {
}
, childViews: {
}
//@method getContext @return JJ.ProductReviews.ReviewsExtended.View.Context
, getContext: function getContext()
{
var fill_value = Math.round(this.options.value * 2) / 2
, max_value = this.options.max || Configuration.get('productReviews.maxRate', 5);
//@class GlobalViews.StarRating.View.Context
return {
//@property {Boolean} showLabelRating
showLabelRating: this.options.showLabelRating || false
//@property {Boolean} showLabel
, showLabel: !!(this.options.label)
//@property {String} label
, label: this.options.label || ''
//@property {String} name
, name: this.options.name || ''
//@property {Number} maxValue
, maxValue: max_value
//@property {Number} value
, value: this.options.value
//@property {Number} fillValue
, fillValue: fill_value
//@property {Number} filledBy
, filledBy: fill_value * 100 / max_value
//@property {Boolean} isWritable
, isWritable: !!this.options.isWritable
//@property {Array<Number>} buttons
, buttons: _.range(max_value)
//@property {Boolean} showValue
, showValue: !!this.options.showValue
//@property {Boolean} showRatingCount
, showRatingCount: !!this.options.showRatingCount
//@property {Number} ratingCount
, ratingCount: this.options.ratingCount
//@property {String} className
, className: this.options.className ? '-' + this.options.className : ''
//@property {Boolean} ratingCountGreaterThan0
, ratingCountGreaterThan0: this.options.ratingCount > 0
//@property {Boolean} hasOneReview
, hasOneReview: this.options.ratingCount === 1
//@property {Boolean} isInViewMode
, isViewMode: !(!!this.options.isReviewMode)
//@property {Boolean} isInEditorMode
, isReviewMode: !!this.options.isReviewMode
//@property {Array<Number>} writableStars
, ratedStars: (!!this.options.value) ? _.range(this.options.value) : _.range(max_value)
};
}
});
});//TEMPLATE: global_view_star_rating
<div class="global-views-star-rating" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating" data-validation="control-group">
<div class="global-views-star-rating-container">
{{#if showLabelRating}}
<div class="global-views-star-rating-content-rating">
<span class="global-views-star-rating-label-visible">
{{translate 'Rating'}}
</span>
</div>
{{/if}}
{{#if showLabel}}
<div class="global-views-star-rating-content-label">
<span class="global-views-star-rating-label" for="{{name}}">
{{label}}
</span>
</div>
{{/if}}
<div id="{{name}}" class="global-views-star-rating-area {{#if isReviewMode}}global-views-star-rating-area-review-mode{{/if}}" data-toggle='rater' data-validation="control" data-name="{{name}}" data-max="{{maxValue}}" data-value="{{value}}">
{{#if isWritable}}
<div class="global-views-star-rating-area-writable{{className}}">
{{#each buttons}}
<button type="button" data-action="rate" name="{{name}}" value="{{@indexPlusOne}}"></button>
{{/each}}
</div>
{{/if}}
<div class="global-views-star-rating-area-empty">
<div class="global-views-star-rating-area-empty-content">
{{#each buttons}}
<i class="global-views-star-rating-empty{{className}}"></i>
{{/each}}
</div>
</div>
<meta itemprop="bestRating" content="{{maxValue}}">
<div class="global-views-star-rating-area-fill" data-toggle='ratting-component-fill' {{#if isViewMode}} style="width: {{filledBy}}%"{{/if}}>
<div class="global-views-star-rating-area-filled">
{{#if isReviewMode}}
{{#each ratedStars}}
<i class="global-views-star-rating-filled{{className}} {{#unless ../isWritable}}global-views-star-rating-filled-rated-star{{/unless}}"></i>
{{/each}}
{{else}}
{{#each buttons}}
<i class="global-views-star-rating-filled{{className}}"></i>
{{/each}}
{{/if}}
</div>
</div>
</div>
{{#if showValue}}
<span class="global-views-star-rating-value" itemprop="ratingValue">
{{value}}
</span>
{{else}}
<meta itemprop="ratingValue" content="{{value}}">
{{/if}}
{{#if showRatingCount}}
<span class="global-views-star-rating-review-total">
{{#if ratingCountGreaterThan0}}
<span class="global-views-star-rating-review-total-number" itemprop="reviewCount">{{ratingCount}}</span>
{{#if hasOneReview}}
<span class="global-views-star-rating-review-total-review">{{ translate ' Review'}}</span>
{{else}}
<span class="global-views-star-rating-review-total-review">{{ translate ' Reviews'}}</span>
{{/if}}
{{else}}
<span class="global-views-star-rating-review-total-empty-number" itemprop="reviewCount">({{ratingCount}})</span>
<span class="global-views-star-rating-review-total-no-review">{{ translate ' No Reviews yet'}}</span>
{{/if}}
</span>
{{/if}}
</div>
</div>
{{!----
Use the following context variables when customizing this template:
showLabelRating (Boolean)
showLabel (Boolean)
label (String)
name (String)
maxValue (Number)
value (Number)
fillValue (Number)
filledBy (Number)
isWritable (Boolean)
buttons (Array)
showValue (Boolean)
showRatingCount (Boolean)
ratingCount (Number)
className (String)
ratingCountGreaterThan0 (Boolean)
hasOneReview (Boolean)
----}}