1. Home
  2. Classes
  3. ProductListPageComponent

new ProductListPageComponent()

Description

The Product List PageComponent (PLP) component provides ways to work with the product list page, for example, by setting display options, pagination, filters, and sorting. Some methods will only work when the current view is the search page.

Get an instance of this component by calling container.getComponent("PLP").

Members

PLP_VIEW :String

Description

The name of the main view of the PLP component. Use this to refer to the view 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

getPagination() → {Pagination}

Description

Gets information about the pagination applied in the product list page. Use only after the search page has rendered (by subscribing to the afterShowContent event).

var plp = container.getComponent('PLP');
			plp.on("afterShowContent", function() {
			    var pagination = plp.getPagination();
			});
			
			// Example of the object returned with getPagination()
			{
			  "currentPage": 1,
			  "display": "grid",
			  "itemCount": 140,
			  "pageCount": 6,
			  "pageSize": 24,
			  "searchText": "shirt",
			  "sorting": "relevance:desc"
			}
Returns

setCurrentPage( page ) → {Deferred}

Description

Navigates to the specified page in the result set. This method works only when the current view is the search page. Pages use a one-based index; the first page is "1". The page to navigate to must be less than or equal to the total number of pages. Use getPagination to get the total number of pages.

var plp = container.getComponent('PLP');
			plp.setCurrentPage({currentPage: 2}).then(function() {
			  alert("Success");
			  }, function() {
			     alert("Fail");
			     });
Parameters
Name Type Description
page number

The page in the result set you want to navigate to. page must be greater than or equal to one, and less than or equal to the total page count. See getPagination.
Returns

Returns a Deferred object. If navigation to the page could not be completed, the Promise is rejected. If navigation to the page was successful, the Promise is resolved.

getSorting() → {Sorting}

Description

Gets information about the current sorting options. This method works only when the current view is the search page.

var plp = container.getComponent('PLP');
			plp.getSorting(); 
			
			// Example of the object returned with getSorting()
			{
			  "id": "relevance:desc",
			  "isDefault": false,
			  "name": "Relevance"
			}
Returns

Returns a Sorting object, or null if the current page is not the search page.

getAllSorting() → {Array.<Sorting>}

Description

Gets information about all sorting options on the page. This method works only when the current view is the search page, otherwise it returns undefined. To get the current sorting option on the page, use getSorting.

var plp = container.getComponent('PLP');
			plp.getAllSorting();
			
			// Example of the array of objects returned with getAllSorting()
			[
			  {
			    active: true,
			    id: relevance:desc,
			    name: Relevance,
			    isDefault: true
			  },
			  {
			    id: onlinecustomerprice:asc", 
			    name: "Price, low to high", 
			    isDefault: false
			  }
			]
Returns

Returns an array of Sorting objects, one of which has an additional property called 'active' (with the value true) that corresponds to the current sorting option on the page.

setSorting( sorting ) → {Deferred}

Description

Sets the sorting options of the current search page. This method works only when the current view is the search page. If the sorting option was applied successfully, the product list is updated on the page.

var plp = container.getComponent('PLP');
			plp.setSorting({sorting: "onlinecustomerprice:asc"});
Parameters
Name Type Description
sorting Sorting

An object with one property sorting. The value must be a valid sorting option on the page - use getAllSorting to get a list of all available sorting options and then use the value of the id property as the value of sorting.
Returns

Returns a Deferred object. If the promise is resolved, but the current page is not the search page or an error occurs, it returns false.

getDisplay() → {Display}

Description

Gets information about the current display options, such as the number of columns displayed, the display option ID, and the display option name. This method works only when the current view is the search page. 

var plp = container.getComponent('PLP');
			plp.getDisplay();
			
			// Example of the object returned by getDisplay()
			{
			  columns: 2,
			  icon: "icon-display-table",
			  id: "table",
			  isDefault: false,
			  name: "Table",
			  template: "facets_item_cell_table.tpl"
			}
Returns

Returns a Display object, which may contain the following properties:

  • columns - The number of columns used to display products on the page. For example, the 'table' layout displays two columns, whereas the 'grid' layout displays four columns.
  • icon - The Sass class of the image.
  • id - The identifier of the display option. Use the value of this property when setting the display option with setDisplay.
  • isDefault - Indicates whether the display option is the default display option.
  • name - The name of the display option as shown on the page.
  • template - The template used to render the layout of the display option.

getAllDisplay() → {Array.<Display>}

Description

Gets information about all display options, including the current display option. This method works only when the current view is the search page.

Returns

Gets the display options of the current search page. The object that corresponds to the current display option on the page has an additional property 'active', which is set to true.

setDisplay( options ) → {Deferred}

Description

Sets the display options of the product list page. This method works only when the current view is the search page.

Parameters
Name Type Description
options Display
Returns

Returns a Deferred object. If the promise is resolved, but the current page is not the search page or an error occurs, it returns false.

getPageSize() → {PageSize}

Description

Gets the page size setting of the current page. The page size setting determines the maximum number of items to display per page, for example, 12, 24, or 48. It does not get the number of items currently displayed on the page - use getPagination for that. This method works only when the current view is the search page.

var plp = container.getComponent('PLP');
			plp.getPageSize();
			
			// Example of the object returned by getPageSize()
			{
			  id: "24",
			  isDefault: true,
			  items: 24,
			  name: "$(0) per page"
			}
Returns

Returns a PageSize object, which contains the following properties.

  • id - The identifier of the page size setting. Use the value of id when setting the page size setting - see setPageSize.
  • isDefault - Indicates if the page size setting is the default setting.
  • itemss - The number of items to display per page.
  • name - The name of the page size setting as shown on the page.

getAllPageSize() → {Array.<PageSize>}

Description

Gets all page size settings of the current page. This method works only when the current view is the search page.

var plp = container.getComponent('PLP');
			plp.getAllPageSize();
			
			// Example of the array of objects returned with getAllPageSize()
			[
			  {
			    id: "12",
			    isDefault: true,
			    items: 12,
			    name: "$(0) per page"
			  },
			  {
			    active: true,
			    id: "24",
			    isDefault: true,
			    items: 24,
			    name: "$(0) per page"
			  },
			  ...
			]
Returns

Returns an array of PageSize objects, one of which has an additional property called 'active' (with the value true) that corresponds to the current page size setting.

setPageSize( options ) → {Deferred}

Description

Sets the page size setting of the page. This method works only when the current view is the search page.

var plp = container.getComponent('PLP');
			plp.setPageSize({pageSize: "12"});
Parameters
Name Type Description
options Object

An object with one property pageSize. The value of pageSize must be a valid page size setting ID. Use getAllPageSize to get a list of all page size settings.
Returns

Returns a Deferred object. If the promise is resolved, but the current page is not the search page or an error occurs, it returns false.

getFilters() → {Array.<Filter>}

Description

Gets information about the filters currently applied on the search page. This method works only when the current view is the search page.

Some filters might be returned in the object

var plp = container.getComponent('PLP');
			plp.getFilters();
			
			// Example of the array of objects returned by getFilters();
			[
			  {
			    config: {},
			    id: "custitem30",
			    isParameter: false,
			    url: "custitem30",
			    value: [
			      "Small"
			    ] 
			  },
			  {
			    config: {},
			    id: "custitem40",
			    isParameter: false,
			    url: "custitem40",
			    value: [
			      "Sportswear"
			    ] 
			  }
			]
Returns

Returns an array of Filter objects. If no filters are set, it returns an empty array.

getAllFilters() → {Array.<Filter>}

Description

Gets information about all filters that can be applied on the search page. One or more of the filters may be active. This method works only when the current view is the search page.

var plp = container.getComponent('PLP');
			plp.getAllFilters();
			
			// Example of the array of objects returned by getAllFilters();
			[
			  {
			    id: "custitem30",
			    url: "custitem30",
			    values: [
			      {
			        displayName: "Small",
			        isActive: false,
			        isImageTile: false,
			        label: "Small",
			        link: "/custitem30/Small"
			      },
			      {
			        displayName: "Medium",
			        isActive: true,
			        isImageTile: false,
			        label: "Medium",
			        link: "/custitem30/Medium"
			      }
			    ] 
			  },
			  {
			    id: "custitem40",
			    url: "custitem40",
			    values: [
			      {
			        displayName: "Accessories",
			        isActive: false,
			        isImageTile: false,
			        label: "Accessories",
			        link: "/custitem30/Medium/custitem40/Accessories"
			      },
			      {
			        displayName: "Outerwear",
			        isActive: false,
			        isImageTile: false,
			        label: "Accessories",
			        link: "/custitem30/Medium/custitem40/Outerwear"
			      }
			    ]
			  }
			]
Returns

Returns an array of Filter objects. Each Filter object contains a set of properties, including the following:

  • id - The filter ID. Use this when setting filters on the page with setFilters.
  • url -
  • values - An array of objects, each of which represents a possible value for the filter. Use the label property of the object when setting filters on the page with setFilters.

setFilters( filters ) → {Deferred}

Description

Sets the filters on the product list page.

Parameters
Name Type Description
filters Array.<Filter>

An object with one property called filters.
Returns

Returns a Deferred object. If the promise is resolved, but the current page is not the search page or an error occurs, it returns false.

getSearchText() → {String|null}

Description

Gets the search text entered by the visitor on the search page. This method works only when the current view is the search page.

var plp = container.getComponent('PLP');
			plp.getSearchText();
Returns

Returns the search text entered on the search page. If no text was entered, it returns an empty string.

setSearchText( options ) → {Deferred}

Description

Sets the search text and performs the search on the current search page.

var plp = container.getComponent('PLP');
			plp.getFilters();
			
			plp.setSearchText({searchText: "shirt"});
Parameters
Name Type Description
options Object

An object with one property called searchText. Its value is the search string. If the object is empty, all products are returned in the search.
Returns

Returns a Deferred object. If the promise is resolved, but the current page is not the search page or an error occurs, it returns false.

getItemsInfo() → {Array.<SearchItemInfo>}

Description

Gets information about all items currently displayed on the product list page.

var plp = container.getComponent('PLP');
			plp.getFilters();
			
			plp.getItemsInfo();
			
			// Example of the array of objects returned by getItemsInfo()
			[
			  {
			    displayname: "Casual Striped Shirt",
			    internalid: 8034,
			    isinstock: true,
			    itemid: OM5235,
			    onlinecustomerprice: 38.99
			    quantityavailable: 6,
			    ...
			  },
			  {
			    displayname: "Casual Chequered Shirt",
			    internalid: 8109,
			    isinstock: true,
			    itemid: OM5337,
			    onlinecustomerprice: 29.99
			    quantityavailable: 3,
			    ...
			  }
			]
Returns

Returns an array of objects, each of which corresponds to an item on the product list page. If there are no items on the product list page, it returns an empty array.

getCategoryInfo() → {Object}

Description

Gets information about the current category, including the parent URL, any sibling categories, and any child categories. This method works only when the view is a category page.

Commerce categories are See Commerce Categories for more information about setting up commerce categories in NetSuite.

var plp = container.getComponent('PLP');
			var categoryinfo = plp.getCategoryInfo();
			
			var categoryname = categoryinfo.name;
			var categorypage = categoryinfo.fullurl;
			
			if (categroypage.indexOf("sports") >= 0) {
			  alert("Special offer on all sports clothes and equipment until the end of the month!");
			}
			
			// Example of the object returned by getCategoryInfo()
			{
			  addtohead: "",
			  breadcrumb: Array [],
			  categories: [
			    {
			      name: "Climbing", 
			      internalid: "37",
			      sequencenumber: "0",
			      ...
			    },
			    {
			      name: "Ski", 
			      internalid: "38", 
			      sequencenumber: "1",
			      ...
			    }
			  ],
			  description: "",
			  fullurl: "/sports",
			  internalid: "35",
			  name: "Sports Clothes and Equipment",
			  pagetitle: "Sports Clothes and Equipment",
			  parenturl: "",
			  ...
			}
Returns

Returns a CategoryInfo object the current view is category page. If the view is not a category page, it returns undefined. The CategoryInfo object includes the following properties:

  • categories - An array of child categories of the current category. Each child category is an object with its own set of properties, such as description, fullurl, internalid, and name.
  • description - The description of the category.
  • internalid - The internal ID of the commerce category record in NetSuite.
  • fullurl - The full URL of the category. In NetSuite, the full URL of a commerce category is the path part of the URL after the domain name.
  • name - The name of the category.
  • pagetitle - The title of the page.
  • parenturl - The full url of the parent category (if the current category has a parent category).

getURL( Pagination ) → {String}

Description

Gets the Item Search API URL with the current filters and settings of the search page, such as the page size setting (see getPageSize()) or the display options (see getDisplay()). To ensure the URL is correctly formed and uses the current filters, sorting, and pagination, pass a Pagination object as an argument to getUrl().

var plp = container.getComponent('PLP');
			var itemsearchurl = plp.getUrl(plp.getPagination);
			
			// Example of string returned by getUrl() without a Pagination object.
			"/api/items?c=1010101&country=US¤cy=USD&fieldset=search&include=facets&language=en&limit=24&n=2&offset=0&pricelevel=5&q=&sort=relevance%3Adesc"
			
			// Example of string returned by getUrl() with a Pagination object as an argument.
			"/api/items?c=1010101&country=US¤cy=USD&fieldset=search&include=facets&language=en&limit=12&n=2&offset=0&pricelevel5.from=20.00&pricelevel5.to=30.00&pricelevel=5&q=&sort=relevance%3Adesc"

See Item Search API for more information about the item search API.

Parameters
Name Type Description
Pagination Pagination
Returns

Returns the item search API URL as a string.

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