Access Frontend Components in SuiteCommerce Extensions

Frontend components in SuiteCommerce extensions are essential for creating dynamic eCommerce user experiences. This article outlines how to access these components effectively, ensuring your extension integrates seamlessly within the SuiteCommerce architecture.

How to Access Frontend Components

Step 1: Accessing the Component in mountToApp()

To begin, you need to access a frontend component through the mountToApp() function, which serves as the entry point for your extension. Typically, the entry point file is located under the JavaScript subdirectory of your extension and follows this naming convention:

<Vendor.ExtensionName.ModuleName>.js

Important Note: Some component methods must be executed after the main component view is rendered, specifically following the afterShowContent event for components like Product Detail Page (PDP), Product List Page (PLP), and Checkout.

Step 2: Defining Dependencies

Next, define the dependencies required for your extension using the following code template:

1"text-purple-400">define(
2  'Vendor.ExtensionName.1.0.0.Extension',
3  [
4    'Vendor.ExtensionName.1.0.0.ExtensionName.Model',
5    'Vendor.ExtensionName.1.0.0.Extension.View'
6  ],
7  "text-purple-400">function (
8    ExtensionModel,
9    ExtensionView
10  ) {
11    // your code here
12  }
13);

In this example, replace Vendor and ExtensionName with the names you defined during the creation of your extension. Additionally, ExtensionModel and ExtensionView serve as placeholders for your actual model and view names.

Step 3: Instantiating the Component

Lastly, you'll want to instantiate the component using the getComponent() method on the container object. Since the same entry point file may be utilized across various applications (e.g., MyAccount, Checkout, or Shopping), ensure that the component is verified as not null before proceeding.

The following example demonstrates how to call the PDP component while checking for its existence:

1{
2  'use strict';
3 
4  "text-purple-400">return {
5    mountToApp: "text-purple-400">function mountToApp (container) {
6      "text-purple-400">var pdp = container.getComponent('PDP');
7 
8      "text-purple-400">if (pdp) {
9        pdp.addChildViews();
10 
11        "text-purple-400">new ExtensionModel({pdp: pdp});
12      }
13    }
14  };
15}

This code checks for the PDP component and allows you to add child views to it, enhancing the extensibility of your eCommerce interfaces.

Key Takeaways

• Access frontend components in SuiteCommerce using the mountToApp() function.
• Ensure methods are invoked after the component view is rendered for proper functionality.
• Define your extension's dependencies clearly to maintain code organization.
• Always check for the component's existence before using it to avoid errors.

Source: This article is based on Oracle's official NetSuite documentation.