Members
-
componentName :String
-
Description
A unique name that identifies the component. Use the component name when getting a component, for example,
application.getComponent(componentName).Details
-
application :ComponentContainer
-
Description
The name which identify this kind of component. This name is used both for registering a new component and
getting a component implementation with ComponentContainerDetails
-
CART_VIEW :String
-
Description
Name of the cart main view. Use this name to reference views in methods such as addChildView() and addToViewContextDefinition().
-
CART_MINI_VIEW :String
-
Description
Name of the mini-cart main view. Use this name to reference views in methods such as addChildView() and addToViewContextDefinition().
-
WIZARD_VIEW :String
-
Methods
-
cancelableOn( event_name, handler ) → {void}
-
Description
Attaches an event handler to an event.
Parameters
Name Type Description event_nameString The name of the event to which the event handler will be attached.
handlerfunction The event handler method that will be invoked when event_name is triggered. This function can receive optionally one parameter representing the action parameter. Besides optionally can return a Deferred to details the execution of the trigger's callback. If the returned Deferred is rejected the trigger's callback wont be called
Returns
Details
-
cancelableOff( event_name, handler ) → {void}
-
Description
Detaches an event handler from an event.
Parameters
Name Type Description event_nameString The name of the event from which to detach the event handler. This argument is required.
handlerfunction The event handler that will be removed from the list of handlers attached to the event. This argument is required.
Returns
Details
-
extend( componentDefinition ) → {BaseComponent}
-
Description
Extends the current component and creates a child component.
Parameters
Name Type Description componentDefinitionObject An object with the appropriate properties and methods to create the component.
Returns
Details
-
cancelableDisable( event_name ) → {void}
-
Description
Disables all the event handlers attached to an event.
Parameters
Name Type Description event_nameString The name of the event.
Returns
Details
-
on( event_name, handler ) → {void}
-
Description
Attaches an event handler to an event name. Alias for CancelableEvents#cancelableOn.
Parameters
Name Type Description event_nameString The name of the event to attach to
handlerfunction Returns
Details
-
cancelableEnable( event_name ) → {Void}
-
Description
Re-enables all the event handlers attached to an event.
Parameters
Name Type Description event_nameString The name of the event.
Returns
Details
-
off( event_name, handler ) → {void}
-
Description
Detaches an event handler from an event name. Alias for CancelableEvents#cancelableOff.
Parameters
Name Type Description event_nameString The name of the event from which to detach the event handler.
handlerfunction Returns
Details
-
cancelableTrigger( event_name, ...args ) → {Deferred}
-
Description
Triggers an event with a set of arguments. If an event handler is rejected, the event handler callbacks will not be executed.
Parameters
Name Type Attributes Description event_nameString The name of the event to trigger.
argsparams <repeatable> One or more arguments that will be broadcast to all event handlers attached to the event.
Returns
Details
-
cancelableTriggerUnsafe( event_name, ...args ) → {Deferred}
-
Description
Triggers an event with a set of unsanitized arguments. If an event handler is rejected, the event handler callbacks will not be executed.
Parameters
Name Type Attributes Description event_nameString The name of the event to trigger.
argsparams <repeatable> One or more arguments that will be broadcast to all event handlers attached to the event.
Returns
Details
-
closeMessage( messageId )
-
Description
Lets you close a message on the page. To close a message, you must have the ID of the message, as returned by showMessage() when the message was first shown.
var layout = container.getComponent('Layout'); var message_vat_no; if (layout) { // Check if a VAT number was entered. If not, display a message. if ($('#vat_no').val() == '') { message_vat_no = layout.showMessage({message: 'You must enter a VAT number to register as a business customer.', type: 'error'}); } } // Clear the VAT number error message when the VAT number field gets focus. $('#vat_no').focus(function() { layout.closeMessage(message_vat_no); });Parameters
Name Type Description messageIdstring The ID of the message to close. Get the ID of a message by assigning the return value of
showMessage()to a variable.Details
-
addLine( line ) → {Deferred}
-
Description
Adds a line (item) to the cart. This method takes an object as its argument, which has a single property called
line. The value oflineis a Line object. Line has properties to specify the item and item quantity to add to the cart. You must know the internal ID of an item to add it to the cart.If the item is already in the cart, the quantity of the line is increased by the value of the
quantityproperty.var cart = container.getComponent('Cart'); cart.addLine({ line: { quantity: 1, item: { internalid: 8058 } } }).then(function() { alert(Utils.translate('Item added.')) });Parameters
Name Type Description lineAddLineData The item to add to the cart.
lineis an AddLineData object.Returns
-
modifyViewJsonLd( view_id, callback ) → {void}
-
Description
Lets you modify JSON-LD data embedded in the
<head>element of a SuiteCommerce product details page. JSON-LD data on SuiteCommerce websites adheres to the structured data schemas, as specified on https://schema.org/Product.If your extension modifies a view or adds a child view on the product details page, you can use
modifyViewJsonLd()to update the related JSON-LD. For example, if you add a child view that displays additional product information, you can update the JSON-LD to ensure the page and its metadata are consistent.In general, the embedded JSON-LD data should be consistent with the content in the view. SuiteCommerce creates JSON-LD data when a view is rendered. For this reason, you need to pass in a view ID to
modifyViewJsonLd()when modifying JSON-LD data.Note: To use this method, JSON-LD must be selected as the markup type on the SuiteCommerce Configuration page in the NetSuite account. See Structured Data Markup in the NetSuite Help Center for more information.
In the following example, we create an instance of the Layout component and use
modifyViewJsonLd()to add a property to the JSON-LD object. We pass in 'ProductDetails.Full.View' as the view ID and a function that returns a Promise. The_.extendfunction enables you to copy an object and add new properties to it.var layout = container.getComponent('Layout'); layout.modifyViewJsonLd('ProductDetails.Full.View', function(json) { json = _.extend(json, { manufacturer: 'NetSuite Industrial' }); return jQuery.Deferred().resolve(json); });Parameters
Name Type Description view_idstring The identifier of the view that will update the JSON-LD data. For example, if you use the Layout component to modify the ProductDetails.Full.View view in the base theme template, pass in "ProductDetails.Full.View" as the
view_id.callbackfunction A function that modifies the JSON-LD data. It must return a Promise that resolves with an object.
Returns
Throws
Details
-
addLines( lines ) → {Deferred}
-
Description
Adds multiple lines to the cart. This method takes a single object as its argument with one property called
lines. The value oflinesis an array of Line objects.var cart = container.getComponent("Cart"); cart.addLines({ lines: [ { quantity: 1, item: { internalid: 4938 } }, { quantity: 1, item: { internalid: 4936 } } ] });Parameters
Name Type Description linesAddLines The items to add to the cart.
linesis an AddLines object that contains an array of AddLineData objects, each of which represents a line to add to the cart.Returns
-
setChildViewIndex( view_id, placeholder_selector, view_name, index ) → {void}
-
Description
Changes the position of a child view inside a container.
Parameters
Name Type Description view_idstring The identifier of the view of the current component that contains the child view whose position will be changed.
placeholder_selectorstring The identifier of a location in the specified view (view_id) where the child view will be added.
view_namestring The identifier of a view in the placeholder.
indexnumber The index of the child view's position.
Returns
Throws
Details
-
addPayment( data )
-
Description
Adds a payment method.
var cart = container.getComponent("Cart"); cart.addPayment({ payment_method: { internalid: 3 } });Parameters
Name Type Description dataPaymentMethod The payment method to add to the transaction.
datais a PaymentMethod object, which contains a single property calledpayment_method. The value ofpayment_methodis an object that contains payment method data such as the internal ID of the payment method in NetSuite, and credit card details if the payment method type is a credit card. -
addPromotion( data ) → {Deferred}
-
Description
Applies a promotion to the cart. If the promotion code is valid and successfully applied to the order, the promotion appears in the cart automatically and the order total is updated.
var cart = container.getComponent("Cart"); if (cart) { cart.addPromotion({promocode: "5OFF"}).then(function(promotion) { console.log("Promotion added."); console.log(promotion); }, function() { console.log("Could not add promotion."); }); }Parameters
Name Type Description dataObject The promotion code (promocode) of the promotion.
datais an object with one propertypromocode. The value ofpromocodeis the coupon code on the promotion record in NetSuite.Returns
-
clearEstimateShipping()
-
Description
Clears the shipping estimation from the order.
-
showMessage( data ) → {string}
-
Description
Shows a message in the notifications area of a SuiteCommerce page. The message is displayed by default in the Notifications placeholder (a DIV element in the base theme template with the custom data attribute
data-view="Notifications"). You can also choose to display the message in any other placeholder that uses either of the following custom data attributes:data-viewordata-cms-area.Messages can be closed by the user, by setting a timeout in the method, or with the closeMessage() method. If you want to use
closeMessage(), first assign the return value ofshowMessage()to a variable, and then pass the variable tocloseMessage().In the following example, the message is shown and then closed after 5 seconds by setting a timeout.
var layout = container.getComponent('Layout'); if (layout) { var message_shown = false; layout.on('afterShowContent', function() { if (message_shown != false) { layout.showMessage({ message: '', type: 'info', selector: 'Notifications', timeout: 5000 }); message_shown = true; } }); }In the following example, a message is shown if an invalid VAT number is entered. When the user enters a valid number, the message is closed.
var layout = container.getComponent('Layout'); var message_vat_no; $('#vat_number').blur(function() { var vat_number = $(this).val(); if (message_vat_no !== undefined) { layout.closeMessage(message_vat_no); } // checkVatNumber() returns false if the number entered is invalid. if (!checkVatNumber(vat_number)) { message_vat_no = layout.showMessage({ message: 'You must enter a VAT number to register as a business customer.', type: 'error' }); } });Parameters
Name Type Description dataObject Data required to display the message.
datais an object, which can have the following properties:- message - Required. The text of the message.
- type - Required. The type of message. It also determines the appearance of the message on the page. Type can be one of the following:
info,warning,error, orsuccess. - selector - A placeholder on the page where you want the message to appear.
- timeout - Specifies the duration in milliseconds of the message on the page. If you do not specify a timeout, you can use closeMessage() to remove the message.
Returns
Details
-
estimateShipping( data ) → {Deferred}
-
Description
Gets the estimated shipping costs for a particular country and postal code combination. This method accepts an object as its argument. After you call this method, the order summary of the cart is updated with the postal code and the currency amount of the shipping estimate.
var cart = container.getComponent("Cart"); cart.estimateShipping({ address: { zip: "10065", country: "US" } });Parameters
Name Type Description dataObject The postcode and country to use to estimate shipping.
datais an object with a single propertyaddress. The value ofaddressis an object with two properties:zipandcountry.Returns
-
addChildViews( view_id, child_views ) → {void}
-
Description
Adds one or more child views to an existing view. The existing view must already be in the DOM and must have the 'data-view' HTML attribute.
The
addChildViewsmethod is flexible, but more complex thanaddChildView. Use the simpler addChildView() where possible.checkout.addChildViews( checkout.WIZARD_VIEW , { 'Wizard.StepNavigation': { 'CheckoutView': { childViewIndex: 1 , childViewConstructor: function () { return new CheckoutExtensionView({checkout:checkout}); } } } } );Parameters
Name Type Description view_idstring The identifier of the view of the current component to which the child views will be added.
child_viewsobject Returns
Throws
Details
-
getBillAddress() → {Deferred}
-
Description
Gets the billing address of the order.
var cart = container.getComponent("Cart"); cart.getBillAddress().then(function(billaddress) { if (billaddress.isresidential == "T") { // Do work related to Sunday shipments for residential addresses. // ... } });Returns
-
getLines() → {Deferred.<Array.<Line>>}
-
Description
Gets the lines in the cart.
var cart = container.getComponent("Cart"); cart.getLines().then(function(lines) { if (lines.length > 100) { throw new Error("You are ordering a lot of stuff. For high-volume orders, contact our sales team on 555-123-1234."); } });Returns
-
addChildView( data_view, view_constructor ) → {Void}
-
Description
Adds a child view to a view that already exists in the DOM. Child views can be added to elements that have the
data-viewordata-cms-areadata attribute. If there are multiple elements in a template that have a data-view attribute value ofview_id, the child view is added to all elements with that ID. Elements with the data-view attribute act as placeholders in the application. If there is content in the view (which is typically the case), the child view replaces the current content.If you want to add multiple views at the same time, or if you want to add a child view while preserving the current content in the existing view, use addChildViews.
layout.addChildView('Header.View', function () { return new HolidayBannerView({}); });In the above example, the view
HolidayBannerViewwill be added as a child view of an element in any template that has a data-view attribute ofHeader.View.layout.addChildView('cms:header_banner_top', function () { return new HolidayBannerView({}); });In the above example, a child view is added to a predefined SMT area called 'header_banner_top'. In the template, the header_banner_top SMT area might be in a div tag in the following way:
<div data-cms-area="header_banner_top"></div>. Because header_banner_top is a predefined SMT area, thecms:prefix is used before theview_idargument.Parameters
Name Type Description data_viewString The view to which the child view will be added.
data_viewis the value of the 'data-view' or 'data-cms-area' data attributes of an element on the page. For example, the header logo view uses the following data-view data attribute:<div data-view="Header.Logo">.view_constructorSimpleChildViewConstructor An instance of a view. Use a constructor function to get an instance of a view.
Returns
Throws
Details
-
removeChildView( view_id, placeholder_selector [, view_name ] ) → {void}
-
Description
Removes a child view from a view.
Parameters
Name Type Attributes Description view_idstring The identifier of the view of the current component from which the child view will be removed.
placeholder_selectorstring The identifier of the location in the specified view (view_id) from which the child view will be removed.
view_namestring <optional> The identifier of the view to be removed.
Returns
Throws
Details
-
addToViewContextDefinition( view_id, property_name, type, callback ) → {void}
-
Description
Adds a property to the UI context of a view to extend interaction with its template.
Parameters
Name Type Description view_idstring The identifier of the view of the current component to which the context property will be added.
property_namestring The name of the property.
typestring The type of the property. The value returned by the callback function must be of the same type.
callbackfunction A function that sets the value of the property (property_name).
Returns
Throws
Details
-
getPaymentMethods() → {Deferred}
-
Description
Gets the currently selected payment method on the order.
var cart = container.getComponent('Cart'); cart.getPaymentMethods().then(function(paymentmethods) { var paymentmethodtype = paymentmethods[0].type; var paymentmethodexpiry = paymentmethods[0].creditcard.expyear; if (paymentmethodexpiry == todayyear) { // Do work related to payment method expiry date // ... } });// Example of the object returned by this method: { "extras": {...}, "type": "creditcard", "creditcard": { "ccexpiredate": "11/1/2022", "ccname": "John Smith", "ccnumber": "************2780", "expmonth": "11", "expyear": "2022", "extras": {...}, "paymentmethod": {...} }Returns
-
removeToViewContextDefinition( view_id, property_name ) → {void}
-
Description
Removes a property from the UI context of a view.
Parameters
Name Type Description view_idstring The identifier of the view of the current component from which the context property will be removed.
property_namestring The name of the property.
Returns
Throws
Details
-
addToViewEventsDefinition( view_id, event_selector, callback ) → {void}
-
Description
Adds an event handler to an event in a view.
Parameters
Name Type Description view_idstring The identifier of the view of the current component to which the event handler will be added.
event_selectorstring callbackfunction The event handler function to call when the specified event occurs.
Returns
Throws
Details
-
getPromotions() → {Deferred}
-
Description
Gets the promotions in the cart.
var cart = container.getComponent("Cart"); cart.getPromotions().then(function(promotions) { if (promotions.length >= 3) { console.log("Too many promotions on this order!"); } });Returns
-
removeToViewEventsDefinition( view_id, event_selector ) → {void}
-
Description
Removes an event handler from an event in a view.
Parameters
Name Type Description view_idstring The identifier of the view of the current component to which the event handler will be added.
event_selectorstring Returns
Throws
Details
-
getShipAddress() → {Deferred}
-
Description
Gets the shipping address of the order.
var cart = container.getComponent("Cart"); cart.getShipAddress().then(function(shipaddress) { if (shipaddress.country != "US") { alert("Shipping of this item outside the US may incur delays due to export regulations."); } })// Example of the Address object returned by this method: { addr1: "1 Main Street", addr2: "", addr3: "", city: "New York", company: null, country: "US", defaultbilling: "F", defaultshipping: "T", extras: {...}, fullname: "John Smith", internalid: "42", isresidential: "F", isvalid: "T", phone: "555-123-1234", state: "NY", zip: "10065" }Returns
-
getShipMethod() → {Deferred}
-
Description
Gets the selected shipping method on the order. If a shipping method is not yet set on the order, it returns an object with a single property called
extraswith an empty object as its value.var cart = container.getComponent("Cart"); cart.getShipMethod().then(function(shipmethod) { if (shipmethod.internalid == "105") { alert("Delivery tracking for this ship method is available on www.example.com/track"); } });Example of the ShipMethod object returned by this method:
{ extras: {}, internalid: "105", name: "2-day shipping", rate: 10, rate_formatted: "$10.00", shipcarrier: "nonups" }Returns
-
getShipMethods() → {Deferred}
-
Description
Gets all shipping methods available on the order.
var cart = container.getComponent("Cart"); cart.getShipMethods().then(function(shipmethods) { alert(shipmethods.length + " shipping methods are available on this order."); });Returns
-
getSummary() → {Deferred}
-
Description
Gets a summary of the cart including information such as the total currency amount, number of items in the transaction, tax amounts, and discounts applied.
var cart = container.getComponent("Cart"); cart.getSummary().then(function(summary) { if (summary.total > 10000) { throw new Error("Contact our sales team on 555-123-1234 for order amounts above 10,000 USD."); } });Example of the Summary object returned by this method. Note that the list of properties in the extras property may differ depending on the configuration of your account.
{ discounttotal: 0, estimatedshipping: 0, extras: { discountedsubtotal: 260.88, discountedsubtotal_formatted: "$260.88", discountrate: 0, discountrate_formatted: "", discounttotal_formatted: "($0.00)", estimatedshipping_formatted: "$0.00", giftcertapplied_formatted: "($0.00)", handlingcost_formatted: "$0.00", itemcount: 3, shippingcost_formatted: "$0.00", subtotal_formatted: "$260.88", tax2total_formatted: "$0.00", taxondiscount: 0, taxondiscount_formatted: "$0.00", taxonhandling: 0, taxonhandling_formatted: "$0.00", taxonshipping: 0, taxonshipping_formatted: "$0.00", taxtotal_formatted: "$0.00", total_formatted: "$260.88", totalcombinedtaxes: 0, totalcombinedtaxes_formatted: "$0.00" } giftcertapplied: 0, handlingcost: 0, shippingcost: 0, subtotal: 260.88, tax2total: 0, taxtotal: 0, total: 260.88 }Returns
-
removeLine( line ) → {Deferred}
-
Description
Removes a line from the cart. To decrease (or increase) the line quantity, use updateLine() instead.
var cart = container.getComponent("Cart"); cart.removeLine({ "line_id": "i123" }).then(function() { console.log("Line removed successfully."); }, function() { alert("An error occurred while trying to remove the item. Try again."); });Parameters
Name Type Description lineObject The line to remove from the cart.
lineis an object with a single propertyline_id. The value ofline_idis the internal ID of the item.Returns
-
removePromotion( data ) → {Deferred}
-
Description
Removes a promotion from the cart. If the promotion is removed sucessfully, the cart total is updated and the promotion no longer appears in the cart.
var cart = container.getComponent("Cart"); if (cart) { cart.removePromotion({promocode_internalid: "22"}).fail(function() { console.log("Could not remove promotion."); }); }Parameters
Name Type Description dataObject The promotion to remove from the cart.
datais an object with a single propertypromocode_internalid. The value ofpromocode_internalidis the internal ID of the promotion. You can use the getPromotions() method to get the internal IDs of all promotions currently applied.Returns
-
submit() → {Deferred}
-
Description
Submits the order. The user must be logged in on the web store to submit an order. If information required to submit the order is missing or incomplete, this method returns an error message. This method only works on a secure domain.
var cart = container.getComponent("Cart"); cart.submit();Returns
-
updateLine( line ) → {Deferred}
-
Description
Updates the quantity of a line in the cart. Setting the quantity to zero will remove the line from the cart.
var cart = container.getComponent("Cart"); cart.updateLine({ line: { internalid: "i123", quantity: 2 } }).then(function() { console.log("Line updated successfully"); });Parameters
Name Type Description lineLine The line in the cart to update.
lineis an object with a single property calledline. The value of thelineproperty is a Line object. You only need to specify two properties in the Line object:internalidandquantity.Returns
Events
-
afterShowContent
-
Description
Event triggered after content has been rendered in the main view. This event is available in components that extend VisualComponent (such as PDP, PLP, or Layout) and is triggered by the showContent() method.
See the Work with Events help topic in the NetSuite Help Center for more information.
Details
-
beforeShowContent
-
Description
Event triggered before content in the main view is rendered. This event is available in components that extend VisualComponent (such as PDP, PLP, or Layout) and is triggered by the showContent() method. For example, if the URL changes in the application, the showContent() method is called, which triggers the event.
Details
-
beforeUpdateLine
-
Description
Cancelable event triggered before a line in the cart is updated. See CancelableEvents.
-
afterUpdateLine
-
Description
Event triggered after a line in the cart is updated.
Properties
Type Description boolean -
beforeRemoveLine
-
Description
Cancelable event triggered before a line in the cart is removed. See CancelableEvents.
Properties
Type Description boolean -
afterRemoveLine
-
Description
Event triggered after a line in the cart is removed.
Properties
Type Description boolean -
beforeEstimateShipping
-
Description
Cancelable event triggered before getting shipping esimates for the cart. See CancelableEvents.
Properties
Type Description boolean -
afterEstimateShipping
-
Description
Event triggered after shipping estimates retrieved.
Properties
Type Description boolean -
beforeClearEstimateShipping
-
Description
Cancelable event triggered before clearing shipping estimates for the cart. See CancelableEvents.
Properties
Type Description boolean -
afterClearEstimateShipping
-
Description
Event triggered after shipping estimates are cleared.
Properties
Type Description boolean -
beforeAddPromotion
-
Description
Cancelable event triggered before a promotion is applied to the cart. See CancelableEvents.
Properties
Type Description boolean -
afterAddPromotion
-
Description
Event triggered after a promotion is applied to the cart.
Properties
Type Description boolean -
beforeRemovePromotion
-
Description
Cancelable event triggered before a promotion is removed from the cart. See CancelableEvents.
Properties
Type Description boolean -
afterRemovePromotion
-
Description
Event triggered after a promotion is removed fromt the cart.
Properties
Type Description boolean -
beforeAddPayment
-
Description
Cancelable event triggered before a payment method is added to the order. See CancelableEvents.
Properties
Type Description boolean -
afterAddPayment
-
Description
Event triggered after a payment method is added to the order.
Properties
Type Description boolean -
beforeSubmit
-
Description
Cancelable event triggered before the order is submitted. See CancelableEvents.
Properties
Type Description boolean -
afterSubmit
-
Description
Event triggered after the order is submitted.
Properties
Type Description boolean -
beforeAddLine
-
Description
Cancelable event triggered before a line is added to the cart. See CancelableEvents.
Properties
Type Description boolean -
afterAddLine
-
Description
Event triggered after a line is added to the cart.
Properties
Type Description boolean