PDP

Members

PDP_FULL_VIEW :String: Description

The name of the main PDP full view. Use this name to reference views in methods such as addChildViews, addToViewContextDefinition, and so on.
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
PDP_QUICK_VIEW :String: Description

The name of the PDP quick view. Use this name to reference views in methods such as addChildViews, addToViewContextDefinition, and so on.
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

getAllMatrixChilds() → {Array.<MatrixChild.ItemInfo>}

Description

Gets all the subitems of a matrix item. getAllMatrixChilds returns an array of objects. Each object in the array is a subitem of the matrix item.

The following example shows how to use the method and what a simplified version of an object in the array might look like.

var pdp = container.getComponent("PDP");
			var iteminfo = pdp.getAllMatrixChilds();
			
			// Example of an object in the array returned by getAllMatrixChilds() 
			[
			  {
			    "internalid": 7040,
			    "isbackorderable": true,
			    "isinstock": true,
			    "itemid": "SHIRT-COT-S",
			    "quantityavailable": 4,
			    ...
			  }
			]

Returns

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

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_id`	string	The identifier of the view of the current component that contains the child view whose position will be changed.
`placeholder_selector`	string	The identifier of a location in the specified view (view_id) where the child view will be added.
`view_name`	string	The identifier of a view in the placeholder.
`index`	number	The index of the child view's position.

Returns

Throws

Details

getItemInfo() → {ItemInfo}

Description

Gets information about the item in the current product details page (PDP), which may include details such as the item quantity, shipping address, or fulfillment choice. Information may also include data from custom fields. The actual values returned will depend on how the item is configured in NetSuite. This method only works if the current view is a PDP.

The following example shows how to use this method and what a simplified version of the object returned might look like.

     var pdp = container.getComponent("PDP");
			var iteminfo = pdp.getItemInfo();
			
			// Example of the object returned from getItemInfo()
			{
			  "item": {
			    "displayname": "Cotton Shirt",
			    "internalid": 7101,
			    "isinstock": true,
			    "quantityavailable": 8,
			    ...
			  },
			  "options": [
			    {
			    "cartOptionId": "custcol14",
			    "itemOptionId": "custitem30",
			    "label": "Size",
			    "values": [
			      {
			        "internalid": "2",
			        "label": "Small"
			      },
			      {
			        "internalid": "4",
			        "label": "Medium"
			      }
			    ]
			    }
			  ],
			  "quantity": "1"
			}

You can use dot notation to access the object properties. Here is an explanation of some of the properties from the example above:

item.internalid - The internal ID of the item in NetSuite.
item.isinstock - Indicates if inventory is available.
options.cartOptionId - The name of an option on the product details page. Use the value of this property as the first argument in setOption() when setting an option.
options.values.internalid - The internal ID of the option value. Use the value of this property as the second argument in setOption() when setting an option.
options.values.label - The label of the option as it appears on the product details page.

Note: This method may return price information for the item, but it will only return the price for the currently selected options and quantity. Use getPrice() to get additional price information.

Returns

getPrice() → {PriceInfo}

Description

Gets price information of the item based on the selected options and quantity. Price information includes the current unit price (according to the currently selected options and quantity) and the original unit price. The current price and original price of an item may differ, for example, when a volume discount is applied to the item. Price information is returned with both formatted values (with the currency sign) and unformatted values (without the currency sign).

var pdp = container.getComponent('PDP');
			var itemPrice = pdp.getPrice();
			
			// Example of the object returned
			{
			 price: 35,
			 price_formatted: $35,
			 compare_price: 40,
			 compare_price_formatted: $40
			}

Note: You can also use the getItemInfo() method to get price information, however it will only return the current price for the selected options and quantity.

Returns

Details

getSelectedMatrixChilds( matrix_options ) → {Array.<MatrixChild.ItemInfo>}

Description

Gets the subitems of a matrix item according to the filters defined in matrix_options. If matrix_options is set but empty, this method returns all subitems of the matrix item. If matrix_options is null or undefined, this method returns the subitems of the current selection.

Parameters

Name	Type	Description
`matrix_options`	MatrixOptionSelection	The options by which to filter the subitems of the matrix item. If you omit `matrix_options', an array of all subitems is returned.

Returns

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

getStockInfo() → {Item.StockInfo}

Description

Gets information about the inventory of the item, such as whether the item is in stock, the quantity in stock, and the in-stock and out-of-stock messages. If the item is an inventory item, it returns the available quantity of the item. If the item is a matrix item and subitems are filtered (with getSelectedMatrixChilds()), it returns the sum of the available quantity of all the filtered subitems of the matrix item.

If the Store Pickup feature is enabled in the NetSuite account (see Store Pickup), this method also returns the quantity of inventory available for store pickup at each pickup location. The stockPerLocation property of the main object contains an array of objects, each of which contains the ID of the store pickup location and the quantity available.

			var pdp = container.getComponent('PDP');
			
			var stockinfo = pdp.getStockInfo();
			var totalstock = stockinfo.stock;
			var isinstock = stockinfo.isInStock;

Returns

setOption( cart_option_id, value ) → {Deferred.<Boolean>}

Description

Sets an option of the current product details page. This method only works if the current view is a PDP.

You need to pass two arguments to this method:

cart_option_id - The ID of the option you want to set. You can get a list of all possible cart_option_ids by calling getItemInfo() first. getItemInfo() returns an object that contains an options property, which contains an array with one object. Each object in the array corresponds to an option that can be set. Use the value of the cartOptionId property in the object as the cart_option_id argument in setOption().
value - The value of the option you want to set. You can get a list of all possible option values by calling getItemInfo() first. getItemInfo() returns an object that contains an options property, which contains an array with one object. The values property in the object contains an array of objects, each of which corresponds to an option value. Use the value of the internalid property in the object as the value argument in setOption().

In the following example, the size option of an item is set to medium. The size option is represented by the cart_option_id with the value custcol14. To set the size to medium, we pass '4', which is the internalid for the medium size of the item.

var pdp = container.getComponent('PDP');
			var iteminfo = pdp.getItemInfo();
			
			pdp.setOption('custcol14', '4');

Parameters

Name	Type	Description
`cart_option_id`	String	The option identifier. You can get a list of option identifiers with getItemInfo().
`value`	String	The value of the option. Leave the `value` blank or provide an invalid value to clear the option.

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 addChildViews method is flexible, but more complex than addChildView. 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_id`	string	The identifier of the view of the current component to which the child views will be added.
`child_views`	object

Returns

Throws

Details

setQuantity( quantity ) → {Deferred}

Description

Updates the quantity of the item on the product details page. For example, if the quantity is currently 2 and you call setQuantity(4), the quantity is changed to 4. This method only works if the current view is a PDP.

var pdp = container.getComponent('PDP');
			var newquantity = 2;
			
			pdp.on('beforeQuantityChange', function(event) {
			  if (!_.isNumber(newquantity)) {
			    alert('That is not a valid quantity.');
			    return false;
			  }
			});

Parameters

Name	Type	Description
`quantity`	Number	The quantity of the item to set. Quantity must be a positive integer (greater than zero).

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

Details

getStockInfo() → {Item.StockInfo}

Description

			var pdp = container.getComponent('PDP');
			
			var stockinfo = pdp.getStockInfo();
			var totalstock = stockinfo.stock;
			var isinstock = stockinfo.isInStock;

Returns

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

Description

Removes a child view from a view.

Parameters

Name	Type	Attributes	Description
`view_id`	string		The identifier of the view of the current component from which the child view will be removed.
`placeholder_selector`	string		The identifier of the location in the specified view (view_id) from which the child view will be removed.
`view_name`	string	<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_id`	string	The identifier of the view of the current component to which the context property will be added.
`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.
`callback`	function	A function that sets the value of the property (property_name).

Returns

Throws

Details

removeToViewContextDefinition( view_id, property_name ) → {void}

Description

Removes a property from the UI context of a view.

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.

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_id`	string	The identifier of the view of the current component to which the event handler will be added.
`event_selector`	string
`callback`	function	The event handler function to call when the specified event occurs.

Returns

Throws

Details

removeToViewEventsDefinition( view_id, event_selector ) → {void}

Description

Removes an event handler from an event in a view.

Parameters

Name	Type	Description
`view_id`	string	The identifier of the view of the current component to which the event handler will be added.
`event_selector`	string

Returns

Throws

Details

Events

beforeOptionSelection

Description

A cancelable event (see CancelableEvents) triggered before an option is set. The event data is an object with the following two properties: optionCartId and value.

Properties

Name	Type	Description
`optionCartId`	String	The selected option id.
`value`	String	The selected option value.

afterOptionSelection

Description

An event triggered after an option is set. The event data is an object.

     {
			 cartOptionId: "custcol_gen_color",
			 itemOptionId: "custitem_gen_color",
			 label: "Color",
			 type: "select",
			 value: {
			   internalid: "5",
			   label: "Blue"
			 }
			}

Properties

Name	Type	Description
`cartOptionId`	String	The selected item option id.
`itemOptionId`	String	The custom item field id.
`label`	String	The item option label.
`type`	String	The item option type.
`value.internalid`	String	The selected option id.
`value.label`	String	The selected option value.

beforeQuantityChange

Description

Cancelable event (see CancelableEvents) triggered before the quantity is changed. The event data is an object with a single property quantity.

Properties

Name	Type	Description
`quantity`	string	The new quantity that will be set.

afterQuantityChange

Description

Event triggered after the quantity is changed. The event data is an object with a single property quantity.

Properties

Name	Type	Description
`quantity`	string	The new quantity that was set.

beforeImageChange

Description

Cancelable event (see CancelableEvents) triggered before the main image displayed on the product details page is changed. Item images on the page are in a zero-based array, with the first image having the index 0. If there is only one image, this event cannot be triggered. The event data is an object.

Properties

Name	Type	Description
`currentIndex`	number	The index of the current image in the array.
`nextIndex`	number	The index of the next image in the array. If the current image is the last image in the array, the value of `nextIndex` is `0`.

afterImageChange

Description

Event triggered after the main image displayed on the product details page is changed. The event data is a number, which refers to the index of the image shown on the page after the image was changed. Item images on the page are in a zero-based array.

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.

PDP

new PDP()

Description

Members

PDP_FULL_VIEW :String

Description

componentName :String

Description

Details

PDP_QUICK_VIEW :String

Description

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

getAllMatrixChilds() → {Array.<MatrixChild.ItemInfo>}

Description

Returns

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

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

Description

Parameters

Returns

Throws

Details

getItemInfo() → {ItemInfo}