1. Home
  2. Classes
  3. ProductDetailsComponent

new ProductDetailsComponent()

Description

The ProductDetailsComponent (PDP) component provides a number of ways to interact with the product details page, such as setting page options, changing quantities, and getting item information.

Get an instance of this component by calling container.getComponent("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.

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.

componentName :String

Description

A unique name that identifies the component. Use the component name when getting a component, for example, application.getComponent(componentName).

Details
String

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
ComponentContainer

BaseComponent#application

Methods

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

Returns an array of all the subitems of a matrix item. If the item is not a matrix item, or it is a matrix item but it has no subitems, an empty array is returned. If the current view is not in the PDP component, it returns null.

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

Returns an ItemInfo object with information about the item. If the Store Pickup feature is enabled in the NetSuite account, it also returns item information related to store pickup, such as the quantity of items available for store pickup. If the current view is not in the PDP component, it returns null.

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

Returns an array of all the subitems (of the matrix item) that match the matrix_options filters. If the current view is not in the PDP component, it returns null.

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

Returns a Deferred object. If the promise is resolved, it indicates the operation was successful. If the promise is rejected, it returns an error.

Fires

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

Returns a Deferred object. If the promise is resolved, it indicates the operation was successful. If the promise is rejected, it returns an error.

Fires

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

Returns a StockInfo object. If the current view is not in the PDP component, it returns null.

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

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#setChildViewIndex

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.

EXAMPLE

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

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#addChildViews

addChildView( view_id, childViewConstuctor ) → {void}

Description

Adds a child view to an existing View which is already appended in the DOM with the given data-view HTML attribute.

EXAMPLE

checkout.addChildView('Wizard.StepNavigation', 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 view will be added.
childViewConstuctor SimpleChildViewConstructor

The identifier of the location in the specified view (view_id) where the child view will be added.
Returns

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#addChildView

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

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#removeChildView

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

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#addToViewContextDefinition

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

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#removeToViewContextDefinition

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

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#addToViewEventsDefinition

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

Returns null if the operation is successful. Otherwise, it throws an exception.

Throws
Details

VisualComponent#removeToViewEventsDefinition

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

BaseComponent#extend

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

BaseComponent#on

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

BaseComponent#off

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

CancelableEvents#cancelableOn

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

CancelableEvents#cancelableOff

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

CancelableEvents#cancelableDisable

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

CancelableEvents#cancelableEnable

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

Returns a Deferred object. Because event handlers are sometimes asynchronous, any callbacks in the event handlers will also be asynchronous.

Details

CancelableEvents#cancelableTrigger

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

Returns a Deferred object. Because event handlers are sometimes asynchronous, any callbacks in the event handlers will also be asynchronous.

Details

CancelableEvents#cancelableTriggerUnsafe

Events

beforeOptionSelection

Description

Cancelable event triggered before an option is set. See CancelableEvents.

Properties
Name Type Description
optionCartId String

The selected option id
value String

The selected option value

afterOptionSelection

Description

Event triggered after an option is set.

Properties
Name Type Description
optionCartId String

The selected option id
value String

the selected option value

beforeQuantityChange

Description

Cancelable event triggered before the quantity is changed. See CancelableEvents.

afterQuantityChange

Description

Event triggered after the quantity is changed.

beforeImageChange

Description

Cancelable event triggered before the main image displayed on the product details page is changed. See CancelableEvents.

Properties
Name Type Description
currentIndex number
nextIndex number

afterImageChange

Description

Event triggered after the main image displayed on the product details page is changed.