Best Practices: Choosing the Best Way to Add Savings Amounts for Quantity Pricing (SCA)

In NetSuite a product is set up with quantity pricing (also known as volume pricing or bulk discounts), which means that there is a predefined schedule of pricing: as the user increases the quantity of an item, the price goes down. By default, we illustrate this by striking through the base price and then highlighting the discounted price.

Additional Requirement maybe:

1. The price difference per item
2. The saving amount as a percentage

• Price difference per item = base price – schedule price
• Saving percentage = (1 – (schedule price / base price)) * 100
  When we tell getItemInfo() to return the item’s data, the source code has been instructed to return a shallow copy of the model’s attributes property. A shallow copy means rather than duplicating the values, you create references to them. This is useful because it means that when the product model changes, so do the values returned from getItemInfo().

define('CodeSample.SavingsPrice.SavingsPrice'
, [
    'underscore' // Only required if you're using option 1
  , 'ProductViews.Price.View' // Only required if you're using option 2 or 3
  , 'PluginContainer' // Only require if you're using option 3
  , 'CodeSample.SavingsPrice.SavingsPrice.View'
  ]
, function
  (
    _
  , PriceView
  , PluginContainer
  , SavingsPriceView
  )
{
  'use strict';

  return {
    mountToApp: function mountToApp (container)
    {
      var PDP = container.getComponent('PDP');

      // Set to 1 if you want to use this an edit to your template
      // Set to 2 if you want to use a separate view and template
      // Set to 3 to use pre-extensibility customization methods
      // This is obviously just for demonstration purposes, don't include it in your final code
      var option = 1;

      if (PDP && option != 3)
      {
        if (option == 1)
        {
          PDP.addToViewContextDefinition('ProductViews.Price.View', 'savingsPrice', 'string', function (context)
          {
            return _.formatCurrency(context.comparePrice - context.price)
          });

          PDP.addToViewContextDefinition('ProductViews.Price.View', 'savingsPricePercentage', 'string', function (context)
          {
            // Note that using Math.floor eliminates decimal places and rounds down. If you require more precision, you can use something like toFixed(2) instead
            return Math.floor((1-(context.price / context.comparePrice)) * 100) + '%'
          });

          /*

          Add the following to product_views_price.tpl in the {{#if showComparePrice}} blocks:

          <p>{{translate 'You\'ll save $(0) per item ($(1))' savingsPrice savingsPricePercentage}}</p>

          */
        }

        else if (option == 2)
        {
          PDP.addChildView('Product.Price', function ()
          {
            return new SavingsPriceView({application: container})
          });
        }
      }

      else if (option == 3)
      {
        // This option is what you would do if you don't have access to the above two methods
        // The main customization is the modification of the price view prototype to add to the childViews object
        // Instead of adding a new child view, you could also just add new properties to the view's context object
        PriceView.prototype.childViews = PriceView.prototype.childViews || {}

        PriceView.prototype.childViews.SavingsPriceView = function ()
        {
          // One of the things that's quite different about the `addChildView()` method on components in the extensibility API, and adding new views directly to the `childViews` property of a view is anything you pass to the constructor in `addChildView()` gets added to the view instance's `options` object; whereas anything you add to the constructor of a view passed into `childViews` gets added automatically as those properties.
          // In other words, the following method lets us set the `application` and `model` properties directly, whereas we have to set them in the view file after passing them in as options.`
          return new SavingsPriceView
          ({
            application: container
            // Because we're extending the view object the scope of `this` gets set to the class itself, which means that we don't need to faff around trying to set it: we can just pass it on from the price view
          , model: this.model
          })
        }

        // The plugin container can be used to modify a view's template at various stages of compilation or rendering.
        PriceView.prototype.preRenderPlugins = PriceView.prototype.preRenderPlugins || new PluginContainer();

        PriceView.prototype.preRenderPlugins.install
        ({
          name: 'SavingsPriceContainer'
        , execute: function ($el, view)
          {
            $el
              .find('.product-views-price-old')
              .after('<div data-view="SavingsPriceView"></div>');
            return $el
          }
        });
      }
    }
  }
});

There are 4 ways we could do this:

Option 1: Add to an Existing View’s Context Using the Extensibility API
Option 2: Add a New Child View Using the Extensibility API
Option 3: Pre-Extensibility Approaches
Option 4: Using Plugin