LayoutComponent

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
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

Methods

addChildView( view_id, 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.

checkout.addChildView('Wizard.StepNavigation', function () {
			  return new CheckoutExtensionView({checkout:checkout});
			});

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
`view_id`	String	The identifier of the view to which the child view will be added.
`view_constructor`	SimpleChildViewConstructor	An instance of a view. Use a constructor function to get an instance of a view.

Returns

Throws

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

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.

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

<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>

The following events are supported:

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

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 denotes 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 (LayoutComponent) as well as other components that manage views, including CartComponent, CheckoutComponent, ProductDetailsComponent, and ProductListPageComponent.

When you use registerView in LayoutComponent itself, it registers a child view that can be used globally in any template. For example, if you register a view called ProductLimitedStock in LayoutComponent, you can use that view in a template of the ProductDetailsComponent, as well as in the templates of other components such as the CartComponent or the ProductListPageComponent.

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 LayoutComponent, 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 content in a view (by replacing the current main view) or in a modal. This method takes two arguments: view is the view to display, and options is an object with 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 applies to the modal itself, not the modal content.

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

var layout = container.getComponent('Layout');
			
			if (layout) {
			  var modalViewMessage = new GlobalViewsMessage ({
			    message: 'Register today and get 10% off your next order.', type: 'info', closable: false 
			  });
			
			  var modalViewMessageShown = false;
			  layout.on('afterShowContent', function() {
			    if (!modalViewMessageShown) {
			      layout.showContent(modalViewMessage, {showInModal: true, options: {classname; 'site-modal'}});
			    }     
			  });
			}

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

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

In the above example, showContent is used to replace the main view with another view newView. Because showContent is replacing a view, properties do not need to be specified in the options argument, but the options argument must still be passed as an empty object.

Parameters

Name	Type	Description
`view`	View	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.

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

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

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

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

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

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

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.

LayoutComponent

new LayoutComponent()

Description

Members

componentName :String

Description

Details

application :ComponentContainer

Description

Details

Methods

addChildView( view_id, view_constructor ) → {Void}

Description

Parameters

Returns

Throws

addChildViews( view_id, child_views ) → {void}

Description

Parameters

Returns

Throws

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

Description

Parameters

Returns

Throws

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

Description

Parameters

Returns

Throws

registerView( data_view, view_constructor )

Description

Parameters

Details

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

Description

Parameters

Returns

Throws

removeToViewContextDefinition( view_id, property_name ) → {void}

Description

Parameters

Returns

Throws

removeToViewEventsDefinition( view_id, event_selector ) → {void}

Description

Parameters

Returns

Throws

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

Description

Parameters

Returns

Throws

showContent( view, options )

Description

Parameters

Details

extend( componentDefinition ) → {BaseComponent}

Description

Parameters

Returns

Details

on( event_name, handler ) → {void}

Description

Parameters

Returns

Details

off( event_name, handler ) → {void}

Description

Parameters

Returns

Details

cancelableOn( event_name, handler ) → {void}

Description

Parameters

Returns

Details

cancelableOff( event_name, handler ) → {void}