Learning how and when to “extend” and “wrap” native SuiteCommerce code is a vital skill for developers. This article will explain the difference and the basics of how to do it within the context of SuiteCommerce development. It should be noted right away that “wrapping” is a form of “extending” code.
If you haven’t noticed already, every Backbone View and Model file you have ever written “extends” the baseline Backbone objects (return Backbone.View.extend).
What does “extend” mean?
- Extending code refers to taking an existing JavaScript object and adding, updating, or overwriting portions of it. This can include changing properties, functions, and really anything about the object
- Extending should occur when you wish to change the normal behavior or add new behavior to JavaScript objects. Usually this occurs by loading in native SuiteCommerce files and manipulating the object “prototype”. For example:
define('AddOnItems.CartLines.View',
[
'Cart.Lines.View',
'underscore',
'AddOnItemsOption.View',
],
function (
CartLinesView,
_,
AddOnItemsOptionView
) {
'use strict';
return {
loadModule: function () {
_.extend(CartLinesView.prototype,{
childViews: _.extend(CartLinesView.prototype.childViews,{
'AddOnItems.Option': function () {
return new AddOnItemsOptionView({
model: this.model,
collection: (this.parentView && this.parentView.collection)
});
}
}),
getContext: _.wrap(CartLinesView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
context.linkAttributes = this.model.getFullLink({
quantity: null,
location: null,
fulfillmentChoice: null,
custcol_ag_parent_of_addon: null
});
return context;
})
});
}
};
});In this example, the native SuiteCommerce View “Cart.Lines.View” is loaded into the file. The underscore “extend” function is then used to extend the object prototype. There are other ways to extend objects, but this is a common one. The native object changes such that a new child view is added to the “childViews” attribute, and the “getContext” function is wrapped to add data to the returned object (see wrapping below).
What is a “wrap” function?
“wrapping” refers to wrapping an existing function inside of one you define. Many NetSuite developers commonly (maybe exclusively) use the underscore “wrap” function to do this. Wrapping allows the user to either:
- Change the incoming arguments of a function before the function runs or
- Run additional code after the function executes, usually to manipulate the object being returned by the native function. (This use of wrap is used far more often, and is generally safer.)
In the example above, the “getContext” function is wrapped. The context variable defined above on line 31 is the object that was returned from the original “getContext” function. The wrap function then takes that “context” and adds data to it on line 33 and then returns this new object instead.
Author: Sam Gagliardi
Looking for SuiteCommerce Development Suport?
Hopefully, this post helped you learn more about extending and wrapping. If you have general questions about SuiteCommerce or are looking for a SuiteCommerce developer to help support you in these areas, feel free to contact us at any time! Anchor Group is a certified Oracle NetSuite Alliance Partner & Commerce Partner, and is equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!
