Instantiating API Components

To use an extensibility API component in your extension, you usually have to instantiate the class in the component first. To instantiate the class, pass the ID of the class to the getComponent() method on the container object. It is also good practice to check that the component exists before accessing its methods or properties. If the component instantiation fails, getComponent() returns null.

          var pdp = container.getComponent('PDP');
 
if (pdp) {
  var stockinfo = pdp.getStockInfo();
}
else {
  console.log('Could not instantiate PDP.');
}

Some components in the extensibility API expose classes that do not need to be instantiated with getComponent(). Instead, classes in the following components are added as dependencies when defining modules such as models, views, and collections:

SCCollection
SCCollectionView
SCFormView
SCModel
SCView

See the extensibility API reference for more information about each component.

Access the Frontend Components

To access the frontend components:

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:
```
                  <Vendor.ExtensionName.ModuleName>.js 

                
```
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.
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.
Instantiate the component with the getComponent() method on the container object.

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

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.

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

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