Needed to have the price discounted on the PLP and PDP pages. There is no standard feature for updating the price discount label on the website. So we need to customize the PLP and PDP pages.
Code added here,
define(
'JJ.offerplp.offerplp'
, [
'JJ.offerplp.offerplp.View','Facets.ItemCell.View','ProductViews.Price.View'
]
, function (
offerplpView,FacetsItemCellView,ProductViewsPriceView
)
{
'use strict';
var saveprice;
return {
mountToApp: function mountToApp (container)
{
// using the 'Layout' component we add a new child view inside the 'Header' existing view
// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
// more documentation of the Extensibility API in
// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
_.extend(FacetsItemCellView.prototype, {
getContext: _.wrap(FacetsItemCellView.prototype.getContext, function getContext(fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
_.each(this.model.collection.models, function (eachResult) {
var onlineprice =eachResult.attributes.onlinecustomerprice;
var baseprice=eachResult.attributes.pricelevel62;
saveprice =((baseprice-onlineprice)/baseprice)*100;
context.saveprice=saveprice;
});
return context;
})
});
_.extend(ProductViewsPriceView.prototype, {
getContext: _.wrap(ProductViewsPriceView.prototype.getContext, function getContext(fn) {
var contextinside = fn.apply(this, _.toArray(arguments).slice(1));
return contextinside;
})
});
}
};
});Make the changes in corresponding template file and sass file for giving proper style.
Result
PLP Page
PDP page
