Layout

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

Type

String

Inherited From

BaseComponent#componentName

Overrides

VisualComponent#componentName
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 ComponentContainer

Details

Type

ComponentContainer

Inherited From

BaseComponent#application

Overrides

VisualComponent#application

Methods

cancelableOn( event_name, handler ) → {void}

Description

Attaches an event handler to an event.

Parameters

Name	Type	Description
`event_name`	String	The name of the event to which the event handler will be attached.
`handler`	function	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_name`	String	The name of the event from which to detach the event handler. This argument is required.
`handler`	function	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
`componentDefinition`	Object	An object with the appropriate properties and methods to create the component.

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
`messageId`	string	The ID of the message to close. Get the ID of a message by assigning the return value of `showMessage()` to a variable.

Details

cancelableDisable( event_name ) → {void}

Description

Disables all the event handlers attached to an event.

Parameters

Name	Type	Description
`event_name`	String	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_name`	String	The name of the event to attach to
`handler`	function

Returns

Details

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-view or data-cms-area data attribute. If there are multiple elements in a template that have a data-view attribute value of view_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 HolidayBannerView will be added as a child view of an element in any template that has a data-view attribute of Header.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, the cms: prefix is used before the view_id argument.

Parameters

Name	Type	Description
`data_view`	String	The view to which the child view will be added. `data_view` is 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_constructor`	SimpleChildViewConstructor	An instance of a view. Use a constructor function to get an instance of a view.

Returns

Throws

cancelableEnable( event_name ) → {Void}

Description

Re-enables all the event handlers attached to an event.

Parameters

Name	Type	Description
`event_name`	String	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_name`	String	The name of the event from which to detach the event handler.
`handler`	function

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_name`	String		The name of the event to trigger.
`args`	params	<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_name`	String		The name of the event to trigger.
`args`	params	<repeatable>	One or more arguments that will be broadcast to all event handlers attached to the event.

Returns

Details

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 _.extend function 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_id`	string	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`.
`callback`	function	A function that modifies the JSON-LD data. It must return a Promise that resolves with an object.

Returns

Throws

Details

addChildViews( view_id, child_views ) → {void}

Description

Adds one or more child views to a view that already exists in the DOM. Child views can be added to elements that have the data-view or data-cms-area data attribute. If there are multiple elements in a template that have a data-view (or data-cms-area) attribute value of view_id, the child views are added to all elements with that ID.

As opposed to the {addChildView} method, the current content in the data attribute element is not replaced by the child views. Instead, the child view is appended after the content in the data attribute element. If you want to add just one single child view while keeping the current content, use this method instead of {addChildView}.

You can also specify the order in which the child views are rendered in the view by setting the childViewIndex property of the child view object. This index is 10-based. Set a value less than 10 to prepend the child view to the current content; set a value greater than 10 to append the child view to the current content. If adding multiple child views, set a different index in each child view object.

The addChildViews method is flexible, but more complex than addChildView. Use the simpler addChildView where possible.

In the following example, addChildViews is used to add two child views to the checkout.WIZARD_VIEW main view. The child views will be added to the placeholder element that has a data-view attribute with the value Wizard.StepNavigation. Wizard.StepNavigation has an object as its value, which holds the child views to be added to the placeholder. Each child view is specified as a separate property/value pair, with the property as the view name and the value as an object that returns the child view. Within the object that returns the child view, you set the index of the child view and a child view construtor function.

			checkout.addChildViews(
			  checkout.WIZARD_VIEW,
			  {
			    'Wizard.StepNavigation': 
			    {
			      'FirstCheckoutView': 
			      {
			        childViewIndex: 1, 
			        childViewConstructor: function () 
			        {
			          return new FirstCheckoutExtensionView({checkout:checkout});
			        }
			      },
			      'SecondCheckoutView': 
			      {
			        childViewIndex: 2,
			        childViewConstructor: function() 
			        {
			          return new SecondCheckoutExtensionView({checkout:checkout})
			        }
			      }
			    }
			  }
			);

Parameters

Name	Type	Description
`view_id`	String	The identifier (ID) of the main view to which the child views will be added.
`child_views`	Object	An object containing a set of nested properties and objects that determine the placeholder to which the child views will be added, as well as the child views themselves.

Returns

Throws

addToViewContextDefinition( view_id, property_name, type, callback ) → {void}

Description

Adds a property to the context data of a view. The property can then be referenced in templates. If the property already exists in the context data of the view, it is updated. For example, if a view has a property called 'thumbnail' and you pass 'thumbnail' in the property_name argument, then the return value of the callback function overwrites the current value of 'thumbnail'.

			var layout = container.getComponent('Layout');
			
			layout.addToViewContextDefinition('Header.View', '48HourShippingMessage', 'string', function(context) {
			  return 'Hello' + context.profileModel.firstname + '. Free 2 day shipping on orders over 40 USD.';
			});

In the above example, the first and second arguments indicate the view, 'Header.View', to which the property, '48HourShippingMessage', will be added. The function returns a message as a string, with the first name of the logged in user and the message text. To display the message in the view, add the property to the template with the expression {{48HourShippingMessage}}.

			<nav class="header-main-nav">
				<div>{{48HourShippingMessage}}</div>
				<div id="banner-header-top" data-cms-area="header-top"></div>
			</nav>

Parameters

Name	Type	Description
`view_id`	string	The identifier of the view to which the property will be added. This ID is usually defined in the view's AMD module.
`property_name`	string	The name of the property.
`type`	string	The type of the property. The value returned by the callback function must be of the same type. `type` can be one of the following: array boolean null number object string
`callback`	function	A function that sets the value of the property. The return value sets the value of the specified property and must be of the same type as specified by `type`. You can pass the current context as an argument to the function.

Returns

Throws

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-view or data-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 of showMessage() to a variable, and then pass the variable to closeMessage().

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
`data`	Object	Data required to display the message. `data` is 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`, or `success`. 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

addToViewEventsDefinition( view_id, event_selector, callback ) → {void}

Description

Attaches an event handler to an event that occurs on a specific element in the DOM. The DOM element must have a 'data-action' attribute. The value of the data-action attribute is used in the event_selector argument to specify on which element the event must occur.

It is not possible to attach an event handler to a DOM element if another SuiteCommerce event is already attached to the element.

The following events are supported:

blur
change
click
contextmenu
change
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
touchend
touchmove
touchstart
unload

EXAMPLE

The following example shows basic usage of this method. In the module file, addToViewEventsDefinition() is used to attach a click event handler to a DOM element that has the attribute data-action="sidebar-toggle-icon-clickable", which is in a view with ID Header.View. The callback function is an anonymous function that simply logs the event data to the browser console.

In the template file associated with the view, an <i> element has the data attribute data-action="sidebar-toggle-icon-clickable", which is referenced in the event selector string.

moduleFile.js

			layout = container.getComponent('Layout');
			
			layout.addToViewEventsDefinition(
			  'Header.View', 
			  'click [data-action="sidebar-toggle-icon-clickable"]', 
			  function(event) {
			    console.log(event);  
			  }
			);

templateFile.tpl

			<div class="header-sidebar-toggle-wrapper">
				<button class="" data-action="header-sidebar-show">
					<i class="header-sidebar-toggle-icon" data-action="sidebar-toggle-icon-clickable"></i>  
				</button>
			</div>

Parameters

Name	Type	Description
`view_id`	string	The identifier of the view to which the event handler will be added. This ID is usually defined in the view's AMD module.
`event_selector`	string	A string that determines the event and DOM selector that will trigger the event handler as specified by `callback`. `event_selector` must be specified in the following format: `<event type> [data action="a-custom-data-action">]`. `<event type>` is one of the supported events. `<a-custom-data-action>` is the value of the 'data-action' attribute on a DOM element.
`callback`	function	A function that is called when the specified event occurs.

Returns

Throws

registerView( data_view, view_constructor )

Description

Registers a child view that can be used in any template within the scope of the component in which registerView is called. registerView is available in this component (Layout) as well as other components that manage views, including Cart, Checkout, PDP, and PLP.

When you use registerView in Layout itself, it registers a child view that can be used globally in any template. For example, if you register a view called ProductLimitedStock in Layout, you can use that view in a template of the PDP component, as well as in the templates of other components such as the Cart component or the PLP component.

			var layout = container.getComponent('Layout');
			
			if (layout) {
				layout.registerView('ProductLimitedStock', function() {
					return new ProductLimitedStockView({});
				});
			}

After a view has been registered, you can include the view anywhere in a template file by adding a HTML element with its data-view attribute set to the value of data_view. You can also include the view in any of the predefined Site Management Tools (SMT) areas on a page by setting the value of a data-cms-area data attribute to data_view.

			<div class="product-container">
				<div class="product-name"></div>
				<div data-view="ProductLimitedStock"></div>
				<div class="product-details"></div>
			</div>

Parameters

Name	Type	Description
`data_view`	string	The name of the data-view attribute in which the view will be displayed.
`view_constructor`	function	An instance of a view. Use a constructor function to return an instance.

Details

removeChildView( view_id, placeholder_selector [, view_name ] ) → {void}

Description

Removes a child view from a view. This method can remove child views that were added with the addChildView or addChildViews methods, as well as other child views in the parent view.

This method accepts up to three arguments. If only one argument is passed, the argument is determined to be placeholder_selector. In this case, view_id is set to the default view of the current component. In Layout, the main view is layout.ALL_VIEWS.

			var layout = container.getComponent('Layout');
			
			layout.addChildView('FlashMessage.View', function() {
			  return new FlashMessageContentView({});
			});
			console.log('Child view added.');
			
			layout.removeChildView('FlashMessageContentView');
			console.log('Child view removed.');

Parameters

Name	Type	Attributes	Description
`view_id`	string		The identifier of the main view from which the child view will be removed. Most components have only one main view.
`placeholder_selector`	string		The identifier of the view to be removed (specified as a value of a `data-view` or `data-cms-area` attribute).
`view_name`	string	<optional>	The internal identifier of the view to be removed. To get the internal identifier of a view, put the return value of `addChildView` in a variable, and then pass that variable as `[view_name]`.

Returns

Throws

removeToViewContextDefinition( view_id, property_name ) → {void}

Description

Removes a property from the context data of a view.

You can only remove properties that were added to the same extension with addToViewContextDefinition. Properties already exposed in the template or properties added by another extension cannot be removed with this method.

In the following example, the property called WelcomeMessage is first added to the context data of the Header.View view and then removed from the view. To compare the context data, we can output context to the console before and after the addToViewContextDefinition.

			var layout = container.getComponent('Layout');
			
			if (layout) {
			  layout.addToViewContextDefinition('Header.View', 'WelcomeMessage', 'string', function(context) {
			    console.log(context);
			    return 'Hello ' + context.profileModel.firstname;
			  })
			  console.log(context);
			}
			
			layout.removeToViewContextDefinition('Header.View', 'WelcomeMessage');

Parameters

Name	Type	Description
`view_id`	string	The identifier of the view of the current component from which the context property will be removed.
`property_name`	string	The name of the property to be removed.

Returns

Throws

removeToViewEventsDefinition( view_id, event_selector ) → {void}

Description

Detaches an event handler from an event in a view.

You can only remove event handlers that were added to the same extension with addToViewEventsDefinition. You cannot use this method to remove built-in event handlers.

			var layout = container.getComponent('Layout');
			
			layout.addToEventsDefintion(
			  'Header.View', 
			  'click [data-action="sidebar-toggle-icon-clickable"]',
			  function(event) {
			    console.log(event);  
			  }
			);
			
			layout.removeToViewEventsDefinition('Header.View', 'click [data-action="sidebar-toggle-icon-clickable"]');

Parameters

Name	Type	Description
`view_id`	string	The identifier of the view of the current component from which the event handler will be removed. This is the same view_id specified in `addToViewEventsDefinition`.
`event_selector`	string	An event that was previously added with `addToViewEventsDefinition`.

Returns

Throws

setChildViewIndex( [ view_id ], placeholder_selector, view_name, index ) → {void}

Description

Repositions a child view inside a placeholder by changing the index value of the child view. The index is a 10-based index. Set index to less than 10 to position the child view before the current child view; set index to greater than 10 to position the child view after the current child view. If you set index to 10, the child view is displayed. Other child views with an index value of 10 are also displayed. However, because there is more than one child view with the same index value, the order in which the child views are displayed is undetermined.

This method can accept three or four arguments. If three arguments are passed, the value of view_id is set to the default view of the component.

			var layout = container.getComponent('Layout');
			
			layout.addChildView('Header.View', function() {
			  return new HeaderBannerView({})
			});
			layout.setChildViewIndex('Header.View', 'HeaderBannerView', 'HeaderBannerView', 15);

Parameters

Name	Type	Attributes	Description
`view_id`	string	<optional>	The identifier of the view that contains the child view. This is usually the main view in the current component.
`placeholder_selector`	string		The identifier of the placeholder element in the view's template (specified as a value of a `data-view` or `data-cms-area` attribute).
`view_name`	string		The identifier of the child view in the placeholder.
`index`	number		The new position of the child view.

Returns

Throws

showContent( view, options )

Description

Shows the content of a view, either replacing the content of the current main view, or displaying the content in a modal. This method takes two arguments: view is the view instance to display, and options lets you show the view in a modal, disable scrolling, and specify a Sass class name for the modal.

Both arguments of showContent() are required. If you do not want to set any options, you must still pass the second argument options as an empty object.

In the following example, showContent() is used to show a modal after the layout has rendered (when the afterShowContent event has fired). The modalMessage view is shown in the modal and the modal is given the class name my-modal.

Company.Extension.Main.js

			var layout = container.getComponent('Layout');
			
			if (layout) {
				var modalMessage = new MyModalMessageView();
			
				var modalMessageWasDisplayed = false;
				layout.on('afterShowContent', function() {
					
					if (!modalMessageWasDisplayed) {
						layout.showContent(modalMessage, {showInModal: true, options: {className: 'my-modal'}});
						modalMessageWasDisplayed = true;
			    }     
			  });
			}

In the following example, showContent is used to replace the main view with another view called newView. Because showContent is replacing a view, pass the options argument as an empty object.

Company.Extenstion.Main.js

			var layout = container.getComponent('layout');
			
			if (layout) {
			  var viewShown = false;
			  layout.on('afterShowContent', function() {
			    if (!viewShown) {
			      layout.showContent(new newView(), {});
			      viewShown = true;
			    }
			  });
			}

Parameters

Name	Type	Description
`view`	SCView	An instance of a view that contains the content to be displayed.
`options`	Object	Options that determine how the content is displayed, including whether it is displayed as a modal or whether it replaces the content of the main view. `options` can contain any of the following properties: `showInModal` - Set to false (default) to replace the main view of the current component with the `view`. Set to true to show the content in a modal. `showInModal` is set to false by default. `dontScroll` - Indicates whether content that overflows its container element is srollable or unscrollable. Set to false to make content scrollable. Set to true to make content unscrollable. `dontScroll` is set to false by default. `options` - An object with a single property `className` to indicate the Sass class name that will be applied to the modal. The class name is applied to the modal itself, not the modal content.

Details

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

Inherited From

VisualComponent#afterShowContent

Overrides

VisualComponent#afterShowContent
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

Inherited From

VisualComponent#beforeShowContent

Overrides

VisualComponent#beforeShowContent

Layout

new Layout()

Description

Members

componentName :String

Description

Details

application :ComponentContainer

Description

Details

Methods

cancelableOn( event_name, handler ) → {void}

Description

Parameters

Returns

Details

cancelableOff( event_name, handler ) → {void}

Description

Parameters

Returns

Details

extend( componentDefinition ) → {BaseComponent}

Description

Parameters

Returns

Details

closeMessage( messageId )

Description

Parameters

Details

cancelableDisable( event_name ) → {void}

Description

Parameters

Returns

Details

on( event_name, handler ) → {void}

Description

Parameters

Returns

Details

addChildView( data_view, view_constructor ) → {Void}

Description

Parameters

Returns

Throws

cancelableEnable( event_name ) → {Void}

Description

Parameters

Returns

Details

off( event_name, handler ) → {void}

Description

Parameters

Returns

Details

cancelableTrigger( event_name, ...args ) → {Deferred}

Description

Parameters

Returns

Details

cancelableTriggerUnsafe( event_name, ...args ) → {Deferred}

Description

Parameters

Returns

Details

modifyViewJsonLd( view_id, callback ) → {void}

Description

Parameters

Returns

Throws

Details

addChildViews( view_id, child_views ) → {void}

Description

Parameters

Returns

Throws

addToViewContextDefinition( view_id, property_name, type, callback ) → {void}

Description

Parameters

Returns