We can display the quantity price as a drop down table and also table in the PDP page and quick view. for this we have created the child view to show the drop down box.
_.extend(ProductDetailsFullView.prototype, {
childViews: _.extend(ProductDetailsFullView.prototype.childViews, {
// for displaying the dropdown, quanitty box and table in the pdp page
'QuantityPricing': function () {
var self = this;
var item = this.model.get('item');
if (item.get('custitem_tag_qty_pricing')) {
var hasSitePriceLevel = Configuration.priceLevel.default;
var quantityPricingModel = new QuantityPricingModel();
if (Configuration.get('micrositeSolution') && hasSitePriceLevel) {
quantityPricingModel.fetch({
data: {
itemId: item.get('internalid'),
itemType: item.get('itemtype'),
priceLevel: hasSitePriceLevel
}
}).done(function done() {
var priceSchedule = {
priceschedule: quantityPricingModel.get('priceschedule')
}
item.set('microsite_price_detail', priceSchedule);
});
return new QuantityPricingView({
model: self.model,
priceSchedule: quantityPricingModel,
application: self.application
});
} else {
return new QuantityPricingView({
model: self.model,
priceSchedule: quantityPricingModel,
application: self.application
});
}
}
},
// for getting enhanced quantity
'EnhancedQuantityPricing': function () {
var self = this;
var matrixChilds = this.model.get('item').get('_matrixChilds').length;
if (matrixChilds > 0) {
if (this.model.getSelectedMatrixChilds().length > 0) {
var matrixSubItemId = (this.model.getSelectedMatrixChilds()[0]).get('internalid');
}
}
if (Configuration.get('micrositeSolution')) {
if (this.model.get('item').get('custitem_tag_enhc_qty_pricing') && this.model.get('item').get('internalid')) {
var quantityPricingModel = new QuantityPricingModel();
var hasSitePriceLevel = Configuration.priceLevel.default;
if (hasSitePriceLevel) {
quantityPricingModel.fetch({
data: {
itemId: self.model.get('item').get('internalid'),
itemType: self.model.get('item').get('itemtype'),
priceLevel: hasSitePriceLevel
}
}).done(function done() {
var priceSchedule = {
priceschedule: quantityPricingModel.get('priceschedule')
}
self.model.set('microsite_price_detail', priceSchedule);
});
}
return new QuantityPricingEnhanceView({
model: self.model,
priceSchedule: quantityPricingModel,
application: self.application
});
}
}
},
// for displaying the quantity box
'NormalQuantityPricing': function () {
var self = this;
var itemInfo = this.model.get('item');
if (Configuration.get('micrositeSolution')) {
if (itemInfo.get('internalid')) {
var quantityPricingModel = new QuantityPricingModel();
var hasSitePriceLevel = Configuration.priceLevel.default;
if (hasSitePriceLevel) {
quantityPricingModel.fetch({
data: {
requestType: 'single',
itemId: itemInfo.get('internalid'),
itemType: itemInfo.get('itemtype'),
priceLevel: hasSitePriceLevel
}
});
}
return new QuantityPricingNormalView({
model: quantityPricingModel,
application: self.application
});
}
}
},
//To display drop down box for enhanced quantity
'SelectQuantityBox': function () {
var self = this;
var Configuration = SC.CONFIGURATION;
var priceSchedule = []
if (Configuration.get('micrositeSolution')) {
if (self.model.get('item').get('custitem_tag_enhc_qty_pricing') && self.model.get('item').get('internalid')) {
var quantityPricingModel = new QuantityPricingModel();
var hasSitePriceLevel = Configuration.priceLevel.default;
if (hasSitePriceLevel) {
quantityPricingModel.fetch({
data: {
itemId: self.model.get('item').attributes.internalid,
itemType: self.model.get('item').attributes.itemtype,
priceLevel: hasSitePriceLevel
}
}).done(function done() {
priceSchedule = {
priceschedule: quantityPricingModel.get('priceschedule')
}
_.each(priceSchedule.priceschedule, function (line, index) {
line.maximumquantity = parseInt(line.maximumquantity);
line.minimumquantity = parseInt(line.minimumquantity);
line.price = parseInt(line.price);
line.index = index;
})
self.model.set('microsite_price_detail', priceSchedule.priceschedule);
});
}
return new QuantityPricingSelectView({
model: self.model,
priceSchedule: quantityPricingModel,
application: self.application
});
}
}
}
}),
getContext: _.wrap(ProductDetailsFullView.prototype.getContext, function (fn) {
var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
var displayQuantity = false;
var enhanceQuantity = this.model.get('item').get('custitem_tag_enhc_qty_pricing');
var showQuantity = this.model.get('item').get('custitem_tag_qty_pricing');
if (enhanceQuantity == true || showQuantity == true) {
displayQuantity = true;
}
if (enhanceQuantity) showQuantity = false;
originalRet.showtableQuantity = showQuantity;
originalRet.enhanceQuantity = enhanceQuantity;
originalRet.displayQuantity = displayQuantity;
return originalRet;
}),
});define('QuantityPricing.SelectView', [
'Backbone',
'SC.Configuration',
'quantity_pricing_select_view.tpl',
'jQuery',
'underscore'
], function (
Backbone,
Configuration,
quantityPricingSelectViewTpl,
jQuery,
_
) {
'use strict';
return Backbone.View.extend({
template: quantityPricingSelectViewTpl,
initialize: function (options) {
this.model = options.model;
this.priceSchedule = options.priceSchedule;
this.listenTo(this.priceSchedule, 'sync add remove change', jQuery.proxy(this.render, this));
},
events: {
'change [data-action="updateQuantities"]': 'updateQuantity'
},
updateQuantity: function (e) {
var valueQuantity = parseInt(e.target.value);
this.parentView.model.set('quantity', valueQuantity);
},
getContext: function getContext() {
try {
var price = this.model.get('price') || 0;
var pricingSchedule = this.model.get('_priceSchedule', true);
var quantityFromModel = 0;
if (this.model.get('item').get('custitem_tag_enhc_qty_pricing')) {
quantityFromModel = this.parentView.model.get('quantity');
}
if (Configuration.get('micrositeSolution')) {
pricingSchedule = this.priceSchedule.get('priceschedule');
}
var quantities = [];
var counter = 0;
_.each(pricingSchedule, function eachScheduled(schedule) {
if (schedule.maximumquantity && schedule.maximumquantity <= 50000) {
var quantity = parseInt(schedule.maximumquantity);
var price = quantity * (pricingSchedule[counter + 1].price * 1000);
price = price / 1000;
var newPrice = parseFloat(price).toFixed(2);
var formattedPrice = "$" + newPrice;
var formattedQuantity = quantity.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
var dot = formattedQuantity.indexOf('.');
formattedQuantity = formattedQuantity.substring(0, dot);
var customName = formattedQuantity + '- ' + formattedPrice;
if (quantityFromModel > 0) {
if (quantityFromModel == quantity) {
quantities.push({
name: customName,
value: quantity,
selected: true
});
} else {
quantities.push({
name: customName,
value: quantity,
selected: ''
});
}
} else {
quantities.push({
name: customName,
value: quantity,
selected: ''
});
}
}
counter++;
});
return {
quantities: quantities
};
} catch (e) {
console.log("Error occured in Quantityprice select view", e)
}
},
roundToTwo: function roundToTwo(num) {
return +(Math.round(num + "e+2") + "e-2");
},
formatPrice: function formatPrice(price) {
return "$" + price
},
formatQuantity: function formatQuantity(quantity) {
var newQuantity = quantity.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
var dot = newQuantity.indexOf('.');
newQuantity = newQuantity.substring(0, dot);
return newQuantity
}
});
});<select name="quantity" id="quantity" class="enhanced-quantity-select-cart" data-action="updateQuantities">
{{#each quantities}}
<option value="{{value}}" {{#if selected}}selected{{/if}}>{{name}}</option> {{/each}}
</select>