Access a Component

This topic applies to

Applies to

Aconcagua | SuiteCommerce Web Stores

If you require your extension to access a specific component, such as the Product Details Page or Product List Page, you must first access the component. To access a component and create the instance, pass the component identifier to the main container object ComponentContainer. You can then verify that the component exists and return the instance to the rest of the extension code, including routers, models, collections, and views.

The following table lists the available components, and associated identifiers, and their location in the code:

Component Name

Identifier

Location

BackEndCartComponent

Cart

Backend

CartComponent

Cart

Frontend

CheckoutComponent

Checkout

Frontend

CMSComponent

CMS

Frontend

EnvironmentComponent

Environment

Frontend

ProductDetailsPageComponent

PDP

Frontend

LayoutComponent

Layout

Frontend

ProductListPageComponent

PLP

Frontend

Access the Frontend Components

To access the frontend components:

  1. Access a frontend component in the mountToApp() function in the entry point for your extension.

    By default, the entry point file is located in the JavaScript subdirectory in your extension code and uses the following naming convention:

    <module name>.js

    Access a component with the container.getComponent(component_name) method.

    The following table lists the available methods to access any component within the mountToApp() method:

    Component

    Variable

    PDP

    var pdp = container.getComponent('PDP');

    Cart

    var cart = container.getComponent('Cart');

    PLP

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

    Checkout

    var checkout = container.getComponent('Checkout');

    Environment

    var env = container.getComponent('Environment');

    CMS

    var cms = container.getComponent('CMS');

    Layout

    var layout = container.getComponent('Layout');

    Important

    Some component methods need to be used after the main view of the component has been rendered (after the event afterShowContent has been triggered). This applies to the PDP, PLP, and Checkout components.


  2. Define the dependencies:

    define(
      'Vendor.ExtensionName.1.0.0.Extension'
    ,  [
        'Vendor.ExtensionName.1.0.0.ExtensionName.Model'
      , 'Vendor.ExtensionName.1.0.0.Extension.View'
        ]
    ,  function (
         ExtensionModel
      ,  ExtensionView
      )

    Note

    In the above example, the values for Vendor and ExtensionName depend on the values you enter when you create the baseline extension. The names ExtensionModel and ExtensionName are example names for your model and view, respectively, that you define when you create the extension code.


  3. Access the component from within the mountToApp() function.

    Since you can use the same entry point file for all three applications (MyAccount, Checkout, or Shopping), make sure that your component is not null before using it.

    The following example shows how to call the pdp component and test to see that it exists before passing it to the rest of the models and views:

    {
      'use strict';
      return  {
        mountToApp: function mountToApp (container)
        {
    
          var pdp = container.getComponent('PDP');
                     
          if(pdp)
          {
    
            pdp.addChildViews();
    
            new ExtensionModel({pdp: pdp});
          }
        }
      }
    };
    });

Access the Backend Component

Access BackEndCartComponent anywhere in the SuiteScript code, using the Application.getComponent(component_name) method.

Currently, only the BackEndCartComponent component is available to SuiteScript code.

To access the backend component

  1. Define the dependencies:

    define('Vendor.ExtensionName.1.0.0.Extension.File'
    ,   [
            'Application'
        ,   'underscore'
        ]
    ,   function(
           Application
        ,   _
        )

    To access the backend component, you must include Application as a dependency.

    Note

    In the above example, the values for Vendor and ExtensionName depend on the values you entered when you created the baseline extension. The name Extension is an example name that you define when you create the extension code.


  2. Use the getComponent() method to access the BackEndCartComponent instance:

    {
        'use strict';
         
        // Get the cart component
        var cart_component = Application.getComponent('Cart');
    });