We can use this independent extension to add a Google Customer Review to the order confirmation page of the Suite Commerce website.
JavaScript:
if (Configuration.get("customerReview.show")) {
_.extend(OrderWizardModuleConfirmation.prototype, {
initialize: _.wrap(OrderWizardModuleConfirmation.prototype.initialize, function (fn) {
fn.apply(this, _.toArray(arguments).slice(1));
}),
childViews: _.extend({}, OrderWizardModuleConfirmation.prototype.childViews, {
'GoogleCustomerReview.View': function () {
const lines = this.model.get("confirmation").get("lines").models;
const shippAddress = _.find(this.model.get("addresses").models, shipp => shipp.id === this.model.get("shipaddress"));
return new GoogleCustomerReviewView({
lines: lines,
orderId: this.order_id,
confirmationNumber: this.confirmation_number,
shippAddress: shippAddress.attributes
});
}
}),
});
}
Review.View.js
// @module JJ.GoogleCustomer.Review
define('JJ.GoogleCustomer.Review.View'
, [
'jj_googlecustomer_review.tpl'
, 'Backbone',
"Profile.Model",
"SC.Configuration"
]
, function (
jj_googlecustomer_review_tpl,
Backbone,
ProfileModel,
Configuration
)
{
'use strict';
// @class JJ.GoogleCustomer.Review.View @extends Backbone.View
return Backbone.View.extend({
template: jj_googlecustomer_review_tpl,
initialize: function (options) {
let self = this;
self.profile = ProfileModel.getInstance();
self.gtinData = _.map(options.lines, data => {
return {"gtin":data.attributes.item.attributes.itemid}
})
},
formatDate: function formatDate(deliveryDays) {
let date = new Date();
date.setDate(date.getDate() + deliveryDays);
let deliveryDate = new Date(date);
let month = '' + (deliveryDate.getMonth() + 1), day = '' + (deliveryDate.getDate()), year = deliveryDate.getFullYear();
month.length < 2 && (month = '0' + month);
day.length < 2 && (day = '0' + day);
return [year, month, day].join('-');
},
getContext: function getContext(){
//@class JJ.GoogleCustomer.Review.View.Context
return {
merchantId : Configuration.get("customerReview.merchantId") ?? "509835311",
email: this.profile.get("email"),
shippConntry: this.options.shippAddress && this.options.shippAddress.country ? this.options.shippAddress.country : "US",
deliveryDate: this.formatDate(parseInt(Configuration.get("customerReview.deliveryDays") ?? 1)),
orderId: this.options.confirmationNumber,
gtinData: JSON.stringify(this.gtinData)
};
}
});
});
Configuration:
{
"type": "object",
"subtab": {
"id": "googlecustomerreview",
"title": "Google Customer Review",
"description": "Google Customer Review",
"group": "extensions"
},
"properties": {
"customerReview.show": {
"group": "extensions",
"subtab": "googlecustomerreview",
"type": "boolean",
"title": "Enable Google Customer Review",
"description": "check this checkbox to enable the google customer review on the checkout section",
"default": true
},
"customerReview.merchantId": {
"group": "extensions",
"subtab": "googlecustomerreview",
"type": "string",
"title": "Google Merchant Id",
"description": "Google Merchant Id xxxxxxxx",
"default": "509835311"
},
"customerReview.deliveryDays": {
"group": "extensions",
"subtab": "googlecustomerreview",
"type": "number",
"title": "Delivery Days from current Date",
"description": "total number of days from the current days to delivery",
"default": "1"
}
}
}
jj_googlecustomer_review.tpl
<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer>
</script>
<script>
window.renderOptIn = function () {
window.gapi.load('surveyoptin', function () {
window.gapi.surveyoptin.render(
{
"merchant_id": "{{merchantId}}",
"order_id": "{{orderId}}",
"email": "{{email}}",
"delivery_country": "{{shippConntry}}",
"estimated_delivery_date": "{{deliveryDate}}",
"products": '{{{gtinData}}}',
});
});
}
</script>
<!-- END GCR Opt-in Module Code -->
<!-- BEGIN GCR Language Code -->
<script>
window.___gcfg = {
lang: 'en_US'
};
</script>
<!-- END GCR Language Code -->